From a7533dfbf2f55072116b45c7f4312b4f07670603 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 21 Dec 2019 21:31:48 +0800 Subject: [PATCH] refactor(typography) --- .../components/typography/enUS/header.md | 31 ++++ .../components/typography/enUS/index.md | 3 +- .../components/typography/enUS/tags.md | 16 +- .../components/typography/enUS/text.md | 10 + demo/styles/ComponentDemo.scss | 4 +- packages/common/Typography/index.js | 13 +- packages/common/Typography/src/a.vue | 2 +- packages/common/Typography/src/blockquote.vue | 11 +- packages/common/Typography/src/h1.vue | 22 --- packages/common/Typography/src/h2.vue | 22 --- packages/common/Typography/src/h3.vue | 22 --- packages/common/Typography/src/h4.vue | 22 --- packages/common/Typography/src/h5.vue | 22 --- packages/common/Typography/src/h6.vue | 22 --- packages/common/Typography/src/header.js | 37 ++++ packages/common/Typography/src/hr.vue | 2 +- packages/common/Typography/src/li.vue | 2 +- packages/common/Typography/src/ol.vue | 11 +- packages/common/Typography/src/p.vue | 2 +- packages/common/Typography/src/text.vue | 6 +- packages/common/Typography/src/ul.vue | 11 +- styles/Code.scss | 2 +- styles/Log.scss | 2 +- styles/Typography.scss | 172 ++++++++++-------- styles/themes/commonVars.scss | 2 + 25 files changed, 235 insertions(+), 236 deletions(-) create mode 100644 demo/documentation/components/typography/enUS/header.md delete mode 100644 packages/common/Typography/src/h1.vue delete mode 100644 packages/common/Typography/src/h2.vue delete mode 100644 packages/common/Typography/src/h3.vue delete mode 100644 packages/common/Typography/src/h4.vue delete mode 100644 packages/common/Typography/src/h5.vue delete mode 100644 packages/common/Typography/src/h6.vue create mode 100644 packages/common/Typography/src/header.js diff --git a/demo/documentation/components/typography/enUS/header.md b/demo/documentation/components/typography/enUS/header.md new file mode 100644 index 000000000..8a5da6920 --- /dev/null +++ b/demo/documentation/components/typography/enUS/header.md @@ -0,0 +1,31 @@ +# Header +```html +
+
+ sin(x) + sin(x) + sin(x) + cos(x) + cos(x) + cos(x) + -sin(x) + -sin(x) + -sin(x) + -cos(x) + -cos(x) + -cos(x) + sin(x) + sin(x) + sin(x) + What a loop! + What a loop! + What a loop! +
+``` \ No newline at end of file diff --git a/demo/documentation/components/typography/enUS/index.md b/demo/documentation/components/typography/enUS/index.md index 836d94bdf..af7ead349 100644 --- a/demo/documentation/components/typography/enUS/index.md +++ b/demo/documentation/components/typography/enUS/index.md @@ -4,6 +4,7 @@ Naive UI provides some basic styling for common HTML tags. It also provides some ## Demos ```demo -tags +header text +tags ``` \ No newline at end of file diff --git a/demo/documentation/components/typography/enUS/tags.md b/demo/documentation/components/typography/enUS/tags.md index d5e98415e..841b2c21d 100644 --- a/demo/documentation/components/typography/enUS/tags.md +++ b/demo/documentation/components/typography/enUS/tags.md @@ -2,7 +2,7 @@ ```html a tag h1 tag -Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987. +Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987. h2 tag Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987. h3 tag @@ -24,7 +24,21 @@ li tag li tag + + li tag + li tag + li tag + + + + li tag + li tag + li tag + Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987. + + Hear the Wind Sing (風の歌を聴け Kaze no uta o kike) is the first novel by Japanese writer Haruki Murakami. It first appeared in the June 1979 issue of Gunzo (one of the most influential literary magazines in Japan), and in book form the next month. The novel was adapted by Japanese director Kazuki Ōmori in a 1981 film distributed by Art Theatre Guild. An English translation by Alfred Birnbaum appeared in 1987. + ``` \ No newline at end of file diff --git a/demo/documentation/components/typography/enUS/text.md b/demo/documentation/components/typography/enUS/text.md index 617c8867f..60c0f3589 100644 --- a/demo/documentation/components/typography/enUS/text.md +++ b/demo/documentation/components/typography/enUS/text.md @@ -1,4 +1,5 @@ # Text +Use different type of text to display different kind of info. ```html Info Success @@ -7,4 +8,13 @@ Strong Italic Underline +Delete +Code +Code +``` +```css +.n-text { + display: inline-block; + margin: 0 8px 12px 0; +} ``` \ No newline at end of file diff --git a/demo/styles/ComponentDemo.scss b/demo/styles/ComponentDemo.scss index c65019069..9e733765b 100644 --- a/demo/styles/ComponentDemo.scss +++ b/demo/styles/ComponentDemo.scss @@ -14,7 +14,7 @@ transition: border-color .3s $default-cubic-bezier; border-top: 1px solid $--n-divider-color; code { - font-family: 'FiraCode'; + font-family: $--n-mono-font-family; font-size: 14px; } } @@ -62,7 +62,7 @@ } } code, pre { - font-family: 'FiraCode'; + font-family: $--n-mono-font-family; font-size: 14px; } } diff --git a/packages/common/Typography/index.js b/packages/common/Typography/index.js index 55dbed9aa..4afd71a78 100644 --- a/packages/common/Typography/index.js +++ b/packages/common/Typography/index.js @@ -1,9 +1,4 @@ -import H1 from './src/h1' -import H2 from './src/h2' -import H3 from './src/h3' -import H4 from './src/h4' -import H5 from './src/h5' -import H6 from './src/h6' +import header from './src/header' import A from './src/A' import P from './src/P' import Blockquote from './src/blockquote' @@ -15,6 +10,12 @@ import Text from './src/text' const Typography = { install (Vue) { + const H1 = header(1) + const H2 = header(2) + const H3 = header(3) + const H4 = header(4) + const H5 = header(5) + const H6 = header(6) Vue.component(H1.name, H1) Vue.component(H2.name, H2) Vue.component(H3.name, H3) diff --git a/packages/common/Typography/src/a.vue b/packages/common/Typography/src/a.vue index 24404f384..23224f2a3 100644 --- a/packages/common/Typography/src/a.vue +++ b/packages/common/Typography/src/a.vue @@ -6,7 +6,7 @@ export default { functional: true, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('a', { diff --git a/packages/common/Typography/src/blockquote.vue b/packages/common/Typography/src/blockquote.vue index ed57aeb0a..3224188fc 100644 --- a/packages/common/Typography/src/blockquote.vue +++ b/packages/common/Typography/src/blockquote.vue @@ -4,15 +4,22 @@ import getTheme from './getTheme' export default { name: 'NBlockquote', functional: true, + props: { + alignText: { + type: Boolean, + default: false + } + }, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('blockquote', { staticClass: 'n-blockquote', class: { - [`n-${theme}-theme`]: theme + [`n-${theme}-theme`]: theme, + 'n-blockquote--align-text': context.props.alignText }, attrs, on diff --git a/packages/common/Typography/src/h1.vue b/packages/common/Typography/src/h1.vue deleted file mode 100644 index f1963df81..000000000 --- a/packages/common/Typography/src/h1.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/h2.vue b/packages/common/Typography/src/h2.vue deleted file mode 100644 index fd95dde88..000000000 --- a/packages/common/Typography/src/h2.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/h3.vue b/packages/common/Typography/src/h3.vue deleted file mode 100644 index 00ee81b6a..000000000 --- a/packages/common/Typography/src/h3.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/h4.vue b/packages/common/Typography/src/h4.vue deleted file mode 100644 index 80b59b910..000000000 --- a/packages/common/Typography/src/h4.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/h5.vue b/packages/common/Typography/src/h5.vue deleted file mode 100644 index f8a9c3782..000000000 --- a/packages/common/Typography/src/h5.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/h6.vue b/packages/common/Typography/src/h6.vue deleted file mode 100644 index e63bb723d..000000000 --- a/packages/common/Typography/src/h6.vue +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/packages/common/Typography/src/header.js b/packages/common/Typography/src/header.js new file mode 100644 index 000000000..c4ccf8610 --- /dev/null +++ b/packages/common/Typography/src/header.js @@ -0,0 +1,37 @@ +import getTheme from './getTheme' + +export default level =>({ + name: 'NH' + level, + functional: true, + props: { + type: { + type: String, + default: null + }, + prefix: { + type: String, + default: null + }, + alignText: { + type: Boolean, + default: false + } + }, + render (h, context) { + const props = context.props + const on = context.listeners + const theme = getTheme(context.parent) + const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) + return h(`h${level}`, { + staticClass: `n-h${level}`, + class: { + [`n-${theme}-theme`]: theme, + [`n-h${level}--${props.type}-type`]: props.type, + [`n-h${level}--prefix-bar`]: props.prefix, + [`n-h${level}--align-text`]: props.alignText + }, + attrs: context.data.attrs, + on + }, defaultSlot) + } +}) \ No newline at end of file diff --git a/packages/common/Typography/src/hr.vue b/packages/common/Typography/src/hr.vue index fec2baf81..e7cc9b618 100644 --- a/packages/common/Typography/src/hr.vue +++ b/packages/common/Typography/src/hr.vue @@ -6,7 +6,7 @@ export default { functional: true, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('hr', { diff --git a/packages/common/Typography/src/li.vue b/packages/common/Typography/src/li.vue index 8d05792f7..3fd19883d 100644 --- a/packages/common/Typography/src/li.vue +++ b/packages/common/Typography/src/li.vue @@ -6,7 +6,7 @@ export default { functional: true, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('li', { diff --git a/packages/common/Typography/src/ol.vue b/packages/common/Typography/src/ol.vue index 478c0f786..afb2f6a46 100644 --- a/packages/common/Typography/src/ol.vue +++ b/packages/common/Typography/src/ol.vue @@ -4,15 +4,22 @@ import getTheme from './getTheme' export default { name: 'NOl', functional: true, + props: { + alignText: { + type: Boolean, + default: false + } + }, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('ol', { staticClass: 'n-ol', class: { - [`n-${theme}-theme`]: theme + [`n-${theme}-theme`]: theme, + [`n-ol--align-text`]: context.props.alignText }, attrs, on diff --git a/packages/common/Typography/src/p.vue b/packages/common/Typography/src/p.vue index da577b927..5eca99723 100644 --- a/packages/common/Typography/src/p.vue +++ b/packages/common/Typography/src/p.vue @@ -6,7 +6,7 @@ export default { functional: true, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('p', { diff --git a/packages/common/Typography/src/text.vue b/packages/common/Typography/src/text.vue index 9bee72fab..8ffa46021 100644 --- a/packages/common/Typography/src/text.vue +++ b/packages/common/Typography/src/text.vue @@ -25,7 +25,7 @@ export default { const attrs = props const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) - return h(isCode ? 'code' : 'span', { + return h(isCode ? 'code' : isDelete ? 'del' : 'span', { staticClass: 'n-text', class: { [`n-${theme}-theme`]: theme, @@ -39,7 +39,9 @@ export default { }, attrs, on - }, defaultSlot) + }, isDelete & isCode ? [ + h('del', {}, defaultSlot) + ] : defaultSlot) } } diff --git a/packages/common/Typography/src/ul.vue b/packages/common/Typography/src/ul.vue index cf1d7f5f2..7f2f6e12d 100644 --- a/packages/common/Typography/src/ul.vue +++ b/packages/common/Typography/src/ul.vue @@ -4,15 +4,22 @@ import getTheme from './getTheme' export default { name: 'NUl', functional: true, + props: { + alignText: { + type: Boolean, + default: false + } + }, render (h, context) { const on = context.listeners - const attrs = context.props + const attrs = context.data.attrs const theme = getTheme(context.parent) const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default()) return h('ul', { staticClass: 'n-ul', class: { - [`n-${theme}-theme`]: theme + [`n-${theme}-theme`]: theme, + [`n-ul--align-text`]: context.props.alignText }, attrs, on diff --git a/styles/Code.scss b/styles/Code.scss index b2d29e500..23d5ab7c5 100644 --- a/styles/Code.scss +++ b/styles/Code.scss @@ -11,7 +11,7 @@ @include b(code) { margin: 0; font-size: 14px; - font-family: 'FiraCode', monospace; + font-family: $--n-mono-font-family, monospace; [class^=hljs] { transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier; } diff --git a/styles/Log.scss b/styles/Log.scss index d2c5da668..0faa45a4d 100644 --- a/styles/Log.scss +++ b/styles/Log.scss @@ -3,7 +3,7 @@ @include themes-mixin { @include b(log) { position: relative; - font-family: 'FiraCode', monospace; + font-family: $--n-mono-font-family, monospace; font-size: 14px; color: $--n-secondary-text-color; box-sizing: border-box; diff --git a/styles/Typography.scss b/styles/Typography.scss index a27211ed6..c188b581d 100644 --- a/styles/Typography.scss +++ b/styles/Typography.scss @@ -1,81 +1,84 @@ @import './mixins/mixins.scss'; +$--header-font-size: ( + '1': 32px, + '2': 26px, + '3': 18px, + '4': 16px, + '5': 14px, + '6': 14px +); + +$--header-margin: ( + '1': 24px 0 12px 0, + '2': 24px 0 12px 0, + '3': 18px 0 12px 0, + '4': 18px 0 12px 0, + '5': 18px 0 12px 0, + '6': 18px 0 12px 0 +); + +$--header-prefix-width: ( + '1': 16px, + '2': 16px, + '3': 12px, + '4': 12px, + '5': 12px, + '6': 12px +); + +$--header-bar-width: ( + '1': 4px, + '2': 4px, + '3': 3px, + '4': 3px, + '5': 3px, + '6': 3px +); + +@mixin header-mixin($level) { + @include b('h' + $level) { + font-size: map-get($--header-font-size, $level); + font-weight: 700; + color: $--n-text-color; + &:first-child { + margin-top: 0 + } + &:last-child { + margin-bottom: 0; + } + margin: map-get($--header-margin, $level); + transition: color .3s $default-cubic-bezier; + @include m(prefix-bar) { + position: relative; + padding-left: map-get($--header-prefix-width, $level); + &::before { + content: ''; + width: map-get($--header-bar-width, $level); + border-radius: map-get($--header-bar-width, $level) / 2; + background-color: $--n-primary-color; + left: 0; + top: 0; + bottom: 0; + position: absolute; + } + @include m(align-text) { + padding-left: 0; + &::before { + left: -(map-get($--header-prefix-width, $level)); + } + } + } + } +} + @include themes-mixin { - @include b(h1) { - font-size: 32px; - font-weight: 700; - color: $--n-text-color; - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - transition: color .3s $default-cubic-bezier; - margin: 24px 0 12px 0; - } - @include b(h2) { - font-size: 24px; - font-weight: 700; - color: $--n-text-color; - transition: color .3s $default-cubic-bezier; - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - margin: 24px 0 12px 0; - } - @include b(h3) { - font-size: 18px; - font-weight: 700; - color: $--n-text-color; - transition: color .3s $default-cubic-bezier; - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - margin: 18px 0 12px 0; - } - @include b(h4) { - font-size: 16px; - font-weight: 700; - color: $--n-text-color; - transition: color .3s $default-cubic-bezier; - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - margin: 18px 0 12px 0; - } - @include b(h5) { - font-size: 14px; - font-weight: 700; - color: $--n-text-color; - transition: color .3s $default-cubic-bezier; - &:first-child { - margin-top: 0; - } - &:last-child { - margin-bottom: 0; - } - margin: 18px 0 12px 0; - } - @include b(h6) { - font-size: 14px; - font-weight: 700; - color: $--n-text-color; - transition: color .3s $default-cubic-bezier; - &:first-child { - margin-top: 0; - } - margin: 18px 0 12px 0; - } + @include header-mixin('1'); + @include header-mixin('2'); + @include header-mixin('3'); + @include header-mixin('4'); + @include header-mixin('5'); + @include header-mixin('6'); @include b(p) { &:first-child { margin-top: 0; @@ -98,6 +101,9 @@ margin-bottom: 0; } padding-left: 1.625em; + @include m(align-text) { + padding-left: 0; + } } @include b(ol) { margin: 12px 0; @@ -108,6 +114,9 @@ margin-bottom: 0; } padding-left: 1.625em; + @include m(align-text) { + padding-left: 0; + } } @include b(li) { transition: color .3s $default-cubic-bezier; @@ -127,15 +136,15 @@ transition: color .3s $default-cubic-bezier; color: $--n-secondary-text-color; @include m(code) { + font-family: $--n-mono-font-family; transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier; white-space: nowrap; box-sizing: border-box; background-clip: padding-box; color: $--n-secondary-text-color; - padding: 0em .4em .1em .4em; + padding: .15em .45em .15em .45em; border-radius: 3px; - font-size: 14px; - font-family: $--n-font-family; + font-size: 13px; background-color: $--n-alpha-input-color; border: 1px solid $--n-alpha-border-color; } @@ -180,9 +189,12 @@ margin: 0; margin-top: 12px; margin-bottom: 12px; - transition: color .3s $default-cubic-bezier; + transition: color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier; border-left: 4px solid $--n-divider-color; padding-left: 12px; - color: $--n-meta-text-color; + color: $--n-secondary-text-color; + @include m(align-text) { + margin-left: -16px; + } } } \ No newline at end of file diff --git a/styles/themes/commonVars.scss b/styles/themes/commonVars.scss index f318b3a57..4d71340c7 100644 --- a/styles/themes/commonVars.scss +++ b/styles/themes/commonVars.scss @@ -1,5 +1,7 @@ $--n-font-family: 'Lato'; +$--n-mono-font-family: 'FiraCode', monospace; + $--n-height: ( "small": 28px, "medium": 34px,