Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
ef9fa7b0
Commit
ef9fa7b0
authored
Jun 08, 2017
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ux: very early start to new sidemenu
parent
cdd5ba61
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
31 additions
and
46 deletions
+31
-46
public/app/core/components/navbar/navbar.html
+0
-3
public/app/core/components/sidemenu/sidemenu.html
+0
-2
public/sass/_variables.dark.scss
+6
-3
public/sass/_variables.light.scss
+4
-1
public/sass/_variables.scss
+1
-1
public/sass/components/_navbar.scss
+0
-21
public/sass/components/_row.scss
+2
-2
public/sass/components/_sidemenu.scss
+18
-13
No files found.
public/app/core/components/navbar/navbar.html
View file @
ef9fa7b0
...
...
@@ -3,9 +3,6 @@
<span
class=
"navbar-brand-btn-background"
>
<img
src=
"public/img/grafana_icon.svg"
></img>
</span>
<i
class=
"icon-gf icon-gf-grafana_wordmark"
></i>
<i
class=
"fa fa-caret-down"
></i>
<i
class=
"fa fa-chevron-left"
></i>
</a>
<a
class=
"navbar-page-btn navbar-page-btn--search"
ng-click=
"ctrl.showSearch()"
>
...
...
public/app/core/components/sidemenu/sidemenu.html
View file @
ef9fa7b0
...
...
@@ -13,7 +13,6 @@
<span
class=
"sidemenu-org-name sidemenu-item-text"
>
{{::ctrl.user.orgName}}
</span>
</div>
</a>
<i
class=
"fa fa-caret-right"
></i>
<ul
class=
"dropdown-menu"
role=
"menu"
>
<li
ng-repeat=
"menuItem in ctrl.orgMenu"
ng-class=
"::menuItem.cssClass"
>
<span
ng-show=
"::menuItem.section"
>
{{::menuItem.section}}
</span>
...
...
@@ -42,7 +41,6 @@
<img
ng-src=
"{{::item.img}}"
ng-show=
"::item.img"
>
</span>
<span
class=
"sidemenu-item-text"
>
{{::item.text}}
</span>
<span
class=
"fa fa-caret-right"
ng-if=
"::item.children"
></span>
</a>
<ul
class=
"dropdown-menu"
role=
"menu"
ng-if=
"::item.children"
>
<li
ng-repeat=
"child in ::item.children"
ng-class=
"{divider: child.divider}"
>
...
...
public/sass/_variables.dark.scss
View file @
ef9fa7b0
...
...
@@ -93,6 +93,10 @@ $panel-border: solid 1px $dark-3;
$panel-drop-zone-bg
:
repeating-linear-gradient
(
-128deg
,
#111
,
#111
10px
,
#191919
10px
,
#222
20px
);
$panel-menu-border
:
solid
1px
black
;
// Row
// -------------------------
$row-menu-bg
:
$body-bg
;
$divider-border-color
:
#555
;
// Graphite Target Editor
...
...
@@ -226,9 +230,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu
// -------------------------
$side-menu-bg
:
$body-bg
;
$side-menu-item-hover-bg
:
$dark-3
;
$side-menu-opacity
:
0
.97
;
$side-menu-bg
:
$dark-3
;
$side-menu-item-hover-bg
:
$dark-2
;
// Pagination
// -------------------------
...
...
public/sass/_variables.light.scss
View file @
ef9fa7b0
...
...
@@ -100,6 +100,10 @@ $panel-border: solid 1px $gray-6;
$panel-drop-zone-bg
:
repeating-linear-gradient
(
-128deg
,
$body-bg
,
$body-bg
10px
,
$gray-6
10px
,
$gray-6
20px
);
$panel-menu-border
:
solid
1px
white
;
// Row
// -------------------------
$row-menu-bg
:
$body-bg
;
$divider-border-color
:
$gray-2
;
// Graphite Target Editor
...
...
@@ -182,7 +186,6 @@ $input-invalid-border-color: lighten($red, 5%);
// -------------------------
$side-menu-bg
:
$body-bg
;
$side-menu-item-hover-bg
:
$gray-6
;
$side-menu-opacity
:
0
.97
;
// search
$search-shadow
:
0
5px
30px
0
lighten
(
$gray-2
,
30%
);
...
...
public/sass/_variables.scss
View file @
ef9fa7b0
...
...
@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius
:
2px
;
// sidemenu
$side-menu-width
:
14rem
;
$side-menu-width
:
68px
;
// dashboard
$panel-margin
:
0
.4rem
;
...
...
public/sass/components/_navbar.scss
View file @
ef9fa7b0
...
...
@@ -171,27 +171,6 @@
}
}
.sidemenu-pinned
{
.navbar-brand-btn
{
width
:
$side-menu-width
;
.icon-gf-grafana_wordmark
{
display
:
inline-block
;
}
.fa-caret-down
{
display
:
none
;
}
&
:hover
.fa-chevron-left
{
display
:
inline-block
;
color
:
$text-color-weak
;
position
:
relative
;
left
:
1
.3rem
;
}
}
}
.navbar-section-wrapper
{
position
:
relative
;
float
:
left
;
...
...
public/sass/components/_row.scss
View file @
ef9fa7b0
...
...
@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s;
list-style
:
none
;
flex-grow
:
1
;
box-shadow
:
$search-shadow
;
background
:
$
side
-menu-bg
;
background
:
$
row
-menu-bg
;
li
a
{
display
:
block
;
...
...
@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s;
color
:
$text-muted
;
font-size
:
$font-size-sm
;
padding
:
$spacer
/
2
$spacer
;
border-left
:
2px
solid
$
side
-menu-bg
;
border-left
:
2px
solid
$
row
-menu-bg
;
i
{
display
:
inline-block
;
padding-right
:
$spacer
/
2
;
...
...
public/sass/components/_sidemenu.scss
View file @
ef9fa7b0
...
...
@@ -6,8 +6,9 @@
position
:
absolute
;
top
:
52px
;
left
:
0
;
border-top
:
1px
solid
$navbarBorder
;
width
:
$side-menu-width
;
background-color
:
rgba
(
$side-menu-bg
,
$side-menu-opacity
)
;
background-color
:
$side-menu-bg
;
z-index
:
1000
;
opacity
:
0
;
visibility
:
hidden
;
...
...
@@ -31,7 +32,7 @@
min-height
:
calc
(
100%
-
54px
);
}
.dashboard-container
{
padding-left
:
$side-menu-width
+
0
.5rem
;
padding-left
:
$side-menu-width
+
20px
;
}
.page-container
{
margin-left
:
$side-menu-width
;
...
...
@@ -61,8 +62,8 @@
top
:
0px
;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
left
:
$side-menu-width
-
0
.2rem
;
background-color
:
rgba
(
$side-menu-bg
,
$side-menu-opacity
)
;
left
:
$side-menu-width
-
5px
;
background-color
:
$side-menu-bg
;
@include
animation
(
'dropdown-anim 150ms ease-in-out 100ms forwards'
);
z-index
:
-9999
;
}
...
...
@@ -118,10 +119,22 @@
padding
:
0px
10px
0px
10px
;
display
:
block
;
border-left
:
1px
solid
transparent
;
position
:
relative
;
.sidemenu-item-text
{
padding-left
:
11px
;
position
:
absolute
;
display
:
none
;
opacity
:
0
;
}
&
:hover
{
.sidemenu-item-text
{
display
:
block
;
opacity
:
1
;
transition
:
opacity
150ms
ease-in-out
;
}
}
img
{
...
...
@@ -132,15 +145,6 @@
}
}
.sidemenu-section-tagline
{
font-style
:
italic
;
line-height
:
10px
;
}
.sidemenu-section-text-wrapper
{
padding-top
:
4px
;
}
.sidemenu-org-section
.dropdown-menu-title
{
margin
:
0
10px
0
6px
;
padding
:
7px
0
7px
;
...
...
@@ -215,6 +219,7 @@
.sidemenu-org-details
{
padding-left
:
10px
;
color
:
$link-color
;
display
:
none
;
}
.sidemenu-org-name
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment