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`
ng-alain · Oct 10, 2018 · 8231e65 · 8231e65
1 parent 832f596
commit 8231e65
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
  }