marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

refactor to ui components

Browse Source
This commit is contained in:
Marco Crapts
2023-05-26 16:43:12 +02:00
parent a642fcd1fb
commit c3bd807bff
13 changed files with 122 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -95,7 +95,7 @@ provide('loading', loading)
<SkeletonNote v-else />
</main>
</div>
<Modal :open="passphraseRequired" :persistent="true">
<UIModal :open="passphraseRequired" :persistent="true">
<template #title>Enter your passphrase</template>
<template #default="{ close }">
<p>
@@ -118,9 +118,9 @@ provide('loading', loading)
</div>
</template>
<template #actions="{ close }">
<button class="btn-primary btn-sm btn" @click="submitPassphrase(close)">Submit</button>
<UIButton color="primary" size="sm" @click="submitPassphrase(close)">Submit</UIButton>
</template>
</Modal>
</UIModal>
</template>
<style scoped>
.sidebar-enter-from,

30
src/components/Note/NoteToolbar.vue
View File

@@ -12,35 +12,31 @@ const emit = defineEmits<{
<h1 class="flex flex-grow items-center rounded-md text-3xl font-semibold hover:bg-gray-200">
<slot name="title"></slot>
</h1>
<div class="btn-group flex items-center" v-if="!props.note.isRoot">
<Modal>
<UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
<UIModal>
<template #activator="{ open }">
<button class="btn-toolbar btn-sm btn" @click="open">
<i class="fas fa-fw fa-trash" />
</button>
<UIButton size="sm" @click="open"><i class="fas fa-fw fa-trash" /></UIButton>
</template>
<template #title>Delete note</template>
<template #default>Are you sure you want to delete this note?</template>
<template #actions="{ close }">
<button class="btn-primary btn-sm btn" @click="emit('delete', close)">Delete note</button>
<button class="btn-sm btn" @click="close">Cancel</button>
<UIButton size="sm" color="primary" @click="emit('delete', close)">Delete notes</UIButton>
<UIButton size="sm" @click="close">Cancel</UIButton>
</template>
</Modal>
<Modal>
</UIModal>
<UIModal>
<template #activator="{ open }">
<button class="btn-toolbar btn-sm btn" @click="open">
<i class="fas fa-fw fa-sitemap" />
</button>
<UIButton size="sm" @click="open"><i class="fas fa-fw fa-sitemap" /></UIButton>
</template>
<template #title>Set root note</template>
<template #default>Are you sure you want to set this note as root note?</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Cancel</button>
<button class="btn-primary btn-sm btn" @click="emit('setRoot', close)">
<UIButton size="sm" @click="close">Cancel</UIButton>
<UIButton size="sm" color="primary" @click="emit('setRoot', close)">
Set current note as root
</button>
</UIButton>
</template>
</Modal>
</div>
</UIModal>
</UIButtonGroup>
</div>
</template>

27
src/components/TopBar.vue
View File

@@ -19,10 +19,7 @@ const authUI: any = inject('firebaseAuthUI')
const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
</script>
<template>
<div
class="z-[500] flex h-[50px] bg-primary"
:class="searchActive && 'search-active'"
>
<div class="z-[500] flex h-[50px] bg-primary" :class="searchActive && 'search-active'">
<div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
<div
class="search-active-hide flex items-center pl-3"
@@ -41,29 +38,33 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
<template v-if="!loading">
<SearchBar @active="(active) => (searchActive = active)" />
<button
class="search-active-hide btn-outline btn-sm btn py-1 text-white"
<UIButton
size="sm"
variant="outline"
class="search-active-hide py-1 text-white"
@click="addNote('Untitled new note', '', true)"
>
<i class="fas fa-plus-circle text-[1.1rem]" />
</button>
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
</UIButton>
<UIModal v-if="initialized && !user" :open="authModalInitialStateOpen">
<template #activator="{ open }">
<button
class="search-active-hide btn-outline btn-sm btn py-1 text-white"
<UIButton
size="sm"
variant="outline"
class="search-active-hide py-1 text-white"
@click="open"
>
Sign in
</button>
</UIButton>
</template>
<template #title>Sign in</template>
<template #default="{ close }">
<Auth @signedIn="close" />
</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
<UIButton size="sm" @click="close">Close</UIButton>
</template>
</Modal>
</UIModal>
<Settings v-else-if="user" />
</template>
<SkeletonTopBar v-else />

77
src/components/TopBar/Hamburger.vue
View File

@@ -41,80 +41,3 @@ const emit = defineEmits<{
transition-duration: 0.2s;
}
</style>
<!--
$hamburger-layer-color: white;
$hamburger-layer-width: 25px;
$hamburger-layer-height: 3px;
$hamburger-layer-spacing: 3px;
$hamburger-padding-x: 0px;
$hamburger-padding-y: 0px;
$hamburger-scale-speed: calc(200ms / 0.22s);
@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
@if index($hamburger-types, spin-r) {
/*
* Spin Reverse
*/
.hamburger--spin-r {
.hamburger-inner {
transition-duration: ($hamburger-scale-speed * 0.22s);
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
&::before {
transition: top
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.25s)
ease-in,
opacity ($hamburger-scale-speed * 0.1s) ease-in;
}
&::after {
transition: bottom
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.25s)
ease-in,
transform
($hamburger-scale-speed * 0.22s)
cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
}
&.is-active {
.hamburger-inner {
transform: rotate(-225deg);
transition-delay: ($hamburger-scale-speed * 0.12s);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
&::before {
top: 0;
opacity: 0;
transition: top ($hamburger-scale-speed * 0.1s) ease-out,
opacity
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.12s)
ease-out;
}
&::after {
bottom: 0;
transform: rotate(90deg);
transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
transform
($hamburger-scale-speed * 0.22s)
($hamburger-scale-speed * 0.12s)
cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
}
}
}
button.hamburger {
outline: none !important;
line-height: 1;
opacity: 0.9;
border-radius: 2rem;
}
.hamburger-box {
display: block;
}
</style> -->

4
src/components/TopBar/Settings.vue
View File

@@ -45,7 +45,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
{{ sourceLabels[source] }}
</a>
</li>
<Modal>
<UIModal>
<template #activator="{ open }">
<li @click="open" class="text-base">
<a>
@@ -63,7 +63,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
<button class="btn-sm btn" @click="close">Cancel</button>
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
</template>
</Modal>
</UIModal>
</ul>
</div>
</OnClickOutside>

26
src/components/ViewModes/ListView.vue
View File

@@ -41,26 +41,26 @@ const deleteSelectedNotes = (closeModal: () => void) => {
<div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
</template>
</div>
<Modal v-if="countSelectedNotes > 0">
<UIModal v-if="countSelectedNotes > 0">
<template #activator="{ open }">
<button class="btn-toolbar btn-sm btn" @click="open">Delete</button>
<UIButton size="sm" @click="open">Delete</UIButton>
</template>
<template #default>Are you sure you want to delete the selected notes?</template>
<template #actions="{ close }">
<button class="btn-primary btn-sm btn" @click="deleteSelectedNotes(close)">
<UIButton size="sm" color="primary" @click="deleteSelectedNotes(close)">
Delete selected notes
</button>
<button class="btn-sm btn" @click="close">Close</button>
</UIButton>
<UIButton size="sm" @click="close">Close</UIButton>
</template>
</Modal>
<input
type="text"
placeholder="Start typing to filter"
class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
</UIModal>
<UITextInput
size="sm"
v-model="filter"
/>
placeholder="Start typing to filter"
class="my-1 ml-auto mr-1 max-w-xs flex-grow"
></UITextInput>
</div>
<table class="table-compact table w-full">
<UITable density="compact" class="w-full">
<thead>
<tr>
<th class="w-[48px]"></th>
@@ -101,6 +101,6 @@ const deleteSelectedNotes = (closeModal: () => void) => {
<td>{{ formatDate(note.modified) }}</td>
</tr>
</tbody>
</table>
</UITable>
</div>
</template>

2
src/components/ViewModes/Mindmap.vue
View File

@@ -33,6 +33,8 @@ const renderMindmap = () => {
const cy = cytoscape({
container: mindmapCanvas,
elements,
autoungrabify: true,
autounselectify: true,
layout: {
name: 'cose',

23
src/components/ui/UIButton.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
interface Props {
size?: string
variant?: 'regular' | 'outline'
color?: string
}
const props = withDefaults(defineProps<Props>(), {
size: 'md',
variant: 'regular',
color: 'regular'
})
const styleClass = computed(() => {
const sizeClass = `btn-${props.size}`
const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
const colorClass = props.color !== 'regular' ? `btn-${props.color}` : ''
return [sizeClass, variantClass, colorClass]
})
</script>
<template>
<button class="btn" :class="styleClass"><slot></slot></button>
</template>

3
src/components/ui/UIButtonGroup.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div class="btn-group"><slot></slot></div>
</template>

0
src/components/Modal.vue → src/components/ui/UIModal.vue
View File

15
src/components/ui/UITable.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
interface Props {
density?: 'compact'
}
const props = defineProps<Props>()
const styleClass = computed(() => {
const densityClass = props.density ? 'table-compact' : ''
return [densityClass]
})
</script>
<template>
<table class="table" :class="styleClass"><slot></slot></table>
</template>

28
src/components/ui/UITextInput.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
interface Props {
modelValue: any
size?: 'sm' | 'md' | 'lg' | 'xl'
}
const props = withDefaults(defineProps<Props>(), {
size: 'md'
})
const emit = defineEmits<{
'update:modelValue': [value: any]
}>()
const styleClass = computed(() => {
const sizeClass = `input-${props.size}`
return [sizeClass]
})
</script>
<template>
<input
type="text"
:value="props.modelValue"
@input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
:class="styleClass"
/>
</template>