mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(holloutable): use inline css

Browse Source
This commit is contained in:
07akioni 2019-11-28 14:42:11 +08:00
parent d1d05b7c84
commit 3ef604a31a
14 changed files with 78 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/base/Loading/src/main.vue
View File

@ -9,7 +9,8 @@
>
<circle
:style="{
strokeWidth
strokeWidth,
stroke
}"
class="n-base-loading-circular-path"
cx="50"
@ -32,6 +33,10 @@ export default {
strokeWidth: {
type: Number,
default: null
},
stroke: {
type: String,
default: null
}
},
mounted () {

22
packages/common/Button/src/main.vue
View File

@ -31,16 +31,14 @@
>
<n-spin
v-if="loading"
:class="{
'simulate-hollow-out-stroke': simulateHollowOut
}"
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
:size="null"
:stroke-width="4"
/>
<n-icon
v-else
:class="{
'simulate-hollow-out-fill': simulateHollowOut
:style="{
fill: simulateHollowOut ? ascendantBackgroundColor : null
}"
class="n-icon-slot"
>
@ -53,10 +51,9 @@
<div
v-if="!circle && $slots.default"
class="n-button__content"
:class="{
'simulate-hollow-out-text': simulateHollowOut
:style="{
color: simulateHollowOut ? ascendantBackgroundColor : null
}"
:style="style"
>
<slot />
</div>
@ -77,16 +74,14 @@
>
<n-spin
v-if="loading"
:class="{
'simulate-hollow-out-stroke': simulateHollowOut
}"
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
:stroke-width="4"
/>
<n-icon
v-else
class="n-icon-slot"
:class="{
'simulate-hollow-out-fill': simulateHollowOut
:style="{
fill: simulateHollowOut ? ascendantBackgroundColor : null
}"
>
<slot
@ -172,7 +167,6 @@ export default {
},
data () {
return {
style: {},
enterPressed: false,
rippling: false,
rippleTimer: null

9
packages/common/Radio/src/RadioButton.vue
View File

@ -3,8 +3,7 @@
class="n-radio-button"
:class="{
'n-radio-button--disabled': disabled,
'n-radio-button--checked': checked,
'simulate-hollow-out-text': shouldSimulateHollowOutText
'n-radio-button--checked': checked
}"
:tabindex="disabled ? -1 : 0"
@keyup.enter="handleKeyUpEnter"
@ -42,9 +41,9 @@ export default {
}
},
computed: {
shouldSimulateHollowOutText () {
return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
},
// shouldSimulateHollowOutText () {
// return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
// },
checked () {
if (this.NRadioGroup) {
return this.NRadioGroup.value === this.value

13
packages/common/Slider/src/main.vue
View File

@ -23,14 +23,17 @@
<div
v-for="mark in computedMarks"
:key="mark.label"
class="n-slider-dot simulate-hollow-out-background"
:style="mark.style"
class="n-slider-dot"
:style="{
backgroundColor: ascendantBackgroundColor,
...mark.style
}"
/>
</div>
</div>
<div
ref="firstHandle"
class="n-slider-handle simulate-hollow-out-background"
class="n-slider-handle"
tabindex="0"
:style="firstHandleStyle"
@mousedown="handleFirstHandleMouseDown"
@ -40,7 +43,7 @@
<div
v-if="range"
ref="secondHandle"
class="n-slider-handle simulate-hollow-out-background"
class="n-slider-handle"
tabindex="0"
:style="secondHandleStyle"
@mousedown="handleSecondHandleMouseDown"
@ -221,12 +224,14 @@ export default {
},
firstHandleStyle () {
return {
backgroundColor: this.ascendantBackgroundColor,
left: ((this.firstHandleValue - this.min) / (this.max - this.min) * 100) + '%',
zIndex: this.firstHandleActive ? 1 : 0
}
},
secondHandleStyle () {
return {
backgroundColor: this.ascendantBackgroundColor,
left: ((this.secondHandleValue - this.min) / (this.max - this.min) * 100) + '%',
zIndex: this.secondHandleActive ? 1 : 0
}

10
packages/common/Spin/src/main.vue
View File

@ -5,12 +5,13 @@
>
<transition name="n-spin--transition">
<n-base-loading
v-if="spinning"
:class="{
[`n-spin--${size}-size`]: true
}"
:stroke="stroke"
:stroke-width="strokeWidth"
:theme="synthesizedTheme"
v-if="spinning"
class="n-spin"
/>
</transition>
@ -24,12 +25,13 @@
</div>
</div>
<n-base-loading
v-else
:class="{
[`n-spin--${size}-size`]: size
}"
:stroke="stroke"
:stroke-width="strokeWidth"
:theme="synthesizedTheme"
v-else
class="n-spin"
/>
</template>
@ -46,6 +48,10 @@ export default {
},
mixins: [withapp, themeable],
props: {
stroke: {
type: String,
default: null
},
size: {
type: [String, Number],
default: 'medium'

20
packages/common/Steps/src/Step.vue
View File

@ -13,20 +13,22 @@
>
<n-icon
v-if="synthesizedStatus === 'finish'"
type="md-checkmark"
/>
>
<md-checkmark />
</n-icon>
<n-icon
v-else-if="synthesizedStatus === 'error'"
type="md-close"
/>
>
<md-close />
</n-icon>
</div>
</transition>
<transition name="n-step-indicator--transition">
<div
v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
class="n-step-indicator__index"
:class="{
'simulate-hollow-out-text': synthesizedStatus === 'process'
:style="{
color: synthesizedStatus === 'process' ? ascendantBackgroundColor : null
}"
>
{{ index }}
@ -53,6 +55,8 @@
<script>
import NIcon from '../../Icon'
import hollowoutable from '../../../mixins/hollowoutable'
import mdClose from '../../../icons/md-close'
import mdCheckmark from '../../../icons/md-checkmark'
export default {
name: 'NStep',
@ -62,7 +66,9 @@ export default {
}
},
components: {
NIcon
NIcon,
mdCheckmark,
mdClose
},
mixins: [hollowoutable],
props: {

7
packages/common/Timeline/src/TimelineItem.vue
View File

@ -7,7 +7,12 @@
>
<div class="n-timeline-item-timeline">
<div class="n-timeline-item-timeline__line" />
<div class="n-timeline-item-timeline__circle simulate-hollow-out-background" />
<div
class="n-timeline-item-timeline__circle"
:style="{
backgroundColor: ascendantBackgroundColor
}"
/>
</div>
<div class="n-timeline-item-content">
<div

15
packages/mixins/hollowoutable.js
View File

@ -1,4 +1,4 @@
import HollowOutStyleManager from '../utils/HollowOutStyleManager'
// import HollowOutStyleManager from '../utils/HollowOutStyleManager'
export default {
watch: {
@ -11,8 +11,7 @@ export default {
},
data () {
return {
ascendantBackgroundColor: null,
CSSNode: null
ascendantBackgroundColor: null
}
},
methods: {
@ -38,17 +37,17 @@ export default {
break
}
}
HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
// HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
}
},
mounted () {
this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
// this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
// this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
if (this.avoidHollowOut) return
this.updateHollowOutStyle()
},
beforeDestroy () {
const id = this.hollowOutBackgroundColorId
HollowOutStyleManager.unregisterComponent(id, 1000)
// const id = this.hollowOutBackgroundColorId
// HollowOutStyleManager.unregisterComponent(id, 1000)
}
}

51
packages/utils/HollowOutStyleManager.js
View File

@ -1,51 +0,0 @@
class HollowOutStyleManager {
constructor () {
this.idStyleMap = new Map()
this.CSSNode = document.createElement('style')
this.CSSNode.type = 'text/css'
}
styleForComponent (id, backgroundColor) {
if (!backgroundColor) return ''
return `[n-hollowoutable-id=${id}] .simulate-hollow-out-text {
color: ${backgroundColor}!important;
}
[n-hollowoutable-id=${id}] .simulate-hollow-out-background {
background-color: ${backgroundColor}!important;
}
[n-hollowoutable-id=${id}] .simulate-hollow-out-stroke circle {
stroke: ${backgroundColor}!important;
}
[n-hollowoutable-id=${id}] .simulate-hollow-out-fill path {
fill: ${backgroundColor}!important;
}
`
}
get styleLiteral () {
let style = ''
this.idStyleMap.forEach((value) => {
style += value
})
// console.log('styleLiteral', style)
return style
}
updateCSSNode () {
this.CSSNode.innerHTML = this.styleLiteral
const headEl = document.querySelector('head')
if (!headEl.contains(this.CSSNode)) {
headEl.appendChild(this.CSSNode)
}
}
registerComponent (id, backgroundColor) {
// console.log('registerComponent', id, backgroundColor)
this.idStyleMap.set(id, this.styleForComponent(id, backgroundColor))
this.updateCSSNode()
}
unregisterComponent (id, delay) {
this.idStyleMap.delete(id)
window.setTimeout(() => {
this.updateCSSNode()
}, delay)
}
}
export default new HollowOutStyleManager()

4
styles/Radio.scss
View File

@ -141,7 +141,7 @@
cursor: pointer;
&:hover {
@include e(border-mask) {
box-shadow: inset 0 0 0 $--radio-border-mask-width map-get($--radio-button-border-color, 'hover');
box-shadow: map-get($--radio-button-box-shadow, 'hover');
transition: box-shadow .3s $default-cubic-bezier;
}
@include not-m(checked) {
@ -150,7 +150,7 @@
}
&:focus:not(:active) {
@include e(border-mask) {
box-shadow: inset 0 0 0 1px map-get($--radio-button-label-color, 'active'), 0 0 0 2px change-color(map-get($--radio-button-label-color, 'active'), $alpha: .3);
box-shadow: map-get($--radio-button-box-shadow, 'focus')
}
}
}

2
styles/Slider.scss
View File

@ -101,7 +101,7 @@
top: 50%;
right: 0;
@include b(slider-dot) {
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
position: absolute;
transform: translateX(-50%) translateY(-50%);
height: $--slider-dot-size;

7
styles/Steps.scss
View File

@ -17,9 +17,12 @@
@include b(step-indicator) {
background-color: map-get($--steps-step-background-color, $status);
box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
@include e(icon, index) {
@include e(index) {
color: map-get($--steps-step-indicator-color, $status);
}
@include e(icon) {
fill: map-get($--steps-step-indicator-color, $status);
}
}
}
}
@ -95,7 +98,7 @@
@include e(icon) {
@include fade-in-transition-ease-in-out(step-indicator, .3s);
transition: color .3s $default-cubic-bezier;
color: rgba(255,255,255,0.3);
fill: rgba(255,255,255,0.3);
width: 16px;
height: 16px;
font-size: 16px;

6
styles/themes/dark/components/Radio.scss
View File

@ -22,9 +22,13 @@
) !global;
$--radio-button-label-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color,
'active': black,
'hover': $--n-primary-color
) !global;
$--radio-disabled-opacity: .4 !global;
$--radio-border-mask-width: 1px !global;
$--radio-button-box-shadow: (
'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
) !global;
}

4
styles/themes/light/components/Radio.scss
View File

@ -27,4 +27,8 @@
) !global;
$--radio-disabled-opacity: .4 !global;
$--radio-border-mask-width: 0px !global;
$--radio-button-box-shadow: (
'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
) !global;
}