Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f0167cc

Browse filesBrowse files
abichingerabichinger
committed
feat(light): Add ant theme
Make `ant` the new default theme. The old styles can be enabled with `theme="legacy"`
1 parent c4e9fdd commit f0167cc
Copy full SHA for f0167cc

File tree

Expand file treeCollapse file tree

6 files changed

+140
-12
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

6 files changed

+140
-12
lines changed
Open diff view settings
Collapse file

‎light/src/App.vue‎

Copy file name to clipboardExpand all lines: light/src/App.vue
+13-2Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
v-model:period="period"
66
format="crontab"
77
:locale="locale"
8-
:key="locale"
8+
:key="locale + theme"
99
@error="error = $event"
10+
:theme="theme"
1011
>
1112
</cron-light>
1213
<div>
@@ -15,11 +16,12 @@
1516
</div>
1617
<br />
1718
Error: {{ error }}
18-
<div style="margin-top: 1em">
19+
<div style="margin-top: 2em">
1920
<button @click="toggleDarkMode" class="cl-btn">
2021
Switch to {{ isDark ? 'Light' : 'Dark' }} Mode
2122
</button>
2223
<button @click="switchLocale" class="cl-btn">Locale: {{ locale }}</button>
24+
<button @click="switchTheme" class="cl-btn">Theme: {{ theme }}</button>
2325
</div>
2426
</div>
2527
</template>
@@ -28,11 +30,15 @@
2830
import CronLight from '@/components/cron-light.vue'
2931
import { ref, watch } from 'vue'
3032
33+
const themes = ['ant', 'legacy'] as const
34+
type Theme = (typeof themes)[number]
35+
3136
const value = ref(undefined)
3237
const period = ref('month')
3338
const error = ref('')
3439
const isDark = ref(false)
3540
const locale = ref('en')
41+
const theme = ref<Theme>('ant')
3642
3743
watch(value, (value) => {
3844
console.log('value changed: ' + value)
@@ -55,6 +61,11 @@ function switchLocale() {
5561
const i = (locales.indexOf(locale.value) + 1) % locales.length
5662
locale.value = locales[i]
5763
}
64+
65+
function switchTheme() {
66+
const i = (themes.indexOf(theme.value) + 1) % themes.length
67+
theme.value = themes[i]
68+
}
5869
</script>
5970

6071
<style>
Collapse file

‎light/src/components/cron-light.vue‎

Copy file name to clipboardExpand all lines: light/src/components/cron-light.vue
+7-2Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="cron-light">
2+
<span class="cron-light" :class="theme">
33
<span class="cl-prefix">{{ period.prefix.value }}</span>
44
<custom-select
55
:model-value="period.selected.value.id"
@@ -30,11 +30,16 @@
3030

3131
<script lang="ts">
3232
import CustomSelect from '@/components/select.vue'
33+
import '@/theme/ant.css'
3334
import { cronCoreProps, setupCron } from '@vue-js-cron/core'
34-
import { defineComponent, type ExtractPropTypes } from 'vue'
35+
import { defineComponent, type ExtractPropTypes, type PropType } from 'vue'
3536
3637
export const cronLightProps = () => ({
3738
...cronCoreProps(),
39+
theme: {
40+
type: String as PropType<'ant' | 'legacy'>,
41+
default: 'ant',
42+
},
3843
})
3944
4045
/**
Collapse file

‎light/src/components/select.vue‎

Copy file name to clipboardExpand all lines: light/src/components/select.vue
+37-8Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
<div class="cl-select">
33
<span
44
class="cl-btn"
5-
:class="{ disabled: disabled }"
5+
:class="{ disabled: disabled, active: menu }"
66
@click="
77
() => {
88
if (!disabled) toggleMenu()
99
}
1010
"
1111
ref="btn"
1212
>
13-
{{ selection ?? selectedStr }}
14-
15-
<span v-if="clearable && !isEmpty" class="cl-btn-clear" @click="clear">&#x2715;</span>
13+
<span class="cl-btn-selection">{{ selection ?? selectedStr }}</span>
14+
<span :class="{ clearable: clearable && !isEmpty }" class="cl-btn-suffix" @click="clear">
15+
<CloseCircleFilled v-if="clearable && !isEmpty" />
16+
<DownOutlined v-else />
17+
</span>
1618
</span>
1719

1820
<div :style="floatingStyles" ref="floating">
@@ -37,12 +39,18 @@
3739
</template>
3840

3941
<script lang="ts">
42+
import CloseCircleFilled from '@/icons/CloseOutlined.vue'
43+
import DownOutlined from '@/icons/DownOutlined.vue'
4044
import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
4145
import { selectProps, setupSelect } from '@vue-js-cron/core'
4246
import { defineComponent, ref } from 'vue'
4347
4448
export default defineComponent({
4549
name: 'CustomSelect',
50+
components: {
51+
CloseCircleFilled,
52+
DownOutlined,
53+
},
4654
props: {
4755
...selectProps(),
4856
},
@@ -105,6 +113,7 @@ export default defineComponent({
105113
padding: 0.1em 0.5em;
106114
user-select: none;
107115
min-height: 1.2em;
116+
position: relative;
108117
}
109118
110119
.cl-btn.disabled {
@@ -113,14 +122,34 @@ export default defineComponent({
113122
}
114123
115124
.cl-btn:not(.disabled):hover {
116-
/* border: 1px solid #ccc; */
125+
border: var(--cl-btn-hover-border, 1px solid #ddd);
117126
background-color: var(--cl-hover-bg-color, #d6d6d6);
118127
}
119128
120-
.cl-btn-clear {
121-
font-size: 1.2em;
122-
margin-left: 3px;
129+
.cl-btn.active {
130+
border: var(--cl-btn-hover-border, 1px solid #ddd);
131+
background-color: var(--cl-hover-bg-color, #d6d6d6);
132+
}
133+
134+
.cl-btn-suffix {
135+
margin-left: 0.4em;
136+
}
137+
138+
.cl-btn-suffix svg {
139+
display: inline-block;
140+
width: 0.8em;
141+
height: 0.8em;
123142
line-height: 1;
143+
opacity: 0.6;
144+
}
145+
146+
.cl-btn-suffix.clearable svg:hover {
147+
opacity: 0.9;
148+
}
149+
150+
.legacy .cl-btn-suffix:not(.clearable) {
151+
margin-left: 0;
152+
display: none;
124153
}
125154
126155
.cl-menu {
Collapse file

‎light/src/icons/CloseOutlined.vue‎

Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<!-- https://icon-sets.iconify.design/ant-design/page-2.html?icon-filter=close-outlined&keyword=ant -->
3+
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
4+
<path
5+
fill="currentColor"
6+
fill-rule="evenodd"
7+
d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.1.1 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.12.12 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.1.1 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926L224.297 857.629c-.04.041-.06.052-.083.059a.12.12 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.1.1 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512L166.371 224.297c-.041-.04-.052-.06-.059-.083a.12.12 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.1.1 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.12.12 0 0 1 .07 0Z"
8+
/>
9+
</svg>
10+
</template>
Collapse file

‎light/src/icons/DownOutlined.vue‎

Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<!-- https://icon-sets.iconify.design/ant-design/page-2.html?icon-filter=down-outlined&keyword=ant -->
3+
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
4+
<path
5+
fill="currentColor"
6+
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2L227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7"
7+
/>
8+
</svg>
9+
</template>
Collapse file

‎light/src/theme/ant.css‎

Copy file name to clipboard
+64Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* Inspired by https://antdv.com/ */
2+
3+
.ant {
4+
--cl-bg-color: none;
5+
--cl-btn-hover-border: 1px solid #1677ff;
6+
--cl-selected-bg-color: #e6f4ff;
7+
--cl-selected-text-color: #000;
8+
}
9+
10+
.ant .cl-btn {
11+
--cl-hover-bg-color: none;
12+
border-radius: 6px;
13+
}
14+
15+
.ant .cl-btn-selection {
16+
line-height: 1.7;
17+
}
18+
19+
.ant .cl-btn-suffix {
20+
margin-left: 0.5em;
21+
line-height: 1;
22+
}
23+
24+
.ant .cl-menu {
25+
--cl-bg-color: #fff;
26+
--cl-hover-bg-color: rgba(0, 0, 0, 0.04);
27+
border-radius: 8px;
28+
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
29+
padding: 4px;
30+
}
31+
32+
.ant .cl-col {
33+
padding: 5px 10px;
34+
}
35+
36+
.ant .cl-row > .cl-col:first-child {
37+
border-top-left-radius: 4px;
38+
border-bottom-left-radius: 4px;
39+
}
40+
41+
.ant .cl-row > .cl-col:last-child {
42+
border-top-right-radius: 4px;
43+
border-bottom-right-radius: 4px;
44+
}
45+
46+
.ant .cl-col.selected,
47+
.ant .cl-col.selected:hover {
48+
font-weight: bold;
49+
}
50+
51+
/* Dark mode styles */
52+
.dark .ant {
53+
--cl-text-color: inherit;
54+
--cl-border: 1px solid rgba(255, 255, 255, 0.6);
55+
--cl-selected-bg-color: #111b26;
56+
--cl-selected-text-color: #3497f3;
57+
}
58+
59+
.dark .ant .cl-menu {
60+
--cl-bg-color: #1f1f1f;
61+
--cl-hover-bg-color: #ffffff14;
62+
--cl-border: none;
63+
box-shadow: 0 3px 6px -4px #0000007a,0 6px 16px #00000052,0 9px 28px 8px #0003;
64+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.