Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
ngx-admin
提交
a73662f1
N
ngx-admin
项目概览
知鸟1号
/
ngx-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
ngx-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
a73662f1
编写于
1月 09, 2019
作者:
V
Vladislav Ahmetvaliev
提交者:
Denis Strigo
1月 09, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(settings): redesign setting sidebar (#1982)
上级
47d232b6
变更
12
隐藏空白更改
内联
并排
Showing
12 changed file
with
210 addition
and
29 deletion
+210
-29
src/app/@theme/components/header/header.component.html
src/app/@theme/components/header/header.component.html
+0
-1
src/app/@theme/components/header/header.component.scss
src/app/@theme/components/header/header.component.scss
+5
-5
src/app/@theme/components/index.ts
src/app/@theme/components/index.ts
+1
-0
src/app/@theme/components/theme-settings/theme-settings.component.scss
...e/components/theme-settings/theme-settings.component.scss
+28
-8
src/app/@theme/components/theme-settings/theme-settings.component.ts
...eme/components/theme-settings/theme-settings.component.ts
+4
-2
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
...gle-settings-button/toggle-settings-button.component.scss
+97
-0
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
...oggle-settings-button/toggle-settings-button.component.ts
+33
-0
src/app/@theme/layouts/sample/sample.layout.scss
src/app/@theme/layouts/sample/sample.layout.scss
+30
-12
src/app/@theme/layouts/sample/sample.layout.ts
src/app/@theme/layouts/sample/sample.layout.ts
+2
-1
src/app/@theme/theme.module.ts
src/app/@theme/theme.module.ts
+2
-0
src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
...erce/country-orders/map/country-orders-map.component.scss
+4
-0
src/app/pages/maps/leaflet/leaflet.component.scss
src/app/pages/maps/leaflet/leaflet.component.scss
+4
-0
未找到文件。
src/app/@theme/components/header/header.component.html
浏览文件 @
a73662f1
...
...
@@ -14,7 +14,6 @@
size=
"medium"
[class.right]=
"position === 'normal'"
[class.left]=
"position === 'inverse'"
>
<nb-action
icon=
"nb-gear"
class=
"toggle-layout"
(click)=
"toggleSettings()"
></nb-action>
<nb-action
*nbIsGranted=
"['view', 'user']"
>
<nb-user
[nbContextMenu]=
"userMenu"
[name]=
"user?.name"
[picture]=
"user?.picture"
></nb-user>
</nb-action>
...
...
src/app/@theme/components/header/header.component.scss
浏览文件 @
a73662f1
...
...
@@ -94,7 +94,7 @@
}
}
.toggle-
layout
/
deep
/
a
{
.toggle-
settings
/
deep
/
a
{
display
:
block
;
text-decoration
:
none
;
line-height
:
1
;
...
...
@@ -155,7 +155,7 @@
@include
media-breakpoint-down
(
md
)
{
nb-action
:not
(
.toggle-
layout
)
{
nb-action
:not
(
.toggle-
settings
)
{
border
:
none
;
}
...
...
@@ -163,7 +163,7 @@
display
:
none
;
}
.toggle-
layout
{
.toggle-
settings
{
padding
:
0
;
}
...
...
@@ -191,7 +191,7 @@
}
}
.toggle-
layout
{
.toggle-
settings
{
display
:
none
;
}
...
...
@@ -199,7 +199,7 @@
display
:
none
;
}
nb-action
:not
(
.toggle-
layout
)
{
nb-action
:not
(
.toggle-
settings
)
{
padding
:
0
;
}
}
...
...
src/app/@theme/components/index.ts
浏览文件 @
a73662f1
...
...
@@ -7,3 +7,4 @@ export * from './theme-switcher/theme-switcher.component';
export
*
from
'
./switcher/switcher.component
'
;
export
*
from
'
./layout-direction-switcher/layout-direction-switcher.component
'
;
export
*
from
'
./theme-switcher/themes-switcher-list/themes-switcher-list.component
'
;
export
*
from
'
./toggle-settings-button/toggle-settings-button.component
'
;
src/app/@theme/components/theme-settings/theme-settings.component.scss
浏览文件 @
a73662f1
...
...
@@ -2,30 +2,45 @@
@include
nb-install-component
()
{
h6
{
margin-bottom
:
0
.5rem
;
margin-bottom
:
0
.875rem
;
text-align
:
center
;
font-weight
:
bold
;
text-shadow
:
0
0
8px
rgba
(
0
,
0
,
0
,
0
.16
);
}
.settings-row
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
justify-content
:
center
;
align-items
:
center
;
flex-wrap
:
wrap
;
width
:
90%
;
margin
:
0
0
1rem
;
width
:
100%
;
margin
:
0
0
2
.575rem
;
a
{
display
:
flex
;
justify-content
:
center
;
align-content
:
center
;
align-items
:
center
;
width
:
4
.15rem
;
height
:
4
.15rem
;
border-radius
:
nb-theme
(
radius
);
background-color
:
nb-theme
(
color-white
);
border
:
2px
solid
transparent
;
margin
:
0
.875rem
;
text-decoration
:
none
;
font-size
:
2
.25rem
;
color
:
nb-theme
(
color-fg
);
&
.selected
{
color
:
nb-theme
(
color-success
);
border-color
:
nb-theme
(
color-success
);
}
@include
nb-for-theme
(
cosmic
)
{
box-shadow
:
0
4px
14px
0
rgba
(
19
,
19
,
94
,
0
.4
);
background-color
:
#3e367e
;
border
:
2px
solid
#3e367e
;
&
.selected
{
color
:
nb-theme
(
link-color
);
}
...
...
@@ -39,11 +54,16 @@
.switcher
{
margin-bottom
:
1rem
;
font-size
:
1
.524rem
;
width
:
12rem
;
/
deep
/
ngx-switcher
{
.switch-label
span
{
font-size
:
1em
;
font-weight
:
normal
;
&
.first
,
&
.second
{
font-size
:
1rem
;
}
}
.switch
{
...
...
@@ -56,8 +76,8 @@
}
input
:checked
+
.slider
::before
{
@include
nb-ltr
(
transform
,
translateX
(
1
.5
r
em
)
!
important
);
@include
nb-rtl
(
transform
,
translateX
(
-1
.5
r
em
)
!
important
);
@include
nb-ltr
(
transform
,
translateX
(
1
.5em
)
!
important
);
@include
nb-rtl
(
transform
,
translateX
(
-1
.5em
)
!
important
);
}
}
...
...
src/app/@theme/components/theme-settings/theme-settings.component.ts
浏览文件 @
a73662f1
...
...
@@ -26,8 +26,10 @@ import { StateService } from '../../../@core/utils';
<i [attr.class]="sidebar.icon"></i>
</a>
</div>
<div class="switcher">
<ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
<div class="settings-row">
<div class="switcher">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
</div>
</div>
`
,
})
...
...
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
0 → 100644
浏览文件 @
a73662f1
@import
'../../styles/themes'
;
@import
'~bootstrap/scss/mixins/breakpoints'
;
@import
'~@nebular/theme/styles/global/breakpoints'
;
@include
nb-install-component
()
{
.toggle-settings
{
position
:
fixed
;
top
:
50%
;
height
:
8
.575rem
;
width
:
8
.575rem
;
border
:
none
;
transition
:
transform
0
.3s
ease
,
background-image
0
.3s
ease
;
transform
:
translate
(
0
,
-50%
);
z-index
:
998
;
@include
nb-ltr
()
{
border-top-left-radius
:
nb-theme
(
radius
);
border-bottom-left-radius
:
nb-theme
(
radius
);
right
:
0
;
&
.sidebarEnd
{
border-top-left-radius
:
0
;
border-bottom-left-radius
:
0
;
right
:
auto
;
border-top-right-radius
:
nb-theme
(
radius
);
border-bottom-right-radius
:
nb-theme
(
radius
);
left
:
0
;
}
}
@include
nb-rtl
()
{
border-top-right-radius
:
nb-theme
(
radius
);
border-bottom-right-radius
:
nb-theme
(
radius
);
left
:
0
;
&
.sidebarEnd
{
border-top-right-radius
:
0
;
border-bottom-right-radius
:
0
;
left
:
auto
;
border-top-left-radius
:
nb-theme
(
radius
);
border-bottom-left-radius
:
nb-theme
(
radius
);
right
:
0
;
}
}
&
.expanded
{
@include
nb-ltr
(
transform
,
translate
(
-19rem
,
-50%
));
@include
nb-rtl
(
transform
,
translate
(
19rem
,
-50%
));
&
.sidebarEnd
{
@include
nb-rtl
(
transform
,
translate
(
-19rem
,
-50%
));
@include
nb-ltr
(
transform
,
translate
(
19rem
,
-50%
));
}
}
@include
nb-for-theme
(
cosmic
)
{
box-shadow
:
0
0
3
.4285rem
0
rgba
(
19
,
19
,
94
,
0
.72
);
background-image
:
linear-gradient
(
to
right
,
#a054fe
0%
,
#7a58ff
100%
);
&
.expanded
{
background-image
:
linear-gradient
(
to
right
,
#2f296b
0%
,
#2f296b
100%
);
}
}
@include
nb-for-theme
(
default
)
{
border
:
1px
solid
#d5dbe0
;
box-shadow
:
0
8px
24px
0
rgba
(
48
,
59
,
67
,
0
.15
);
background-color
:
#ffffff
;
}
@include
nb-for-theme
(
corporate
)
{
border
:
1px
solid
#d5dbe0
;
box-shadow
:
0
8px
24px
0
rgba
(
48
,
59
,
67
,
0
.15
);
color
:
nb-theme
(
color-danger
);
background-color
:
#ffffff
;
}
i
{
font-size
:
6rem
;
color
:
#ffffff
;
@include
nb-for-theme
(
default
)
{
color
:
nb-theme
(
color-danger
);
}
@include
nb-for-theme
(
corporate
)
{
color
:
nb-theme
(
color-warning
);
}
}
}
@include
media-breakpoint-down
(
sm
)
{
.toggle-settings
{
display
:
none
;
}
}
}
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
0 → 100644
浏览文件 @
a73662f1
import
{
Component
}
from
'
@angular/core
'
;
import
{
NbSidebarService
}
from
'
@nebular/theme
'
;
import
{
StateService
}
from
'
../../../@core/utils
'
;
@
Component
({
selector
:
'
ngx-toggle-settings-button
'
,
styleUrls
:
[
'
./toggle-settings-button.component.scss
'
],
template
:
`
<button class="toggle-settings"
(click)="toggleSettings()"
[class.expanded]="expanded"
[class.sidebarEnd]="sidebarEnd">
<i class="nb-gear"></i>
</button>
`
,
})
export
class
ToggleSettingsButtonComponent
{
sidebarEnd
=
false
;
expanded
=
false
;
constructor
(
private
sidebarService
:
NbSidebarService
,
protected
stateService
:
StateService
)
{
this
.
stateService
.
onSidebarState
()
.
subscribe
(({
id
})
=>
{
this
.
sidebarEnd
=
id
===
'
end
'
;
});
}
toggleSettings
()
{
this
.
sidebarService
.
toggle
(
false
,
'
settings-sidebar
'
);
this
.
expanded
=
!
this
.
expanded
;
}
}
src/app/@theme/layouts/sample/sample.layout.scss
浏览文件 @
a73662f1
...
...
@@ -8,23 +8,25 @@
}
nb-sidebar
.settings-sidebar
{
$sidebar-width
:
7
.5
rem
;
$sidebar-width
:
19
rem
;
transition
:
width
0
.3s
ease
;
transition
:
transform
0
.3s
ease
;
width
:
$sidebar-width
;
overflow
:
hidden
;
@include
nb-ltr
(
transform
,
translateX
(
100%
));
@include
nb-rtl
(
transform
,
translateX
(
-100%
));
&
.start
{
@include
nb-ltr
(
transform
,
translateX
(
-100%
));
@include
nb-rtl
(
transform
,
translateX
(
100%
));
}
&
.collapsed
{
width
:
0
;
/
deep
/
.main-container
{
width
:
0
;
&
.expanded
,
&
.expanded.start
{
transform
:
translateX
(
0
);
}
.scrollable
{
width
:
$sidebar-width
;
padding
:
1
.25rem
;
}
}
/
deep
/
.scrollable
{
width
:
$sidebar-width
;
padding
:
3
.4rem
0
.25rem
;
}
/
deep
/
.main-container
{
...
...
@@ -106,6 +108,22 @@
}
/
deep
/
nb-menu
{
&
>
.menu-items
{
&
>
.menu-item
:first-child
{
.menu-title
{
&
::after
{
content
:
'new'
;
color
:
nb-theme
(
color-white
);
margin-left
:
1rem
;
background
:
nb-theme
(
color-danger
);
padding
:
0
0
.5rem
;
border-radius
:
nb-theme
(
radius
);
font-size
:
nb-theme
(
font-size-sm
);
}
}
}
}
.nb-e-commerce
{
font-size
:
2rem
;
}
...
...
src/app/@theme/layouts/sample/sample.layout.ts
浏览文件 @
a73662f1
...
...
@@ -9,7 +9,7 @@ import {
NbThemeService
,
}
from
'
@nebular/theme
'
;
import
{
StateService
}
from
'
../../../@core/utils
/state.service
'
;
import
{
StateService
}
from
'
../../../@core/utils
'
;
// TODO: move layouts into the framework
@
Component
({
...
...
@@ -57,6 +57,7 @@ import { StateService } from '../../../@core/utils/state.service';
<ngx-theme-settings></ngx-theme-settings>
</nb-sidebar>
</nb-layout>
<ngx-toggle-settings-button></ngx-toggle-settings-button>
`
,
})
export
class
SampleLayoutComponent
implements
OnDestroy
{
...
...
src/app/@theme/theme.module.ts
浏览文件 @
a73662f1
...
...
@@ -50,6 +50,7 @@ import {
ThemeSwitcherComponent
,
TinyMCEComponent
,
ThemeSwitcherListComponent
,
ToggleSettingsButtonComponent
,
}
from
'
./components
'
;
import
{
CapitalizePipe
,
...
...
@@ -121,6 +122,7 @@ const COMPONENTS = [
SampleLayoutComponent
,
ThreeColumnsLayoutComponent
,
TwoColumnsLayoutComponent
,
ToggleSettingsButtonComponent
,
];
const
ENTRY_COMPONENTS
=
[
...
...
src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
浏览文件 @
a73662f1
...
...
@@ -21,6 +21,10 @@
}
}
/
deep
/
.leaflet-top
,
/
deep
/
.leaflet-bottom
{
z-index
:
997
;
}
/
deep
/
.leaflet-bar
{
box-shadow
:
none
;
}
...
...
src/app/pages/maps/leaflet/leaflet.component.scss
浏览文件 @
a73662f1
...
...
@@ -6,6 +6,10 @@
padding
:
0
;
}
/
deep
/
.leaflet-top
,
/
deep
/
.leaflet-bottom
{
z-index
:
997
;
}
/
deep
/
.leaflet-container
{
width
:
100%
;
height
:
nb-theme
(
card-height-large
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录