From b295adcc1b0adf1e18ecbf93b7ea0f8fb0203337 Mon Sep 17 00:00:00 2001 From: Anatole Date: Thu, 14 Jul 2022 12:36:15 +0200 Subject: [PATCH 1/4] Update layout on emote set selector --- src/components/modal/ModalSelectEmoteSet.vue | 137 +++++++++++-------- src/icons.ts | 2 + 2 files changed, 83 insertions(+), 56 deletions(-) diff --git a/src/components/modal/ModalSelectEmoteSet.vue b/src/components/modal/ModalSelectEmoteSet.vue index 5c23d849..7c1c029e 100644 --- a/src/components/modal/ModalSelectEmoteSet.vue +++ b/src/components/modal/ModalSelectEmoteSet.vue @@ -10,36 +10,27 @@
-
- - {{ set.name }} - {{ notes.get(set.id) }} - - - - -
-
- - - - - - +
+
+ + {{ set.name }} + + + + {{ set.emotes.length }} / {{ set.capacity }} + + + + + + +
+ +
+ +
+
@@ -95,7 +91,6 @@ import ModalBase from "@components/modal/ModalBase.vue"; import UserTag from "@components/utility/UserTag.vue"; import Checkbox from "@components/form/Checkbox.vue"; import TextInput from "@components/form/TextInput.vue"; -import Tooltip from "@components/utility/Tooltip.vue"; import ModalCreateEmoteSetVue from "@components/modal/ModalCreateEmoteSet.vue"; const { t } = useI18n(); @@ -246,53 +241,83 @@ const onRename = () => { max-height: 26em; display: flex; flex-direction: column; - width: 100%; > .card { - cursor: pointer; display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row; + cursor: pointer; margin-top: 0.25em; margin-bottom: 0.25em; - padding-top: 0.5em; - padding-bottom: 0.5em; border-radius: 0.3em; - width: 100%; - height: 4em; + @include themify() { - background-color: darken(themed("backgroundColor"), 4); + > div[selector="card-details"] { + background-color: darken(themed("backgroundColor"), 4); - &[selected="true"] { - background-color: mix(themed("backgroundColor"), themed("primary"), 85%); - } - &[error] { - background-color: transparentize(themed("warning"), 0.785); + &[selected="true"] { + background-color: mix(themed("backgroundColor"), themed("primary"), 85%); + } + &[error] { + background-color: transparentize(themed("warning"), 0.785); + } + &[error="UPDATING"] { + background-color: darken(themed("backgroundColor"), 8); + } + + > div > span[selector="set-name"] > span[selector="label-list"] { + > span[label] { + background-color: themed("backgroundColor"); + } + > span.full[label="capacity"] { + background-color: themed("warning"); + } + } } - &[error="UPDATING"] { - background-color: darken(themed("backgroundColor"), 8); + > div[selector="card-actions"] { + display: flex; + align-items: center; + justify-content: center; + background-color: darken(themed("backgroundColor"), 4); } } - > :nth-child(1) { + > [selector="card-details"] { display: flex; - flex-direction: column; - margin-left: 0.5em; - > [selector="set-name"] { - padding-bottom: 0.25em; - - > [selector="errored"] { - border-radius: 0.25em; - padding: 0.15em; - background-color: rgb(200, 60, 60); + flex-direction: row; + flex-grow: 1; + align-items: center; + justify-content: space-between; + padding: 0.5em; + + > div { + display: flex; + flex-direction: column; + + > span[selector="set-name"] { + font-size: 0.85em; + + > span[selector="label-list"] { + margin-left: 0.5em; + + > span[label] { + padding: 0.25em; + border-radius: 0.35em; + } + } + } + > [selector="set-owner"] { + margin-top: 0.5em; + margin-left: 0.15em; } } + + > span[selector="card-check"] { + margin-right: 0.25em; + } } - > :nth-child(2) { - display: flex; - align-items: center; + > [selector="card-actions"] { + margin-left: 0.25em; margin-right: 0.5em; + width: 3.5em; > [selector="check"] { pointer-events: none; diff --git a/src/icons.ts b/src/icons.ts index eac6a2a8..6090e309 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -49,6 +49,7 @@ import { faEyeSlash, faTag, faLanguage, + faChevronDown, } from "@fortawesome/pro-regular-svg-icons"; library.add( @@ -100,4 +101,5 @@ library.add( faEyeSlash, faTag, faLanguage, + faChevronDown, ); From 8e04253b9e524299052dea98324f49112627d31a Mon Sep 17 00:00:00 2001 From: Anatole Date: Fri, 15 Jul 2022 04:41:30 +0200 Subject: [PATCH 2/4] use locales on emote preview area --- locale/en_US.ts | 4 ++++ src/views/EmotePage/EmotePage.vue | 8 ++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/locale/en_US.ts b/locale/en_US.ts index 8de828f6..672196ed 100644 --- a/locale/en_US.ts +++ b/locale/en_US.ts @@ -15,6 +15,7 @@ export default { update: "Update", report: "Report", activity: "Activity", + loading: "Loading", object: { user: "User", emote_set: "Emote Set", @@ -87,6 +88,9 @@ export default { author: "Added by", created_at: "Created", versions: "Versions", + preview_loading: "Loading previews... {'('}{0}{'/'}{1}{')'}", + preview_failed: "Failed to load previews", + processing: "Processing Emote - this may take some time.", use: "Use Emote", switch_version: "Switch to this version", in_n_sets: "in {0} set | in {0} sets", diff --git a/src/views/EmotePage/EmotePage.vue b/src/views/EmotePage/EmotePage.vue index 2383b067..c9b708de 100644 --- a/src/views/EmotePage/EmotePage.vue +++ b/src/views/EmotePage/EmotePage.vue @@ -48,13 +48,13 @@
- Processing Emote - this may take some time. + {{ t("emote.processing") }}
- Loading previews... ({{ preview.count + 1 }}/{{ preview.images?.size }}) + {{ t("emote.preview_loading", [preview.count + 1, preview.images?.size]) }}
- Failed to load preview + {{ t("emote.preview_failed") }}
@@ -124,7 +124,7 @@ - + @@ -72,6 +73,7 @@ const theme = computed(() => { const showWAYTOODANK = ref(false); const contextMenu = reactive({ shown: false, + interact: "", component: null as Component | null, props: {} as Record, x: 0, @@ -244,13 +246,22 @@ watch(locale, updateLocale); updateLocale(locale.value, "en_US"); // Provide right click context utility -provide("ContextMenu", (ev: MouseEvent, component: Component, props: Record) => { +provide("ContextMenu", (ev: MouseEvent, component: Component, props: Record): Promise => { ev.preventDefault(); + ev.stopPropagation(); contextMenu.x = ev.clientX; contextMenu.y = ev.clientY; contextMenu.shown = true; contextMenu.component = shallowRef(component); contextMenu.props = props; + + return new Promise((resolve) => { + watch(contextMenu, (v) => { + if (v.interact !== "") { + resolve(v.interact); + } + }); + }); }); // WIP Notice diff --git a/src/components/form/TextInput.vue b/src/components/form/TextInput.vue index a75a0736..82bb2985 100644 --- a/src/components/form/TextInput.vue +++ b/src/components/form/TextInput.vue @@ -1,6 +1,12 @@