generated from antfu-collective/vitesse
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
❇️ Implement Theme Support * Fixed Layout support Fixes #114 * reorganize nav bar add theme customize component * add theme customize component * Implement Theme Support Fixes #93 * fix linting issues
- Loading branch information
Showing
15 changed files
with
205 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <script setup> | ||
| import { | ||
| Checkmark48Filled as CheckIcon, | ||
| WeatherMoon48Regular as MoonIcon, | ||
| WeatherSunny48Regular as SunIcon, | ||
| } from '@vicons/fluent' | ||
| import { storeToRefs } from 'pinia' | ||
| const { t } = useI18n() | ||
| const layout = useLayoutStore() | ||
| const { isRtl } = storeToRefs(layout) | ||
| function setLight() { | ||
| if (layout.isDark) | ||
| layout.toggleTheme() | ||
| } | ||
| function setDark() { | ||
| if (!layout.isDark) | ||
| layout.toggleTheme() | ||
| } | ||
| const colors = [ | ||
| '#00ad4c', '#ef4848', '#FC0', '#FF8000', '#22d3ee', | ||
| ] | ||
| const selectedColorIndex = ref(0) | ||
| function setColor(index) { | ||
| selectedColorIndex.value = index | ||
| layout.setThemeColor(colors[index]) | ||
| } | ||
| onMounted(() => { | ||
| selectedColorIndex.value = colors.findIndex(x => x === layout.themeColor) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="section"> | ||
| <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold"> | ||
| {{ t('customize.theme') }} | ||
| </NTag> | ||
|
|
||
| <n-space justify="center" size="large"> | ||
| <NButton ghost class="p-7" :type="layout.isDark === false ? 'primary' : 'default'" size="large" @click="setLight"> | ||
| <template #icon> | ||
| <NIcon> | ||
| <SunIcon /> | ||
| </NIcon> | ||
| </template> | ||
| </NButton> | ||
|
|
||
| <NButton ghost class="w-full p-7" :type="layout.isDark ? 'primary' : 'default'" size="large" @click="setDark"> | ||
| <template #icon> | ||
| <NIcon> | ||
| <MoonIcon /> | ||
| </NIcon> | ||
| </template> | ||
| </NButton> | ||
| </n-space> | ||
| </div> | ||
| <div class="section"> | ||
| <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold"> | ||
| {{ t('customize.color') }} | ||
| </NTag> | ||
|
|
||
| <div> | ||
| <NButton | ||
| v-for="(color, index) of colors" :key="index" :color="color" size="medium" circle icon="CheckIcon" | ||
| class="mx-1" @click="setColor(index)" | ||
| > | ||
| <template #icon> | ||
| <CheckIcon v-if="selectedColorIndex === index" /> | ||
| <span v-else /> | ||
| </template> | ||
| </NButton> | ||
| </div> | ||
| </div> | ||
| <div class="section"> | ||
| <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold"> | ||
| {{ t('customize.layout') }} | ||
| </NTag> | ||
|
|
||
| <div> | ||
| <n-switch v-model:value="isRtl" /> | ||
| RTL Layout | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .section { | ||
| margin-bottom: 1rem; | ||
| padding: 1rem 0; | ||
| .section-title { | ||
| font-weight: 500; | ||
| padding: 0.2rem 0; | ||
| border-bottom: solid 1px #CCC; | ||
| margin-bottom:1rem; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <script setup lang='ts'> | ||
| import { | ||
| Settings48Regular as CustomizeIcon, | ||
| } from '@vicons/fluent' | ||
| const showCustomizeDialog = ref(false) | ||
| const { t } = useI18n() | ||
| function toggleDialog() { | ||
| showCustomizeDialog.value = !showCustomizeDialog.value | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div v-bind="$attrs"> | ||
| <n-button quaternary circle @click="toggleDialog()"> | ||
| <template #icon> | ||
| <NIcon size="1.4rem"> | ||
| <CustomizeIcon class="rotate-animated" /> | ||
| </NIcon> | ||
| </template> | ||
| </n-button> | ||
| </div> | ||
|
|
||
| <n-drawer v-model:show="showCustomizeDialog" :width="400" placement="right"> | ||
| <n-drawer-content closable :title="t('customize.title')"> | ||
| <CustomizeDialog @close="showCustomizeDialog = false" /> | ||
| </n-drawer-content> | ||
| </n-drawer> | ||
| </template> | ||
|
|
||
| <style scoped lang='scss'></style> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters