Skip to content

Commit

Permalink
chore: ui components updated
Browse files Browse the repository at this point in the history
  • Loading branch information
anwarulislam committed Dec 15, 2023
1 parent 8002cd4 commit b774082
Showing 21 changed files with 264 additions and 168 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@
"vue": "^3.2.25"
},
"dependencies": {
"@boringer-avatars/vue3": "^0.2.1",
"@fontsource-variable/inter": "^5.0.5",
"@fontsource-variable/material-symbols-rounded": "^5.0.5",
"@fontsource-variable/roboto-mono": "^5.0.6",
@@ -70,8 +71,8 @@
"sass": "^1.53.0",
"tailwindcss": "^3.3.2",
"typescript": "^4.5.4",
"unplugin-fonts": "^1.0.3",
"unplugin-icons": "^0.16.1",
"unplugin-fonts": "^1.0.3",
"unplugin-vue-components": "^0.21.0",
"vite": "^3.2.3",
"vite-plugin-checker": "^0.5.1",
11 changes: 11 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

84 changes: 30 additions & 54 deletions src/assets/scss/histoire.scss
Original file line number Diff line number Diff line change
@@ -5,24 +5,24 @@

@mixin base-theme {
--font-sans: "Inter Variable", sans-serif;
--font-icon: "Material Symbols Rounded Variable";
--font-mono: "Roboto Mono Variable", monospace;
--font-size-body: 0.75rem;
--font-size-tiny: 0.688rem;
--font-size-tiny: 0.625rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-primary-sticky-fold: 4rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-fourth-sticky-fold: 10.2rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-primary-sticky-fold: 6.75rem;
--upper-mobile-secondary-sticky-fold: 8.813rem;
--upper-mobile-sticky-fold: 10.875rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--lower-fourth-sticky-fold: 9.188rem;
--sidebar-primary-sticky-fold: 2rem;
--properties-primary-sticky-fold: 2.063rem;
}

@mixin dark-theme {
@@ -78,23 +78,13 @@
}

:root {

@include base-theme;
@include dark-theme;
@include green-theme;

@include base-theme;
@include dark-theme;
@include green-theme;

@apply antialiased;
accent-color: var(--accent-color);
font-variant-ligatures: common-ligatures;

// Colors
--info-color: #ec4899;
--success-color: #10b981;
--blue-color: #3b82f6;
--warning-color: #f59e0b;
--cl-error-color: #ef4444;
--sv-error-color: #dc2626;
}

::-webkit-scrollbar-track {
@@ -123,7 +113,7 @@ input::placeholder,
textarea::placeholder,
.cm-placeholder {
@apply text-secondary;
@apply opacity-50;
@apply opacity-50 #{!important};
}

input,
@@ -142,7 +132,7 @@ body {
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@apply leading-body;
@apply leading-body #{!important};
animation: fade 300ms forwards;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
@@ -224,7 +214,7 @@ a {
@apply shadow-none #{!important};
@apply fixed;
@apply inline-flex;
@apply -mt-8;
@apply -mt-7;
}
}

@@ -240,7 +230,7 @@ a {
@apply font-semibold;
@apply px-2 py-1;
@apply truncate;
@apply leading-normal;
@apply leading-body;
@apply items-center;

kbd {
@@ -287,7 +277,7 @@ a {
@apply overflow-y-auto;
@apply text-body text-secondary;
@apply p-2;
@apply leading-normal;
@apply leading-body;
@apply focus:outline-none;
scroll-behavior: smooth;

@@ -319,7 +309,7 @@ a {

hr {
@apply border-b border-dividerLight;
@apply my-2;
@apply my-2 #{!important};
}

.heading {
@@ -408,48 +398,33 @@ pre.ace_editor {
}
}

.select-wrapper {
@apply flex flex-1;
@apply relative;
@apply after:absolute;
@apply after:flex;
@apply after:inset-y-0;
@apply after:items-center;
@apply after:justify-center;
@apply after:pointer-events-none;
@apply after:font-icon;
@apply after:text-current;
@apply after:right-3;
@apply after:content-["\e5cf"];
@apply after:text-lg;
}

.info-response {
color: var(--info-color);
color: var(--status-info-color);
}

.success-response {
color: var(--success-color);
color: var(--status-success-color);
}

.redir-response {
color: var(--warning-color);
.redirect-response {
color: var(--status-redirect-color);
}

.cl-error-response {
color: var(--cl-error-color);
.critical-error-response {
color: var(--status-critical-error-color);
}

.sv-error-response {
color: var(--sv-error-color);
.server-error-response {
color: var(--status-server-error-color);
}

.missing-data-response {
@apply text-secondaryLight;
color: var(--status-missing-data-color);
}

.toasted-container {
@apply max-w-md;
@apply z-[10000];

.toasted {
&.toasted-primary {
@@ -595,12 +570,13 @@ pre.ace_editor {
@apply inline-flex;
@apply font-sans;
@apply text-tiny;
@apply bg-divider;
@apply bg-dividerLight;
@apply rounded;
@apply ml-2;
@apply px-1;
@apply min-w-5;
@apply min-h-5;
@apply px-0.5;
@apply min-w-[1rem];
@apply min-h-[1rem];
@apply leading-none;
@apply items-center;
@apply justify-center;
@apply border border-dividerDark;
4 changes: 2 additions & 2 deletions src/components/button/Primary.vue
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<HoppSmartLink
:to="to"
:blank="blank"
class="button-primary relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
class="relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
:exact="exact"
:class="[
color
@@ -40,7 +40,7 @@
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
<div class="max-w-54 truncate">
<div class="max-w-[16rem] truncate">
{{ label }}
</div>
<div v-if="shortcut.length" class="<sm:hidden">
2 changes: 1 addition & 1 deletion src/components/button/Secondary.vue
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
<div class="truncate max-w-54">
<div class="truncate max-w-[16rem]">
{{ label }}
</div>
<div v-if="shortcut.length" class="<sm:hidden">
47 changes: 42 additions & 5 deletions src/components/smart/Checkbox.vue
Original file line number Diff line number Diff line change
@@ -6,28 +6,45 @@
@click="emit('change')"
>
<input
id="checkbox"
:id="checkboxID"
type="checkbox"
name="checkbox"
:name="name"
class="checkbox"
:checked="on"
@change="emit('change')"
/>
<label
for="checkbox"
:for="checkboxID"
class="pl-0 font-semibold truncate align-middle cursor-pointer"
>
<slot></slot>
</label>
</div>
</template>

<script lang="ts">
/*
This checkboxIDCounter is tracked in the global scope in order to ensure that each checkbox has a unique ID.
When we use this component multiple times on the same page, we need to ensure that each checkbox has a unique ID.
This is because the label's for attribute needs to match the checkbox's id attribute.
That's why we use a global counter that increments each time we use this component.
*/
let checkboxIDCounter = 564275
</script>

<script setup lang="ts">
// Unique ID for checkbox
const checkboxID = `checkbox-${checkboxIDCounter++}`
defineProps({
on: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "checkbox",
},
})
const emit = defineEmits<{
@@ -37,12 +54,14 @@ const emit = defineEmits<{

<style lang="scss" scoped>
.checkbox[type="checkbox"] {
@apply relative;
@apply appearance-none;
@apply hidden;
& + label {
@apply inline-flex items-center justify-center;
@apply cursor-pointer;
@apply relative;
&::before {
@apply border-2 border-divider;
@@ -54,10 +73,23 @@ const emit = defineEmits<{
@apply text-transparent;
@apply h-4;
@apply w-4;
@apply font-icon;
@apply mr-2;
@apply transition;
@apply content-["\e5ca"];
@apply empty:mr-0;
content: "";
}
&::after {
content: "";
border: solid;
border-width: 0 1.9px 1.9px 0;
height: 0.6rem;
width: 0.3rem;
left: 0.35rem;
position: absolute;
top: 2px;
transform: rotate(45deg);
opacity: 0;
}
}
@@ -66,5 +98,10 @@ const emit = defineEmits<{
@apply border-accent;
@apply text-accentContrast;
}
&:checked + label::after {
@apply text-accentContrast;
opacity: 1;
}
}
</style>
28 changes: 22 additions & 6 deletions src/components/smart/ConfirmModal.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
<template>
<HoppSmartModal v-if="show" dialog :title="confirm ?? t?.('modal.confirm') ?? 'Confirm'" role="dialog" aria-modal="true"
@close="hideModal">
<HoppSmartModal
v-if="show"
dialog
:title="confirm ?? t?.('modal.confirm') ?? 'Confirm'"
role="dialog"
aria-modal="true"
@close="hideModal"
>
<template #body>
<div class="flex flex-col items-center justify-center">
<div class="text-center">
{{ title }}
</div>
</template>
<template #footer>
<span class="flex space-x-2">
<HoppButtonPrimary v-focus :label="yes ?? t?.('action.yes') ?? 'Yes'" :loading="!!loadingState" outline
@click="resolve" />
<HoppButtonSecondary :label="no ?? t?.('action.no') ?? 'No'" filled outline @click="hideModal" />
<HoppButtonPrimary
v-focus
:label="yes ?? t?.('action.yes') ?? 'Yes'"
:loading="!!loadingState"
outline
@click="resolve"
/>
<HoppButtonSecondary
:label="no ?? t?.('action.no') ?? 'No'"
filled
outline
@click="hideModal"
/>
</span>
</template>
</HoppSmartModal>
Loading

0 comments on commit b774082

Please sign in to comment.