From 8195284d5fd6f3aa7ee2360e1eabfe3a1f363a9f Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Mon, 21 Jun 2021 22:32:29 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20scss=20?= =?UTF-8?q?=E5=8F=98=E9=87=8F=20=E5=92=8C=20mixin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/mixin.scss | 13 +++++++++++++ src/assets/styles/variable.scss | 4 ++++ src/components/ColorPicker/Alpha.vue | 19 ++++--------------- src/components/ColorPicker/Checkboard.vue | 7 ++----- src/components/ColorPicker/Hue.vue | 7 ++----- src/components/ColorPicker/Saturation.vue | 7 ++----- src/components/ColorPicker/index.vue | 7 ++----- src/components/Contextmenu/MenuContent.vue | 4 ++-- src/components/WritingBoard.vue | 6 +----- src/views/Editor/Canvas/GridLines.vue | 7 ++----- src/views/Editor/CanvasTool/ChartPool.vue | 7 ++----- src/views/Editor/CanvasTool/LinePool.vue | 7 ++----- src/views/Editor/CanvasTool/ShapePool.vue | 7 ++----- src/views/Editor/EditorHeader/index.vue | 2 +- src/views/Editor/Remark/index.vue | 7 ++----- .../ChartStylePanel/ChartDataEditor.vue | 10 +++++----- .../ElementStylePanel/TextStylePanel.vue | 2 +- .../Editor/Toolbar/SlideAnimationPanel.vue | 2 +- src/views/Editor/Toolbar/SlideStylePanel.vue | 18 ++++++------------ src/views/Editor/Toolbar/index.vue | 4 ++-- src/views/Screen/SlideThumbnails.vue | 4 ++-- .../components/element/TableElement/index.vue | 9 +++------ 22 files changed, 63 insertions(+), 97 deletions(-) diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index e6b441a2..a90e2dfd 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -25,4 +25,17 @@ &:not(:nth-child(#{$col}n)) { margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1}); } +} + +@mixin overflow-overlay() { + overflow: auto; + overflow: overlay; +} + +@mixin absolute-0 { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } \ No newline at end of file diff --git a/src/assets/styles/variable.scss b/src/assets/styles/variable.scss index 496e6521..2f11866d 100644 --- a/src/assets/styles/variable.scss +++ b/src/assets/styles/variable.scss @@ -5,4 +5,8 @@ $lightGray: #f9f9f9; $boxShadow: 3px 3px 3px rgba(#000, 0.15); +$transitionDelay: .2s; +$transitionDelayFast: .1s; +$transitionDelaySlow: .3s; + $borderRadius: 2px; \ No newline at end of file diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue index 7289fe0b..8da5b320 100644 --- a/src/components/ColorPicker/Alpha.vue +++ b/src/components/ColorPicker/Alpha.vue @@ -88,26 +88,15 @@ export default defineComponent({ \ No newline at end of file diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue index eac96d71..8b77ea93 100644 --- a/src/components/ColorPicker/Hue.vue +++ b/src/components/ColorPicker/Hue.vue @@ -103,12 +103,9 @@ export default defineComponent({ \ No newline at end of file diff --git a/src/views/Editor/CanvasTool/ChartPool.vue b/src/views/Editor/CanvasTool/ChartPool.vue index b7dcd454..78bd6ae2 100644 --- a/src/views/Editor/CanvasTool/ChartPool.vue +++ b/src/views/Editor/CanvasTool/ChartPool.vue @@ -47,11 +47,8 @@ export default defineComponent({ cursor: pointer; } .chart-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + display: flex; justify-content: center; align-items: center; diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue index eeb2a7fb..697bdea8 100644 --- a/src/views/Editor/CanvasTool/LinePool.vue +++ b/src/views/Editor/CanvasTool/LinePool.vue @@ -108,11 +108,8 @@ export default defineComponent({ cursor: pointer; } .line-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + display: flex; justify-content: center; align-items: center; diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue index db778cea..411d8405 100644 --- a/src/views/Editor/CanvasTool/ShapePool.vue +++ b/src/views/Editor/CanvasTool/ShapePool.vue @@ -86,11 +86,8 @@ export default defineComponent({ cursor: pointer; } .shape-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + display: flex; justify-content: center; align-items: center; diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue index 3a4df781..2cb41ed9 100644 --- a/src/views/Editor/EditorHeader/index.vue +++ b/src/views/Editor/EditorHeader/index.vue @@ -142,7 +142,7 @@ export default defineComponent({ align-items: center; font-size: 14px; padding: 0 10px; - transition: background-color .2s; + transition: background-color $transitionDelay; cursor: pointer; .text { diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue index 911514cb..5286ac1c 100644 --- a/src/views/Editor/Remark/index.vue +++ b/src/views/Editor/Remark/index.vue @@ -79,11 +79,6 @@ export default defineComponent({ textarea { width: 100%; height: 100%; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; overflow-y: auto; resize: none; border: 0; @@ -91,6 +86,8 @@ export default defineComponent({ padding: 8px; font-size: 12px; background-color: transparent; + + @include absolute-0(); } } .resize-handler { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue index d083af4e..4ae3820e 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue @@ -217,11 +217,11 @@ export default defineComponent({ .editor-content { width: 100%; height: 360px; - overflow: auto; - overflow: overlay; position: relative; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; + + @include overflow-overlay(); } .range-box { position: absolute; @@ -231,17 +231,17 @@ export default defineComponent({ user-select: none; } .temp-range { + width: 0; + height: 0; position: absolute; top: 0; left: 0; - width: 0; - height: 0; background-color: rgba($color: #888, $alpha: .3); } .range-line { - position: absolute; width: 0; height: 0; + position: absolute; left: 0; top: 0; border: 0 solid $themeColor; diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 2965f368..e74c1009 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -421,7 +421,7 @@ export default defineComponent({ align-items: center; position: relative; cursor: pointer; - transition: all .2s; + transition: all $transitionDelay; &:hover { border-color: $themeColor; diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue index 2dab9a47..cac7c9d9 100644 --- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue +++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue @@ -115,7 +115,7 @@ export default defineComponent({ left: 0; top: 0; background-color: #d9dadb; - animation: $animationType .3s linear; + animation: $animationType $transitionDelaySlow linear; } &.fade:hover { diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 15cbbe4b..fb3de198 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -378,7 +378,7 @@ export default defineComponent({ border: 1px dashed $borderColor; border-radius: $borderRadius; position: relative; - transition: all .2s; + transition: all $transitionDelay; &:hover { border-color: $themeColor; @@ -386,11 +386,8 @@ export default defineComponent({ } .content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + display: flex; justify-content: center; align-items: center; @@ -413,16 +410,13 @@ export default defineComponent({ cursor: pointer; .theme-item-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + display: flex; flex-direction: column; justify-content: center; align-items: center; - transition: box-shadow .2s; + transition: box-shadow $transitionDelay; &:hover { box-shadow: 0 0 4px #888; diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue index 191d1308..099e76fc 100644 --- a/src/views/Editor/Toolbar/index.vue +++ b/src/views/Editor/Toolbar/index.vue @@ -123,7 +123,7 @@ export default defineComponent({ .content { padding: 12px; font-size: 13px; - overflow: auto; - overflow: overlay; + + @include overflow-overlay(); } \ No newline at end of file diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue index 7a0ca1ab..80a40321 100644 --- a/src/views/Screen/SlideThumbnails.vue +++ b/src/views/Screen/SlideThumbnails.vue @@ -79,8 +79,8 @@ export default defineComponent({ display: flex; flex-wrap: wrap; align-content: flex-start; - overflow: auto; - overflow: overlay; + + @include overflow-overlay(); .thumbnail { width: 150px; diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue index f3324388..f4f18852 100644 --- a/src/views/components/element/TableElement/index.vue +++ b/src/views/components/element/TableElement/index.vue @@ -198,13 +198,10 @@ export default defineComponent({ cursor: move; } .table-mask { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include absolute-0(); + opacity: 0; - transition: opacity .2s; + transition: opacity $transitionDelay; .mask-tip { position: absolute;