From 2a1a23c395ae726a6ae87b239a87981911a24924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?= =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= Date: Thu, 19 Sep 2024 16:30:08 +0500 Subject: [PATCH] finished with paragraph settings and refactor --- src/app/assets/main.css | 31 +++ src/app/components.d.ts | 3 + src/app/helpers/index.ts | 45 ++++ src/app/interfaces/environment.ts | 5 +- .../entities/settings/ParagraphSettings.vue | 207 ++++++++++++++++++ .../entities/settings/TextSettings.vue | 82 ------- src/modules/entities/EntityItem.vue | 2 +- .../{TextItem.vue => ParagraphItem.vue} | 7 +- src/output.css | 134 ++++++------ src/pages/authorization/signUp.vue | 6 +- src/shared/icons/SaveIcon.vue | 35 +++ src/shared/ui/Button.vue | 27 +-- src/shared/ui/Drawer.vue | 1 - src/shared/ui/Modal.vue | 4 +- src/shared/ui/Slider.vue | 25 ++- src/shared/ui/ToggleSwitch.vue | 26 ++- src/shared/ui/Tree.vue | 2 - 17 files changed, 455 insertions(+), 187 deletions(-) create mode 100644 src/components/entities/settings/ParagraphSettings.vue delete mode 100644 src/components/entities/settings/TextSettings.vue rename src/modules/entities/{TextItem.vue => ParagraphItem.vue} (93%) create mode 100644 src/shared/icons/SaveIcon.vue diff --git a/src/app/assets/main.css b/src/app/assets/main.css index 700c0c5..b478535 100644 --- a/src/app/assets/main.css +++ b/src/app/assets/main.css @@ -35,6 +35,15 @@ --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12; + --amber-100: #fef3c7; + --amber-200: #fde68a; + --amber-300: #fcd34d; + --amber-400: #fbbf24; + --amber-500: #f59e0b; + --amber-600: #d97706; + --amber-700: #b45309; + --amber-800: #92400e; + --amber-900: #78350f; --yellow-100: #fef9c3; --yellow-200: #fef08a; --yellow-300: #fde047; @@ -283,3 +292,25 @@ input[type=file]::-webkit-file-upload-button { transform: scale(1); } } +.v-enter-active, +.v-leave-active { + transition: all 0.5s ease; +} +.fading-enter-active, +.fading-leave-active { + transition: opacity 0.3s ease-in-out; +} +.fading-enter-active { + animation: fading-in 0.5s; +} +.fading-leave-active { + animation: fading-in 0.5s reverse; +} +@keyframes fading-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/app/components.d.ts b/src/app/components.d.ts index 7e47a2d..1ab8f72 100644 --- a/src/app/components.d.ts +++ b/src/app/components.d.ts @@ -46,9 +46,12 @@ declare module 'vue' { PageHeader: typeof import('./../modules/PageHeader.vue')['default'] PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default'] ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default'] + ParagraphItem: typeof import('./../modules/entities/ParagraphItem.vue')['default'] + ParagraphSettings: typeof import('./../components/entities/settings/ParagraphSettings.vue')['default'] PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SaveIcon: typeof import('./../shared/icons/SaveIcon.vue')['default'] SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default'] SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default'] SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default'] diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts index 4c49b39..ecfbbd7 100644 --- a/src/app/helpers/index.ts +++ b/src/app/helpers/index.ts @@ -100,6 +100,8 @@ export const convertThemeToColorWhiteDefault = (theme: string | undefined) => { return '#22c55e'; case 'yellow': return '#eab308'; + case 'amber': + return '#f59e0b'; case 'orange': return '#f97316'; case 'pink': @@ -120,6 +122,47 @@ export const convertThemeToColorWhiteDefault = (theme: string | undefined) => { return '#ffffff'; }; +export const convert800ThemeToColorGrayDefault = (theme: string | undefined) => { + if (!theme) return '#9294a1'; + switch (theme) { + case 'white': + return '#ffffff'; + case 'slate': + return '#1e293b'; + case 'blue': + return '#1e40af'; + case 'sky': + return '#075985'; + case 'teal': + return '#115e59'; + case 'lime': + return '#3f6212'; + case 'green': + return '#166534'; + case 'yellow': + return '#854d0e'; + case 'amber': + return '#92400e'; + case 'orange': + return '#9a3412'; + case 'pink': + return '#9d174d'; + case 'fuchsia': + return '#86198f'; + case 'purple': + return '#6b21a8'; + case 'indigo': + return '#3730a3'; + case 'rose': + return '#9f1239'; + case 'red': + return '#991b1b'; + case 'black': + return '#000000'; + } + return '#9294a1'; +}; + export const convertThemeToColorBlackDefault = (theme: string | undefined) => { if (!theme) return '#000000'; switch (theme) { @@ -139,6 +182,8 @@ export const convertThemeToColorBlackDefault = (theme: string | undefined) => { return '#22c55e'; case 'yellow': return '#eab308'; + case 'amber': + return '#f59e0b'; case 'orange': return '#f97316'; case 'pink': diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts index f468b7f..ca52344 100644 --- a/src/app/interfaces/environment.ts +++ b/src/app/interfaces/environment.ts @@ -38,12 +38,10 @@ export interface IEntity { } export type TTheme = - | 'white' | 'slate' | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -52,5 +50,4 @@ export type TTheme = | 'purple' | 'indigo' | 'rose' - | 'red' - | 'black'; + | 'red'; diff --git a/src/components/entities/settings/ParagraphSettings.vue b/src/components/entities/settings/ParagraphSettings.vue new file mode 100644 index 0000000..0849e8d --- /dev/null +++ b/src/components/entities/settings/ParagraphSettings.vue @@ -0,0 +1,207 @@ + + + + + diff --git a/src/components/entities/settings/TextSettings.vue b/src/components/entities/settings/TextSettings.vue deleted file mode 100644 index 9984511..0000000 --- a/src/components/entities/settings/TextSettings.vue +++ /dev/null @@ -1,82 +0,0 @@ - - - - - diff --git a/src/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue index efbe165..bf82602 100644 --- a/src/modules/entities/EntityItem.vue +++ b/src/modules/entities/EntityItem.vue @@ -18,7 +18,7 @@ const entity = useVModel(props, 'entity', emit); :entityData="entity as IDivider" :isEditMode="isEditMode" /> - { const editText = () => { editEntity({ ...entityData.value, text: entityData.value.text }); }; - +const saveChanges = (newState: IParagraph) => { + editEntity(newState); + entityData.value = newState; +}; const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' }); @@ -72,7 +75,7 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' @input="triggerResize" /> - + { }; const colors = [ - 'white', 'slate', 'blue', 'sky', @@ -39,6 +38,7 @@ const colors = [ 'lime', 'green', 'yellow', + 'amber', 'orange', 'pink', 'fuchsia', @@ -132,9 +132,9 @@ const colors = [
  • +interface Props { + color?: string; + size?: string | number; +} +defineProps(); + + + + + diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue index 03f1c15..e5be3f0 100644 --- a/src/shared/ui/Button.vue +++ b/src/shared/ui/Button.vue @@ -12,7 +12,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -30,7 +29,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -47,7 +45,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -103,26 +100,26 @@ const buttonPadding = computed(() => { > {{ label ?? 'Button' }} - - {{ label ?? 'Button' }} + + @@ -131,7 +128,7 @@ const buttonPadding = computed(() => { position: relative; border-radius: 5px; display: flex; - gap: 5px; + gap: 8px; align-items: center; user-select: none; } @@ -156,8 +153,8 @@ const buttonPadding = computed(() => { .flex-column { flex-direction: column; } -.order-2 { - order: 2; +.order-1 { + order: 1; } .bold { font-weight: bold; diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue index 0bdb3c6..14effc4 100644 --- a/src/shared/ui/Drawer.vue +++ b/src/shared/ui/Drawer.vue @@ -11,7 +11,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue index 46d74a3..71618bc 100644 --- a/src/shared/ui/Modal.vue +++ b/src/shared/ui/Modal.vue @@ -11,7 +11,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -22,6 +21,7 @@ interface Props { | 'rose' | 'red' | 'black'; + width?: number | string; } const props = defineProps(); const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme)); @@ -45,7 +45,7 @@ const isVisible = useVModel(props, 'isVisible', emit); ]" >
    convertThemeToColorBlackDefault(props.bac class="marksList" :style="`width: ${width ?? 200}px; margin-bottom: 5px; font-size: 10px`" > -
  • |
    • +
  • |
    • import { useVModel } from '@vueuse/core'; import { computed } from 'vue'; -import { convertThemeToColorBlackDefault } from '@/app/helpers'; +import { + convert800ThemeToColorGrayDefault, + convertThemeToColorBlackDefault, + convertThemeToColorGrayDefault +} from '@/app/helpers'; interface Props { isActive: boolean; @@ -12,7 +16,22 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' + | 'green' + | 'yellow' + | 'orange' + | 'pink' + | 'fuchsia' + | 'purple' + | 'indigo' + | 'rose' + | 'red' + | 'black'; + negativeTheme?: + | 'white' + | 'slate' + | 'blue' + | 'sky' + | 'teal' | 'green' | 'yellow' | 'orange' @@ -29,6 +48,7 @@ const emit = defineEmits(['update:isActive']); const isActive = useVModel(props, 'isActive', emit); const themeColor = computed(() => convertThemeToColorBlackDefault(props.theme)); +const inactiveColor = computed(() => convert800ThemeToColorGrayDefault(props.negativeTheme)); const sizes = computed(() => { if (!props?.size) { return { @@ -117,7 +137,7 @@ const sizes = computed(() => { transition: background-color 0.2s ease-in-out; } .inactiveBackground { - background-color: rgba(187, 197, 204, 0.66) !important; + background-color: v-bind(inactiveColor) !important; transition: background-color 0.2s ease-in-out; } .switcher:hover .inactiveBackground { diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue index 628adb1..2b6c90c 100644 --- a/src/shared/ui/Tree.vue +++ b/src/shared/ui/Tree.vue @@ -26,7 +26,6 @@ interface Props { | 'blue' | 'sky' | 'teal' - | 'lime' | 'green' | 'yellow' | 'orange' @@ -61,7 +60,6 @@ const setInitialState = () => { isOpen: props?.expand ?? false, text: child.text }); - console.log('child', child); if (child.children) { for (let grandChild of child.children) { state.value.push({ -- GitLab