From 325a96ddf79ea2f99bd06326545dc97e38dbc530 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 12 Oct 2019 00:31:45 +0800 Subject: [PATCH] feat(collapse): light theme --- packages/common/Checkbox/src/main.vue | 21 +--- packages/common/Collapse/src/CollapseItem.vue | 31 ++++-- packages/common/Collapse/src/main.vue | 56 ++++------ packages/mixins/registerable.js | 35 ++++++ styles/Collapse.scss | 102 ++++++++++-------- styles/NimbusServiceLayout.scss | 13 +-- styles/themes/vars.scss | 4 +- 7 files changed, 153 insertions(+), 109 deletions(-) create mode 100644 packages/mixins/registerable.js diff --git a/packages/common/Checkbox/src/main.vue b/packages/common/Checkbox/src/main.vue index dea7598a4..3d4f738c3 100644 --- a/packages/common/Checkbox/src/main.vue +++ b/packages/common/Checkbox/src/main.vue @@ -38,6 +38,7 @@ import themeable from '../../../mixins/themeable' import hollowoutable from '../../../mixins/hollowoutable' import CheckMark from './CheckMark' import LineMark from './LineMark' +import registerable from '../../../mixins/registerable' export default { name: 'NCheckbox', @@ -53,7 +54,8 @@ export default { mixins: [ withapp, themeable, - hollowoutable + hollowoutable, + registerable('NCheckboxGroup', 'collectedCheckboxValues') ], model: { prop: 'checked', @@ -89,23 +91,6 @@ export default { } } }, - watch: { - value (value, oldValue) { - if (this.NCheckboxGroup) { - this.registerValue(value, oldValue) - } - } - }, - created () { - if (this.NCheckboxGroup) { - this.registerValue(this.value) - } - }, - beforeDestroy () { - if (this.NCheckboxGroup) { - this.registerValue(undefined, this.value) - } - }, methods: { registerValue (value = undefined, oldValue = undefined) { if (this.NCheckboxGroup) { diff --git a/packages/common/Collapse/src/CollapseItem.vue b/packages/common/Collapse/src/CollapseItem.vue index 4910d6a49..745fa90d9 100644 --- a/packages/common/Collapse/src/CollapseItem.vue +++ b/packages/common/Collapse/src/CollapseItem.vue @@ -2,12 +2,15 @@
{{ title }}
@@ -18,7 +21,7 @@ @leave="handleLeave" >
@@ -35,12 +38,19 @@ diff --git a/packages/mixins/registerable.js b/packages/mixins/registerable.js new file mode 100644 index 000000000..a7ed1a0dd --- /dev/null +++ b/packages/mixins/registerable.js @@ -0,0 +1,35 @@ +export default function ( + inject, + collectionProperty, + registerProperty = 'value' +) { + return { + watch: { + [registerProperty]: function (value, oldValue) { + if (this[inject]) { + this.registerValue(value, oldValue) + } + } + }, + created () { + if (this[inject]) { + this.registerValue(this[registerProperty]) + } + }, + beforeDestroy () { + if (this[inject]) { + this.registerValue(undefined, this[registerProperty]) + } + }, + methods: { + registerValue (value = undefined, oldValue = undefined) { + if (this[inject]) { + const values = new Set(this[inject][collectionProperty]) + if (oldValue !== undefined) values.delete(oldValue) + if (value !== undefined) values.add(value) + this[inject][collectionProperty] = Array.from(values) + } + } + } + } +} diff --git a/styles/Collapse.scss b/styles/Collapse.scss index 7e35d6482..c36ca6191 100644 --- a/styles/Collapse.scss +++ b/styles/Collapse.scss @@ -5,48 +5,66 @@ width: 100%; } -@include b(collapse-item) { - overflow: hidden; - font-size: 14px; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding-top: 16px; - &:first-child { - padding-top: 0px; - } - &:last-child { - border-bottom: none; - } - @include b(collapse-item) { - margin-left: 18px; - } - &.n-collapse-item--active { - .n-collapse-item__title { - .n-icon { - transform: rotate(90deg); +@include themes-mixin { + @include b(collapse) { + @include b(collapse-item) { + @include once { + overflow: hidden; + font-size: 14px; + transition: border-color .3s $default-cubic-bezier; + margin-top: 16px; + &:first-child { + margin-top: 0px; + } + &:first-child > { + @include e(title) { + padding-top: 0px; + } + } + @include b(collapse-item) { + margin-left: 32px; + } + @include e(content-wrapper) { + @include fade-in-height-expand-transition($duration: .15s); + overflow: hidden; + } + @include m(active) { + @include e(title) { + @include m(active) { + @include b(icon) { + transform: rotate(90deg); + } + } + } + } + } + &:not(:first-child) { + border-top: 1px solid $--n-border-color; + } + @include e(title) { + @include once { + transition: color .3s $default-cubic-bezier; + position: relative; + cursor: pointer; + margin-left: 18px; + padding: 16px 0 0 0; + @include b(icon) { + transition: transform .15s $default-cubic-bezier; + font-size: 16px; + position: absolute; + left: -18px; + bottom: 0px; + } + } + color: $--n-text-color; + } + @include e(content-inner) { + @include once { + transition: color .3s $default-cubic-bezier; + padding-top: 16px; + } + color: $--n-secondary-text-color; } } } - .n-collapse-item__title { - position: relative; - cursor: pointer; - .n-icon { - transition: transform .3s $default-cubic-bezier; - font-size: 16px; - position: absolute; - left: -18px; - bottom: 0; - } - color: rgba(233, 233, 236, 1); - margin-left: 18px; - margin-bottom: 16px; - } - .n-collapse-item__content-wrapper { - @include fade-in-height-expand-transition($duration: .15s); - overflow: hidden; - // transition: max-height .3s $default-cubic-bezier; - } - .n-collapse-item__content-inner { - color: rgba(233, 233, 236, .7); - padding-bottom: 16px; - } -} \ No newline at end of file +} diff --git a/styles/NimbusServiceLayout.scss b/styles/NimbusServiceLayout.scss index a863fca1b..734a369b5 100644 --- a/styles/NimbusServiceLayout.scss +++ b/styles/NimbusServiceLayout.scss @@ -154,9 +154,6 @@ $layout-nav-height: 64px; } } @include m(is-group-header) { - // span { - // transition: color 0.3s $default-cubic-bezier; - // } &::after { // down arrow content: ''; height: 6px; @@ -170,11 +167,11 @@ $layout-nav-height: 64px; transform-origin: 25% 25%; transition: transform 0.3s $default-cubic-bezier, opacity 0.3s $default-cubic-bezier; } - @include m(group-item-is-choosed) { - span { - color: #63E2B7; - } - } + // @include m(group-item-is-choosed) { + // span { + // color: #63E2B7; + // } + // } @include m(collapsed) { &::after { transform: rotate(225deg) ; diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss index 3fc7ed8a3..0092b5136 100644 --- a/styles/themes/vars.scss +++ b/styles/themes/vars.scss @@ -361,11 +361,11 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1); } &.#{$namespace}-#{$block}-leave-active { overflow: hidden; - transition: max-height $duration $default-cubic-bezier, opacity $duration $slow-out-cubic-bezier; + transition: max-height $duration $default-cubic-bezier, opacity $duration $fast-in-cubic-bezier; } &.#{$namespace}-#{$block}-enter-active { overflow: hidden; - transition: max-height $duration $default-cubic-bezier, opacity $duration $fast-in-cubic-bezier; + transition: max-height $duration $default-cubic-bezier, opacity $duration $slow-out-cubic-bezier; } }