fix active color

This commit is contained in:
2023-06-14 20:39:36 +02:00
parent a4c25b8342
commit 9933f730ad
6 changed files with 19 additions and 70 deletions

64
package-lock.json generated
View File

@@ -47,8 +47,7 @@
"marked": "^4.3.0",
"shortid": "^2.2.16",
"turndown": "^7.1.2",
"vue": "^3.3.4",
"vue-virtual-scroller": "^2.0.0-beta.8"
"vue": "^3.3.4"
},
"devDependencies": {
"@capacitor/cli": "^5.0.4",
@@ -9131,11 +9130,6 @@
"node": ">= 8"
}
},
"node_modules/mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -12845,22 +12839,6 @@
"node": ">=4.0"
}
},
"node_modules/vue-observe-visibility": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
"integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-template-compiler": {
"version": "2.7.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -12888,19 +12866,6 @@
"typescript": "*"
}
},
"node_modules/vue-virtual-scroller": {
"version": "2.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
"integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
"dependencies": {
"mitt": "^2.1.0",
"vue-observe-visibility": "^2.0.0-alpha.1",
"vue-resize": "^2.0.0-alpha.1"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -20189,11 +20154,6 @@
"yallist": "^4.0.0"
}
},
"mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -22916,18 +22876,6 @@
}
}
},
"vue-observe-visibility": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
"integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
"requires": {}
},
"vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"requires": {}
},
"vue-template-compiler": {
"version": "2.7.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -22949,16 +22897,6 @@
"semver": "^7.3.8"
}
},
"vue-virtual-scroller": {
"version": "2.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
"integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
"requires": {
"mitt": "^2.1.0",
"vue-observe-visibility": "^2.0.0-alpha.1",
"vue-resize": "^2.0.0-alpha.1"
}
},
"wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

View File

@@ -54,8 +54,7 @@
"marked": "^4.3.0",
"shortid": "^2.2.16",
"turndown": "^7.1.2",
"vue": "^3.3.4",
"vue-virtual-scroller": "^2.0.0-beta.8"
"vue": "^3.3.4"
},
"devDependencies": {
"@capacitor/cli": "^5.0.4",

View File

@@ -58,7 +58,12 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
<UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
<UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
<template #activator="{ open }">
<UIButton size="sm" @click="openModal(open, confirmModal)" :join="true" @mousedown="vibrate">
<UIButton
size="sm"
@click="openModal(open, confirmModal)"
:join="true"
@mousedown="vibrate"
>
<i :class="confirmModal.icon" />
</UIButton>
</template>

View File

@@ -60,7 +60,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
>
<i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
</UIButton>
<UIModal v-if="(initialized && !user)">
<UIModal v-if="initialized && !user">
<template #activator="{ open }">
<UIButton
size="sm"
@@ -101,7 +101,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
}
.topbar-button {
&:active {
@apply border-white bg-white text-primary
@apply border-white bg-white text-primary;
}
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}

View File

@@ -16,7 +16,9 @@ const styleClass = computed(() => {
</script>
<template>
<li :class="styleClass">
<span class="flex items-center" v-if="props.title"><slot></slot></span>
<span class="flex items-center" v-if="props.title">
<slot></slot>
</span>
<a
class="flex w-full rounded-md"
:class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
@@ -26,3 +28,8 @@ const styleClass = computed(() => {
</a>
</li>
</template>
<style scoped>
.dui-active {
@apply bg-primary;
}
</style>

View File

@@ -1,3 +1,3 @@
import { Haptics, ImpactStyle } from '@capacitor/haptics'
export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })
export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })