From e5135f4c74400b521d0b2f8cd6ca73f293083a72 Mon Sep 17 00:00:00 2001 From: chouchou Date: Mon, 25 Sep 2023 15:36:43 +0800 Subject: [PATCH 1/2] feat: add nav bar icon --- src/options/TheEntry.vue | 15 +++++++++++++-- src/options/components/NavItem.vue | 6 ++++++ src/options/images/icon-nav-about-filled.vue | 8 ++++++++ src/options/images/icon-nav-about-outline.vue | 8 ++++++++ src/options/images/icon-nav-extension-filled.vue | 10 ++++++++++ src/options/images/icon-nav-extension-outline.vue | 8 ++++++++ 6 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/options/images/icon-nav-about-filled.vue create mode 100644 src/options/images/icon-nav-about-outline.vue create mode 100644 src/options/images/icon-nav-extension-filled.vue create mode 100644 src/options/images/icon-nav-extension-outline.vue diff --git a/src/options/TheEntry.vue b/src/options/TheEntry.vue index 4dd77b3..cc401ae 100644 --- a/src/options/TheEntry.vue +++ b/src/options/TheEntry.vue @@ -12,12 +12,18 @@ :activated="activatedTab === TabList.Extension" :name="TabList.Extension" @change="onChangeTab" - /> + > + + + + > + + +
@@ -33,6 +39,11 @@ import useStore from '@/stores/store' import IconLogoWithText from './images/icon-logo-with-text.vue' import IconLogoWithTextDark from './images/icon-logo-with-text-dark.vue' +import IconNavExtensionFilled from './images/icon-nav-extension-filled.vue' +import IconNavExtensionOutline from './images/icon-nav-extension-outline.vue' +import IconNavAboutOutline from './images/icon-nav-about-outline.vue' +import IconNavAboutFilled from './images/icon-nav-about-filled.vue' + import NavItem from './components/NavItem.vue' import AccountView from './views/AccountView.vue' import ExtensionView from './views/ExtensionView.vue' diff --git a/src/options/components/NavItem.vue b/src/options/components/NavItem.vue index 93c8a85..ee934fe 100644 --- a/src/options/components/NavItem.vue +++ b/src/options/components/NavItem.vue @@ -59,6 +59,8 @@ const onChange = () => { .icon-outline { display: block; + width: 24px; + height: 24px; } .active-nav { @@ -66,6 +68,8 @@ const onChange = () => { .icon-filled { display: block; + width: 24px; + height: 24px; } .icon-outline { @@ -93,6 +97,8 @@ const onChange = () => { .icon-filled { display: block; + width: 24px; + height: 24px; } .icon-outline { diff --git a/src/options/images/icon-nav-about-filled.vue b/src/options/images/icon-nav-about-filled.vue new file mode 100644 index 0000000..7a43242 --- /dev/null +++ b/src/options/images/icon-nav-about-filled.vue @@ -0,0 +1,8 @@ + diff --git a/src/options/images/icon-nav-about-outline.vue b/src/options/images/icon-nav-about-outline.vue new file mode 100644 index 0000000..95f51cb --- /dev/null +++ b/src/options/images/icon-nav-about-outline.vue @@ -0,0 +1,8 @@ + diff --git a/src/options/images/icon-nav-extension-filled.vue b/src/options/images/icon-nav-extension-filled.vue new file mode 100644 index 0000000..bfd4262 --- /dev/null +++ b/src/options/images/icon-nav-extension-filled.vue @@ -0,0 +1,10 @@ + diff --git a/src/options/images/icon-nav-extension-outline.vue b/src/options/images/icon-nav-extension-outline.vue new file mode 100644 index 0000000..dc8d5c4 --- /dev/null +++ b/src/options/images/icon-nav-extension-outline.vue @@ -0,0 +1,8 @@ + From 51fe96acac17c2337b453898db0a4daf6eada15e Mon Sep 17 00:00:00 2001 From: chouchou Date: Wed, 11 Oct 2023 16:57:41 +0800 Subject: [PATCH 2/2] feat: add narrow window setting ui --- src/options/TheEntry.vue | 46 ++++++++++++++++++- .../components/CreditWebpilotStatus.vue | 32 ++++++++++--- src/options/components/NavItem.vue | 15 ++++++ src/options/views/AboutView.vue | 17 ++++++- 4 files changed, 99 insertions(+), 11 deletions(-) diff --git a/src/options/TheEntry.vue b/src/options/TheEntry.vue index cc401ae..8fa35cb 100644 --- a/src/options/TheEntry.vue +++ b/src/options/TheEntry.vue @@ -1,8 +1,11 @@ @@ -71,6 +73,11 @@ if (usage.value.current === -1) { opacity: 0.7; } +.credit-text-group { + display: flex; + align-items: center; +} + .question-icon { margin-right: 6px; border: 0; @@ -85,4 +92,15 @@ if (usage.value.current === -1) { .credit-text { margin-left: 6px; } + +@media only screen and (width <= 700px) { + .credit-status { + flex-direction: column; + align-items: flex-start; + } + + .credit-text-group { + margin-top: 16px; + } +} diff --git a/src/options/components/NavItem.vue b/src/options/components/NavItem.vue index ee934fe..9587c53 100644 --- a/src/options/components/NavItem.vue +++ b/src/options/components/NavItem.vue @@ -120,4 +120,19 @@ const onChange = () => { background-color: #585c8a; } } + +@media only screen and (width <= 700px) { + .nav-label { + display: none; + } + + .nav-item { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 7px 0; + } +} diff --git a/src/options/views/AboutView.vue b/src/options/views/AboutView.vue index 3e6440b..6be7970 100644 --- a/src/options/views/AboutView.vue +++ b/src/options/views/AboutView.vue @@ -53,6 +53,7 @@ onMounted(() => { .about-view { display: flex; flex-direction: column; + width: 100%; height: 100%; color: var(--color-baseline-text); font-weight: 400; @@ -70,6 +71,7 @@ onMounted(() => { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 12px; + column-gap: max(8px, 2%); } .contributor-card { @@ -163,9 +165,20 @@ onMounted(() => { } } -@media screen and (width <= 800px) { +@media screen and (width <= 700px) { .contributors-wrap { - grid-template-columns: repeat(1, 1fr); + width: 100%; + } + + .contributor-card { + width: 174px; + height: 102px; + padding: 16px; + padding-top: 24px; + } + + .card-avatar { + display: none; } }