Skip to content
This repository has been archived by the owner on Aug 25, 2024. It is now read-only.

Commit

Permalink
feat: add light mode and more setting list
Browse files Browse the repository at this point in the history
  • Loading branch information
elonehoo committed Dec 6, 2023
1 parent b0ad227 commit a9b9682
Show file tree
Hide file tree
Showing 9 changed files with 123 additions and 34 deletions.
2 changes: 1 addition & 1 deletion components/sidebar/search/item/Group.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const props = defineProps<{
<div livraison-app="cmd-group">
<div
livraison-app="cmd-group-title"
class="pt-4 p-2 text-#9c9ca0 text-xs font-semibold leading-[1.67]"
class="pt-4 p-2 text-#8e8d91 dark:text-#9c9ca0 text-xs font-semibold leading-[1.67]"
>
{{ props.title }}
</div>
Expand Down
13 changes: 9 additions & 4 deletions components/sidebar/search/item/Item.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@
</script>

<template>
<div livraison-app="cmd-item" class="items-center rounded cursor-default flex min-h-11 select-none px-3 py-1.5 hover:bg-#252525 cursor-pointer">
<div livraison-app="cmd-item-icon" class="items-center text-[#a7a7a099] flex shrink-0 text-xl mr-4">
<div livraison-app="cmd-item" class="items-center rounded cursor-default flex min-h-11 select-none px-3 py-1.5 hover:bg-#f4f4f5 dark:hover:bg-#252525 cursor-pointer">
<div livraison-app="cmd-item-icon" class="items-center text-#77757d dark:text-#a7a7a099 flex shrink-0 text-xl mr-4">
<slot name="icon" />
</div>
<div livraison-app="cmd-item-label" class="text-[#eaeaea] flex-1 text-sm leading-normal overflow-hidden text-ellipsis whitespace-nowrap">
<slot />
<div livraison-app="cmd-item-label" class="text-#424149 dark:text-#eaeaea flex-1 text-sm leading-normal overflow-hidden text-ellipsis whitespace-nowrap">
<div class="font-normal text-justify text-base leading-6 flex flex-nowrap">
<span class="text-[#1c9ee4] shrink-0 overflow-visible whitespace-pre" />
<div class="overflow-hidden text-ellipsis whitespace-pre">
<slot />
</div>
</div>
</div>
<div livraison-app="cmd-item-suffix" class="gap-x-0.5 flex text-xs">
<slot name="suffix" />
Expand Down
19 changes: 19 additions & 0 deletions components/sidebar/search/list/GoToSettings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
const searchStore = useSearchStore()
const settingsStore = useSettingsStore()
function handleGoToSettings() {
searchStore.toggleModal()
settingsStore.toggleModalShow()
}
</script>

<template>
<SidebarSearchItem @click="handleGoToSettings">
<template #icon>
<Icon name="carbon:arrow-right" class="shrink-0 select-none" />
</template>
Go to Settings
</SidebarSearchItem>
</template>
40 changes: 40 additions & 0 deletions components/sidebar/search/list/SettingColorMode.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script setup lang="ts">
const colorMode = useColorMode()
const settingColorModeList = ref<{
label: string
value: string
handle: () => void
}[]>([
{
label: 'Change Colour Mode to System',
value: 'system',
handle: () => {
colorMode.preference = 'system'
},
},
{
label: 'Change Colour Mode to Dark',
value: 'dark',
handle: () => {
colorMode.preference = 'dark'
},
},
{
label: 'Change Colour Mode to Light',
value: 'light',
handle: () => {
colorMode.preference = 'light'
},
},
])
</script>

<template>
<template v-for="setting in settingColorModeList" :key="setting.label">
<SidebarSearchListSettingList
v-if="setting.value !== colorMode.preference"
:label="setting.label"
:handle="setting.handle"
/>
</template>
</template>
15 changes: 15 additions & 0 deletions components/sidebar/search/list/SettingList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script setup lang="ts">
const props = defineProps<{
label: string
handle: () => void
}>()
</script>

<template>
<SidebarSearchItem @click="props.handle">
<template #icon>
<Icon name="carbon:settings" class="shrink-0 select-none" />
</template>
{{ props.label }}
</SidebarSearchItem>
</template>
25 changes: 25 additions & 0 deletions components/sidebar/search/list/ToggleSidebar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script setup lang="ts">
const searchStore = useSearchStore()
const showSidebar = useSidebarStore()
const { metaSymbol } = useShortcuts()
function handleToggleLeftSidebar() {
showSidebar.handleToggleSidebar()
searchStore.toggleModal()
}
</script>

<template>
<SidebarSearchItem @click="handleToggleLeftSidebar()">
<template #icon>
<GlobalLeftSidebar class="shrink-0 select-none" />
</template>
{{ showSidebar.show ? 'Collapse' : 'Expand' }} Left Sidebar
<template #suffix>
<Kbd :label="metaSymbol" />
<Kbd label="/" />
</template>
</SidebarSearchItem>
</template>
2 changes: 1 addition & 1 deletion components/sidebar/search/modal/Input.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
<template>
<input
placeholder="Type a command or search anything..."
class="text-#eaeaea shrink-0 text-xl h-16.5 w-full px-6 py-[21px] border-b-#2e2e2e border-b border-solid bg-transparent caret-[#1c9ee4] rounded-none border-[none]"
class="text-#424149 dark:text-#eaeaea shrink-0 text-xl h-16.5 w-full px-6 py-[21px] border-b-#e3e2e4 dark:border-b-#2e2e2e border-b border-solid bg-transparent caret-[#1c9ee4] rounded-none border-[none]"
>
</template>
39 changes: 12 additions & 27 deletions components/sidebar/search/modal/Modal.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
<script setup lang="ts">
const searchStore = useSearchStore()
const showSidebar = useSidebarStore()
const { metaSymbol } = useShortcuts()
function handleToggleLeftSidebar() {
showSidebar.handleToggleSidebar()
searchStore.toggleModal()
}
</script>

<template>
Expand Down Expand Up @@ -41,23 +32,14 @@ function handleToggleLeftSidebar() {
>
<div livraison-app="cmd-list">
<SidebarSearchItemGroup title="Recent" />
<SidebarSearchItemGroup title="Navigation" />
<SidebarSearchItemGroup title="Settings">
<SidebarSearchListSettingColorMode />
</SidebarSearchItemGroup>
<SidebarSearchItemGroup title="Layout Controls">
<SidebarSearchItem @click="handleToggleLeftSidebar()">
<template #icon>
<GlobalLeftSidebar class="shrink-0 select-none" />
</template>
<div class="font-normal text-justify text-base leading-6 flex flex-nowrap">
<span class="text-[#1c9ee4] shrink-0 overflow-visible whitespace-pre" />
<div class="overflow-hidden text-ellipsis whitespace-pre">
{{ showSidebar.show ? 'Collapse' : 'Expand' }} Left Sidebar
</div>
</div>
<template #suffix>
<Kbd :label="metaSymbol" />
<Kbd label="/" />
</template>
</SidebarSearchItem>
<SidebarSearchListToggleSidebar />
</SidebarSearchItemGroup>
<SidebarSearchItemGroup title="Navigation">
<SidebarSearchListGoToSettings />
</SidebarSearchItemGroup>
</div>
</div>
Expand All @@ -69,13 +51,16 @@ function handleToggleLeftSidebar() {
<style scoped>
.sidebar-search-modal-box{
@apply pointer-events-auto z-1000 relative;
@apply rounded-xl bg-#1e1e1e;
@apply rounded-xl bg-#fbfbfc dark:bg-#1e1e1e;
@apply w-160 min-w-120 max-w-[calc(100vw-50px)];
outline: none;
will-change: transform,opacity;
}
.sidebar-search-modal-box-shadow{
box-shadow: px 16px 80px 0px rgba(0,0,0,.8);
box-shadow: 0px 10px 80px 0px rgba(0,0,0,.2);
}
.dark .sidebar-search-modal-box-shadow{
box-shadow: 0px 16px 80px 0px rgba(0,0,0,.8);
}
.sidebar-search-modal-box[data-state=entered],.sidebar-search-modal-box[data-state=entering] {
animation: open-modal 120ms ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion ui/kbd/Kbd.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const props = defineProps<{
</script>

<template>
<div class="items-center bg-[#303030] rounded text-[#9c9ca0] flex h-5 justify-center w-6 px-1 py-0">
<div class="items-center bg-#eeeeee dark:bg-#303030 rounded text-#8e8d91 dark:text-#9c9ca0 flex h-5 justify-center w-6 px-1 py-0">
{{ props.label }}
</div>
</template>

0 comments on commit a9b9682

Please sign in to comment.