From 096d3b7177b0dab6cd99b7ac88f800b8b35a3d92 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Thu, 9 Mar 2023 16:36:49 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(indexbar):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=B4=A2=E5=BC=95=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/index-bar-anchor/index.js | 4 +++ src/index-bar-anchor/index.less | 26 +++++++++++++++++ src/index-bar-anchor/vars.less | 4 +++ src/index-bar/index.js | 6 ++++ src/index-bar/index.less | 52 +++++++++++++++++++++++++++++++++ src/index-bar/vars.less | 6 ++++ 6 files changed, 98 insertions(+) create mode 100644 src/index-bar-anchor/index.js create mode 100644 src/index-bar-anchor/index.less create mode 100644 src/index-bar-anchor/vars.less create mode 100644 src/index-bar/index.js create mode 100644 src/index-bar/index.less create mode 100644 src/index-bar/vars.less diff --git a/src/index-bar-anchor/index.js b/src/index-bar-anchor/index.js new file mode 100644 index 0000000..7d12438 --- /dev/null +++ b/src/index-bar-anchor/index.js @@ -0,0 +1,4 @@ +export default { + "tiny-mobile-index-bar-anchor-bg-color": "#f5f5f5", + "tiny-mobile-index-bar-anchor-text-color": "#999", +}; diff --git a/src/index-bar-anchor/index.less b/src/index-bar-anchor/index.less new file mode 100644 index 0000000..6a6b213 --- /dev/null +++ b/src/index-bar-anchor/index.less @@ -0,0 +1,26 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import './vars.less'; + +@index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar-anchor'; + +.@{index-bar-prefix-cls} { + background: var(--ti-mobile-index-bar-anchor-bg-color); + &-label { + margin-left: 16px; + line-height: 32px; + font-size: 12px; + color: var(--ti-mobile-index-bar-anchor-text-color); + } +} diff --git a/src/index-bar-anchor/vars.less b/src/index-bar-anchor/vars.less new file mode 100644 index 0000000..39881c0 --- /dev/null +++ b/src/index-bar-anchor/vars.less @@ -0,0 +1,4 @@ +:root { + --ti-mobile-index-bar-anchor-bg-color: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5); + --ti-mobile-index-bar-anchor-text-color: var(--ti-mobile-common-color-text-weaken-dark, #999); +} diff --git a/src/index-bar/index.js b/src/index-bar/index.js new file mode 100644 index 0000000..861349e --- /dev/null +++ b/src/index-bar/index.js @@ -0,0 +1,6 @@ +export default { + "tiny-mobile-index-bar-bg-color-active": "#4a79fe", + "tiny-mobile-index-bar-text-color": "#595959", + "tiny-mobile-index-bar-text-color-active": "#fff", + "tiny-mobile-index-bar-side-bg-color": "rgba(80, 227, 194, 0.12)", +}; diff --git a/src/index-bar/index.less b/src/index-bar/index.less new file mode 100644 index 0000000..264b805 --- /dev/null +++ b/src/index-bar/index.less @@ -0,0 +1,52 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../mixins/button.less'; +@import '../custom.less'; +@import './vars.less'; + +@index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar'; + +.@{index-bar-prefix-cls} { + &__side { + position: fixed; + right: 0; + top: 50%; + width: 22px; + padding: 4px 0; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + cursor: pointer; + user-select: none; + transform: translateY(-50%); + z-index: 2; + background: var(--ti-mobile-index-bar-side-bg-color); + + &-label { + width: 100%; + font-size: 10px; + line-height: 16px; + font-weight: 500; + color: var(--ti-mobile-index-bar-text-color); + } + + &-label-active { + width: 16px; + height: 16px; + border-radius: 50%; + color: var(--ti-mobile-index-bar-text-color-active); + background: var(--ti-mobile-index-bar-bg-color-active); + } + } +} diff --git a/src/index-bar/vars.less b/src/index-bar/vars.less new file mode 100644 index 0000000..7b5a1b3 --- /dev/null +++ b/src/index-bar/vars.less @@ -0,0 +1,6 @@ +:root { + --ti-mobile-index-bar-bg-color-active: var(--ti-mobile-common-bg-color-main, #4a79fe); + --ti-mobile-index-bar-text-color: var(--ti-mobile-common-color-text-secondary, #595959); + --ti-mobile-index-bar-text-color-active: var(--ti-mobile-common-color-text-white, #fff); + --ti-mobile-index-bar-side-bg-color: rgba(80, 227, 194, 0.12); +} From 05b2ed8eb283557a5e41357003a84dcc9c932d64 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Fri, 10 Mar 2023 15:26:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(indexbar):=20=E7=B1=BB=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/index-bar-anchor/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index-bar-anchor/index.less b/src/index-bar-anchor/index.less index 6a6b213..6f99b4f 100644 --- a/src/index-bar-anchor/index.less +++ b/src/index-bar-anchor/index.less @@ -17,7 +17,7 @@ .@{index-bar-prefix-cls} { background: var(--ti-mobile-index-bar-anchor-bg-color); - &-label { + &__label { margin-left: 16px; line-height: 32px; font-size: 12px; From ea8d5ea0f126c70e27cb51437e1247f5bc755bf2 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 13 Mar 2023 11:56:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(indexbar):=20=E7=B1=BB=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/index-bar/index.less | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/index-bar/index.less b/src/index-bar/index.less index 264b805..0313866 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -32,21 +32,21 @@ transform: translateY(-50%); z-index: 2; background: var(--ti-mobile-index-bar-side-bg-color); + } - &-label { - width: 100%; - font-size: 10px; - line-height: 16px; - font-weight: 500; - color: var(--ti-mobile-index-bar-text-color); - } + &__label { + width: 100%; + font-size: 10px; + line-height: 16px; + font-weight: 500; + color: var(--ti-mobile-index-bar-text-color); + } - &-label-active { - width: 16px; - height: 16px; - border-radius: 50%; - color: var(--ti-mobile-index-bar-text-color-active); - background: var(--ti-mobile-index-bar-bg-color-active); - } + &__label--active { + width: 16px; + height: 16px; + border-radius: 50%; + color: var(--ti-mobile-index-bar-text-color-active); + background: var(--ti-mobile-index-bar-bg-color-active); } }