go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-10-04 02:36:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add toggle night mode in web UI

Browse source
This commit is contained in:
Radhi Fadlillah 2018-05-21 20:26:18 +07:00
parent f2afeab26f
commit fe93c2d55c
9 changed files with 115 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
cmd/serve/assets-prod.go
View file

File diff suppressed because one or more lines are too long

2
view/css/stylesheet.css
View file

File diff suppressed because one or more lines are too long

2
view/css/yla-dialog.css
View file

@ -1 +1 @@
.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:400px;min-height:0;max-height:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#353535;color:#EEE;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}
.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:400px;min-height:0;max-height:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#292929;color:#FFF;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}

2
view/css/yla-tooltip.css
View file

@ -1 +1 @@
.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:70px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-tooltip{font-size:14px;color:#EEE;background-color:#232323;padding:8px;border-radius:4px;position:relative;z-index:1000}.yla-tooltip::after{content:'';display:block;position:absolute;border:8px solid transparent}.yla-tooltip.left{margin-left:-14px}.yla-tooltip.left::after{top:50%;right:-16px;margin-top:-8px;border-left-color:#232323}.yla-tooltip.top{margin-top:-14px}.yla-tooltip.top::after{left:50%;bottom:-16px;margin-left:-8px;border-top-color:#232323}.yla-tooltip.right{margin-left:14px}.yla-tooltip.right::after{top:50%;left:-16px;margin-top:-8px;border-right-color:#232323}.yla-tooltip.bottom{margin-top:14px}.yla-tooltip.bottom::after{left:50%;top:-16px;margin-left:-8px;border-bottom-color:#232323}
.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-tooltip{font-size:14px;color:#FFF;background-color:#232323;padding:8px;border-radius:4px;position:relative;z-index:1000}.yla-tooltip::after{content:'';display:block;position:absolute;border:8px solid transparent}.yla-tooltip.left{margin-left:-14px}.yla-tooltip.left::after{top:50%;right:-16px;margin-top:-8px;border-left-color:#232323}.yla-tooltip.top{margin-top:-14px}.yla-tooltip.top::after{left:50%;bottom:-16px;margin-left:-8px;border-top-color:#232323}.yla-tooltip.right{margin-left:14px}.yla-tooltip.right::after{top:50%;left:-16px;margin-top:-8px;border-right-color:#232323}.yla-tooltip.bottom{margin-top:14px}.yla-tooltip.bottom::after{left:50%;top:-16px;margin-left:-8px;border-bottom-color:#232323}

10
view/index.html
View file

@ -24,7 +24,7 @@
</head>
<body>
<div id="index-page">
<div id="index-page" :class="{night: nightMode}">
<div id="sidebar">
<p id="logo">栞</p>
<yla-tooltip placement="right" content="Reload data">
@ -49,8 +49,8 @@
</a>
</yla-tooltip>
<yla-tooltip placement="right" content="Toggle night mode">
<a>
<i class="fas fa-moon fa-fw"></i>
<a @click="toggleNightMode">
<i class="fas fa-fw" :class="nightMode ? 'fa-moon' : 'fa-sun'"></i>
</a>
</yla-tooltip>
<yla-tooltip placement="right" content="Log out">
@ -219,6 +219,10 @@
this.$refs.content.scrollTop = 0;
localStorage.setItem('shiori-list-view', this.listView ? '1' : '0');
},
toggleNightMode() {
this.nightMode = !this.nightMode;
localStorage.setItem('shiori-night-mode', this.nightMode ? '1' : '0');
},
showDialogAdd() {
this.showDialog({
title: 'New Bookmark',

77
view/less/stylesheet.less
View file

@ -72,7 +72,7 @@ a {
align-items: baseline;
padding: 8px;
p {
color: @colorLight;
color: @color;
font-size: 0.9em;
margin-right: 16px;
min-width: 65px;
@ -87,13 +87,13 @@ a {
a {
display: block;
cursor: pointer;
color: @colorLight;
color: @color;
text-align: center;
font-size: 0.9em;
flex: 1 0;
i {
margin-right: 8px;
color: @colorLight;
color: @color;
}
&:hover {
color: @main;
@ -135,7 +135,7 @@ a {
display: flex;
flex-flow: column nowrap;
flex-shrink: 0;
background-color: @darkBg;
background-color: @sidebarBg;
min-width: 0;
min-height: 0;
overflow: hidden;
@ -152,7 +152,7 @@ a {
line-height: 60px;
text-align: center;
display: block;
color: @colorLight;
color: @colorSidebar;
&:hover {
background-color: @color;
}
@ -185,6 +185,7 @@ a {
line-height: 60px;
padding: 0 16px;
font-size: 1em;
background-color: @contentBg;
border-right: 1px solid @border;
}
a {
@ -315,7 +316,9 @@ a {
padding: 8px;
text-align: center;
font-size: 0.9em;
color: @color;
border: 1px solid @border;
background-color: @contentBg;
margin: 0 8px;
}
p {
@ -350,14 +353,13 @@ a {
border-bottom-width: 1px;
position: relative;
padding-left: 100px;
background-color: #FAFAFA;
background-color: @contentBg;
&:first-of-type {
border-top-width: 1px;
}
.bookmark-content {
display: flex;
flex-flow: column nowrap;
background-color: @contentBg;
border-left: 1px solid @border;
padding: 16px 24px 8px;
img {
@ -378,7 +380,6 @@ a {
}
}
.bookmark-menu {
background-color: @contentBg;
border-left: 1px solid @border;
padding: 0 24px 16px;
}
@ -390,6 +391,46 @@ a {
}
}
}
&.night {
background-color: @nightBg;
#body {
#header {
color: @nightColor;
border-color: @nightBorder;
background-color: @nightContentBg;
input {
color: @nightColor;
border-color: @nightBorder;
background-color: @nightContentBg;
}
}
#content {
#grid {
.bookmark {
border-color: @nightBorder;
background-color: @nightContentBg;
.bookmark-content {
border-color: @nightBorder;
.title,
.excerpt {
color: @nightColor;
}
}
.bookmark-menu {
border-color: @nightBorder;
}
}
.pagination-box {
input {
color: @nightColor;
border-color: @nightBorder;
background-color: @nightContentBg;
}
}
}
}
}
}
}
#cache-page {
@ -483,4 +524,24 @@ a {
color: white;
}
}
}
.night .yla-dialog {
color: @nightColor;
background-color: @nightBg;
>.yla-dialog__header {
background-color: @nightContentBg;
border-bottom: 1px solid @nightBorder;
}
>.yla-dialog__body {
>input,
>textarea {
color: @nightColor;
border-color: @nightBorder;
background-color: @nightContentBg;
}
}
>.yla-dialog__footer {
border-color: @nightBorder;
}
}

14
view/less/variable.less
View file

@ -2,18 +2,21 @@
//
// Background
@bg: #EEE;
@darkBg: #353535;
@sidebarBg: #292929;
@contentBg: #FFF;
@nightBg: #1F1F1F;
@nightContentBg: #292929;
//
// Border
@border: #E5E5E5;
@borderDark: #9E9E9E;
@nightBorder: #191919;
//
// Font color
@color: #232323;
@colorLink: #999;
@colorLight: #EEE;
@colorSidebar: #FFF;
@fontSize: 0.9em;
@nightColor: #FFF;
//
// Color theme
@main: #F44336;
@ -22,8 +25,13 @@
//
// Tooltip
@tooltipBg: #232323;
@tooltipColor: #FFF;
@arrowWidth: 8px;
//
// Dialog
@dialogHeaderBg: #292929;
@dialogHeaderColor: #FFF;
//
// Other variable
@headerHeight: 60px;
//

4
view/less/yla-dialog.less
View file

@ -29,8 +29,8 @@
flex-flow: row nowrap;
padding: 16px;
min-height: 0;
background-color: @darkBg;
color: @colorLight;
background-color: @dialogHeaderBg;
color: @dialogHeaderColor;
flex-shrink: 0;
>p {
flex: 1 0;

2
view/less/yla-tooltip.less
View file

@ -1,7 +1,7 @@
@import "variable";
.yla-tooltip {
font-size: 14px;
color: @colorLight;
color: @tooltipColor;
background-color: @tooltipBg;
padding: 8px;
border-radius: 4px;