From 8231e65f215e551d6c048c0cfc697e899304e2ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Wed, 10 Oct 2018 10:40:16 +0800 Subject: [PATCH] feat(module:theme:alain-default): refactor layout component (#201) BREAKING CHANGE: + `layout-fixed` was changed to `alain-default__fixed` + `layout-boxed` was changed to `alain-default__boxed` + `aside-collapsed` was changed to `alain-default__collapsed` --- .../theme/styles/layout/default/aside.less | 4 +- .../layout/default/fix/footer-toolbar.less | 2 +- .../styles/layout/default/fix/reuse-tab.less | 6 +- .../layout/default/fix/sidebar-nav.less | 2 +- .../theme/styles/layout/default/fixed.less | 2 +- .../theme/styles/layout/default/header.less | 2 +- .../styles/layout/default/index.en-US.md | 54 ++++++++--------- .../styles/layout/default/index.zh-CN.md | 58 +++++++++---------- .../theme/styles/layout/default/layout.less | 2 +- .../theme/styles/layout/default/user.less | 2 +- src/app/routes/dev/layout.component.ts | 6 +- 11 files changed, 70 insertions(+), 70 deletions(-) diff --git a/packages/theme/styles/layout/default/aside.less b/packages/theme/styles/layout/default/aside.less index 479ec1d0f..ca9d971e8 100644 --- a/packages/theme/styles/layout/default/aside.less +++ b/packages/theme/styles/layout/default/aside.less @@ -49,7 +49,7 @@ // Desktop @media (min-width: @mobile-min) { - .aside-collapsed { + @{alain-default-prefix}__collapsed { @{alain-default-prefix}__aside { width: @alain-default-aside-collapsed-wd; } @@ -65,7 +65,7 @@ @{alain-default-prefix}__content { transform: translate3d(@alain-default-aside-wd, 0, 0); } - .aside-collapsed { + @{alain-default-prefix}__collapsed { @{alain-default-prefix}__aside { transform: translate3d(-100%, 0, 0); } diff --git a/packages/theme/styles/layout/default/fix/footer-toolbar.less b/packages/theme/styles/layout/default/fix/footer-toolbar.less index 3f03e99ea..9843e16cb 100644 --- a/packages/theme/styles/layout/default/fix/footer-toolbar.less +++ b/packages/theme/styles/layout/default/fix/footer-toolbar.less @@ -4,7 +4,7 @@ } } -.aside-collapsed { +@{alain-default-prefix}__collapsed { @{footer-toolbar-prefix} { &__left { margin-left: @alain-default-aside-collapsed-wd; diff --git a/packages/theme/styles/layout/default/fix/reuse-tab.less b/packages/theme/styles/layout/default/fix/reuse-tab.less index a87bbe677..e32b15a43 100644 --- a/packages/theme/styles/layout/default/fix/reuse-tab.less +++ b/packages/theme/styles/layout/default/fix/reuse-tab.less @@ -2,7 +2,7 @@ margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding; } -.layout-fixed { +@{alain-default-prefix}__fixed { @{reuse-tab-prefix} { position: fixed; top: @alain-default-header-hg; @@ -12,7 +12,7 @@ } @media (min-width: @mobile-min) { - .layout-fixed { + @{alain-default-prefix}__fixed { @{reuse-tab-prefix} { + router-outlet { display: block; @@ -23,7 +23,7 @@ } @media (max-width: @mobile-max) { - .layout-fixed { + @{alain-default-prefix}__fixed { @{reuse-tab-prefix} { position: unset; margin-top: @reuse-tab-height; diff --git a/packages/theme/styles/layout/default/fix/sidebar-nav.less b/packages/theme/styles/layout/default/fix/sidebar-nav.less index 72d6fad32..6258cbdd8 100644 --- a/packages/theme/styles/layout/default/fix/sidebar-nav.less +++ b/packages/theme/styles/layout/default/fix/sidebar-nav.less @@ -164,7 +164,7 @@ } @media (min-width: @mobile-min) { - .aside-collapsed { + @{alain-default-prefix}__collapsed { .@{sidebar-nav-prefix-cls}:not(.@{sidebar-nav-prefix-cls}__sub) { .@{sidebar-nav-prefix-cls}__item { border: none; diff --git a/packages/theme/styles/layout/default/fixed.less b/packages/theme/styles/layout/default/fixed.less index d3151e2f2..bbc2e515a 100644 --- a/packages/theme/styles/layout/default/fixed.less +++ b/packages/theme/styles/layout/default/fixed.less @@ -1,4 +1,4 @@ -.layout-fixed { +@{alain-default-prefix}__fixed { @{alain-default-prefix} { &__header { position: fixed; diff --git a/packages/theme/styles/layout/default/header.less b/packages/theme/styles/layout/default/header.less index fa93b4433..ede250118 100644 --- a/packages/theme/styles/layout/default/header.less +++ b/packages/theme/styles/layout/default/header.less @@ -155,7 +155,7 @@ // Collapsed -.aside-collapsed { +@{alain-default-prefix}__collapsed { @{alain-default-prefix}__header { &-logo { width: @alain-default-aside-collapsed-wd; diff --git a/packages/theme/styles/layout/default/index.en-US.md b/packages/theme/styles/layout/default/index.en-US.md index c7970df69..11ec23f5b 100644 --- a/packages/theme/styles/layout/default/index.en-US.md +++ b/packages/theme/styles/layout/default/index.en-US.md @@ -10,33 +10,33 @@ The default layout all parameters are prefixed with `@alain-default-`. | Name | Default | Description | | --- | --- | --- | -| `@prefix` | `.alain-default` | Style name prefix | -| `@ease` | `cubic-bezier(.25, 0, .15, 1)` | Animation filter function | -| `@header-hg` | `64px` | Height of header | -| `@header-bg` | `@primary-color` | Background-color of header | -| `@header-padding` | `@layout-gutter * 2` | Horizontal padding of header | -| `@header-search-enabled` | `true` | Whether top search | -| `@header-search-height` | `34px` | Height of top search | -| `@aside-wd` | `200px` | Width of aside | -| `@aside-bg` | `#fff` | Background-color of aside | -| `@aside-scrollbar-width` | `0` | Scrollbar width of aside | -| `@aside-scrollbar-height` | `0` | Scrollbar height of aside | -| `@aside-scrollbar-track-color` | `transparent` | Scrollbar track color of aside | -| `@aside-scrollbar-thumb-color` | `transparent` | Scrollbar thumb color of aside | -| `@aside-nav-fs` | `14px` | Font size of nav name | -| `@aside-nav-padding-top-bottom` | `@layout-gutter` | Vertical padding of nav | -| `@aside-nav-item-height` | `38px` | Item height of nav | -| `@aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | Nav text color | -| `@aside-nav-text-hover-color` | `#108ee9` | Nav text hover color | -| `@aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | Group text color | -| `@aside-nav-selected-text-color` | `#108ee9` | Nav selected text color | -| `@aside-nav-selected-bg` | `#fcfcfc` | Nav selected background color | -| `@aside-collapsed-wd` | `@layout-gutter * 8` | Width of aside collapsed | -| `@aside-collapsed-nav-fs` | `24px` | Font size of aside collapsed | -| `@content-heading-bg` | `#fafbfc` | Heading background color of content area | -| `@content-heading-border` | `#efe3e5` | Heading bottom border color of content area | -| `@content-padding` | `@layout-gutter * 3` | Padding of content area | -| `@content-bg` | `#f5f7fa` | Background color of content area | +| `@alain-default-prefix` | `.alain-default` | Style name prefix | +| `@alain-default-ease` | `cubic-bezier(.25, 0, .15, 1)` | Animation filter function | +| `@alain-default-header-hg` | `64px` | Height of header | +| `@alain-default-header-bg` | `@primary-color` | Background-color of header | +| `@alain-default-header-padding` | `@layout-gutter * 2` | Horizontal padding of header | +| `@alain-default-header-search-enabled` | `true` | Whether top search | +| `@alain-default-header-search-height` | `34px` | Height of top search | +| `@alain-default-aside-wd` | `200px` | Width of aside | +| `@alain-default-aside-bg` | `#fff` | Background-color of aside | +| `@alain-default-aside-scrollbar-width` | `0` | Scrollbar width of aside | +| `@alain-default-aside-scrollbar-height` | `0` | Scrollbar height of aside | +| `@alain-default-aside-scrollbar-track-color` | `transparent` | Scrollbar track color of aside | +| `@alain-default-aside-scrollbar-thumb-color` | `transparent` | Scrollbar thumb color of aside | +| `@alain-default-aside-nav-fs` | `14px` | Font size of nav name | +| `@alain-default-aside-nav-padding-top-bottom` | `@layout-gutter` | Vertical padding of nav | +| `@alain-default-aside-nav-item-height` | `38px` | Item height of nav | +| `@alain-default-aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | Nav text color | +| `@alain-default-aside-nav-text-hover-color` | `#108ee9` | Nav text hover color | +| `@alain-default-aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | Group text color | +| `@alain-default-aside-nav-selected-text-color` | `#108ee9` | Nav selected text color | +| `@alain-default-aside-nav-selected-bg` | `#fcfcfc` | Nav selected background color | +| `@alain-default-aside-collapsed-wd` | `@layout-gutter * 8` | Width of aside collapsed | +| `@alain-default-aside-collapsed-nav-fs` | `24px` | Font size of aside collapsed | +| `@alain-default-content-heading-bg` | `#fafbfc` | Heading background color of content area | +| `@alain-default-content-heading-border` | `#efe3e5` | Heading bottom border color of content area | +| `@alain-default-content-padding` | `@layout-gutter * 3` | Padding of content area | +| `@alain-default-content-bg` | `#f5f7fa` | Background color of content area | ## Usage diff --git a/packages/theme/styles/layout/default/index.zh-CN.md b/packages/theme/styles/layout/default/index.zh-CN.md index b2162fef9..367f29e65 100644 --- a/packages/theme/styles/layout/default/index.zh-CN.md +++ b/packages/theme/styles/layout/default/index.zh-CN.md @@ -8,35 +8,35 @@ title: 默认布局 ## 参数 -| 名称 | 默认值 | 功能 | -| --- | --- | --- | -| `@prefix` | `.alain-default` | 布局样式前缀 | -| `@ease` | `cubic-bezier(.25, 0, .15, 1)` | 动画过滤函数 | -| `@header-hg` | `64px` | 顶部高度 | -| `@header-bg` | `@primary-color` | 顶部背景色 | -| `@header-padding` | `@layout-gutter * 2` | 顶部左右内边距 | -| `@header-search-enabled` | `true` | 是否开启顶部搜索框 | -| `@header-search-height` | `34px` | 顶部搜索框高度 | -| `@aside-wd` | `200px` | 侧边栏宽度 | -| `@aside-bg` | `#fff` | 侧边栏背景色 | -| `@aside-scrollbar-width` | `0` | 侧边栏滚动条宽度 | -| `@aside-scrollbar-height` | `0` | 侧边栏滚动条高度 | -| `@aside-scrollbar-track-color` | `transparent` | 侧边栏滚动条的轨道颜色 | -| `@aside-scrollbar-thumb-color` | `transparent` | 侧边栏滚动条小方块颜色 | -| `@aside-nav-fs` | `14px` | 侧边栏菜单字号 | -| `@aside-nav-padding-top-bottom` | `@layout-gutter` | 侧边栏菜单项上下内边距 | -| `@aside-nav-item-height` | `38px` | 侧边栏菜单项高度 | -| `@aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | 侧边栏菜单文本颜色 | -| `@aside-nav-text-hover-color` | `#108ee9` | 侧边栏菜单文本悬停颜色 | -| `@aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | 侧边栏菜单分组文本颜色 | -| `@aside-nav-selected-text-color` | `#108ee9` | 侧边栏菜单激活时文本颜色 | -| `@aside-nav-selected-bg` | `#fcfcfc` | 侧边栏菜单激活时背景颜色 | -| `@aside-collapsed-wd` | `@layout-gutter * 8` | 侧边栏收缩后宽度 | -| `@aside-collapsed-nav-fs` | `24px` | 侧边栏收缩后文本字号 | -| `@content-heading-bg` | `#fafbfc` | 内容区域标题背景色 | -| `@content-heading-border` | `#efe3e5` | 内容区域标题底部边框色 | -| `@content-padding` | `@layout-gutter * 3` | 内容区域内边距 | -| `@content-bg` | `#f5f7fa` | 内容区域背景色 | +| 名称 | 默认值 | 功能 | +| ---------------------------------------------- | ------------------------------ | ------------------------ | +| `@alain-default-prefix` | `.alain-default` | 布局样式前缀 | +| `@alain-default-ease` | `cubic-bezier(.25, 0, .15, 1)` | 动画过滤函数 | +| `@alain-default-header-hg` | `64px` | 顶部高度 | +| `@alain-default-header-bg` | `@primary-color` | 顶部背景色 | +| `@alain-default-header-padding` | `@layout-gutter * 2` | 顶部左右内边距 | +| `@alain-default-header-search-enabled` | `true` | 是否开启顶部搜索框 | +| `@alain-default-header-search-height` | `34px` | 顶部搜索框高度 | +| `@alain-default-aside-wd` | `200px` | 侧边栏宽度 | +| `@alain-default-aside-bg` | `#fff` | 侧边栏背景色 | +| `@alain-default-aside-scrollbar-width` | `0` | 侧边栏滚动条宽度 | +| `@alain-default-aside-scrollbar-height` | `0` | 侧边栏滚动条高度 | +| `@alain-default-aside-scrollbar-track-color` | `transparent` | 侧边栏滚动条的轨道颜色 | +| `@alain-default-aside-scrollbar-thumb-color` | `transparent` | 侧边栏滚动条小方块颜色 | +| `@alain-default-aside-nav-fs` | `14px` | 侧边栏菜单字号 | +| `@alain-default-aside-nav-padding-top-bottom` | `@layout-gutter` | 侧边栏菜单项上下内边距 | +| `@alain-default-aside-nav-item-height` | `38px` | 侧边栏菜单项高度 | +| `@alain-default-aside-nav-text-color` | `rgba(0, 0, 0, 0.65)` | 侧边栏菜单文本颜色 | +| `@alain-default-aside-nav-text-hover-color` | `#108ee9` | 侧边栏菜单文本悬停颜色 | +| `@alain-default-aside-nav-group-text-color` | `rgba(0, 0, 0, 0.43)` | 侧边栏菜单分组文本颜色 | +| `@alain-default-aside-nav-selected-text-color` | `#108ee9` | 侧边栏菜单激活时文本颜色 | +| `@alain-default-aside-nav-selected-bg` | `#fcfcfc` | 侧边栏菜单激活时背景颜色 | +| `@alain-default-aside-collapsed-wd` | `@layout-gutter * 8` | 侧边栏收缩后宽度 | +| `@alain-default-aside-collapsed-nav-fs` | `24px` | 侧边栏收缩后文本字号 | +| `@alain-default-content-heading-bg` | `#fafbfc` | 内容区域标题背景色 | +| `@alain-default-content-heading-border` | `#efe3e5` | 内容区域标题底部边框色 | +| `@alain-default-content-padding` | `@layout-gutter * 3` | 内容区域内边距 | +| `@alain-default-content-bg` | `#f5f7fa` | 内容区域背景色 | ## 使用方式 diff --git a/packages/theme/styles/layout/default/layout.less b/packages/theme/styles/layout/default/layout.less index 5fb85a742..2ddf9bf9b 100644 --- a/packages/theme/styles/layout/default/layout.less +++ b/packages/theme/styles/layout/default/layout.less @@ -69,7 +69,7 @@ body { @{alain-default-prefix}__content { margin-left: (@alain-default-aside-wd + @alain-default-content-padding); } - .aside-collapsed { + @{alain-default-prefix}__collapsed { @{alain-default-prefix} { &__sidebar { width: @alain-default-aside-collapsed-wd; diff --git a/packages/theme/styles/layout/default/user.less b/packages/theme/styles/layout/default/user.less index bc190f3e9..e02b83340 100644 --- a/packages/theme/styles/layout/default/user.less +++ b/packages/theme/styles/layout/default/user.less @@ -22,7 +22,7 @@ // Desktop @media (min-width: @mobile-min) { - .aside-collapsed { + @{alain-default-prefix}__collapsed { @{alain-default-prefix}__aside-user { width: @alain-default-aside-collapsed-wd; &-info { diff --git a/src/app/routes/dev/layout.component.ts b/src/app/routes/dev/layout.component.ts index 21b72412f..6498865b0 100644 --- a/src/app/routes/dev/layout.component.ts +++ b/src/app/routes/dev/layout.component.ts @@ -11,15 +11,15 @@ import { NzMessageService } from 'ng-zorro-antd'; preserveWhitespaces: false }) export class DevLayoutComponent implements OnInit { - @HostBinding('class.layout-fixed') + @HostBinding('class.alain-default__fixed') get isFixed() { return this.settings.layout.fixed; } - @HostBinding('class.layout-boxed') + @HostBinding('class.alain-default__boxed') get isBoxed() { return this.settings.layout.boxed; } - @HostBinding('class.aside-collapsed') + @HostBinding('class.alain-default__collapsed') get isCollapsed() { return this.settings.layout.collapsed; }