kif/portal
10
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add dark mode

Browse source
This commit is contained in:
Lars Westermann 2019-05-31 22:51:22 +02:00
parent df8f04099a
commit f90a4dddba
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
12 changed files with 296 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/jsMain/resources/style/_color.scss Normal file
View file

@ -0,0 +1,39 @@
$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;
$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #B11D33;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@mixin color-setting {
:root {
--background-primary-color: $background-primary-color;
--background-secondary-color: $background-secondary-color;
--text-primary-color: $text-primary-color;
--text-secondary-color: $text-secondary-color;
--primary-color: $primary-color;
--primary-text-color: $primary-text-color;
--error-color: $error-color;
--error-text-color: $error-text-color;
--input-border-color: $input-border-color;
--table-border-color: $table-border-color;
--table-header-color: $table-header-color;
--shadow-color: $shadow-color;
--bg-disabled-color: $bg-disabled-color;
--bg-enabled-color: $bg-enabled-color;
--lever-disabled-color: $lever-disabled-color;
--lever-enabled-color: $lever-enabled-color;
--error-background-color: $error-background-color;
}
}

21
src/jsMain/resources/style/dark.scss Normal file
View file

@ -0,0 +1,21 @@
@import "_color.scss";
$background-primary-color: #2d2d2d;
$background-secondary-color: #373737;
$text-primary-color: #fff;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #dd213d;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@include color-setting;

251
src/jsMain/resources/style/style.scss
View file

@ -1,3 +1,5 @@
@import "_color.scss";
@mixin no-select() { @mixin no-select() {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -7,35 +9,14 @@
user-select: none; user-select: none;
} }
$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;
$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #B11D33;
$primary-text-color: #fff;
$error-color: #D55225;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$border-radius: 0.2rem; $border-radius: 0.2rem;
$transitionTime: 150ms; $transitionTime: 150ms;
$bg-disabled-color: rgba($text-primary-color, .26); @include color-setting;
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: #FFCDD2;
body, html { body, html {
color: $text-primary-color; color: var(--text-primary-color);
background: $background-secondary-color; background: var(--background-secondary-color);
font-family: 'Montserrat', Roboto, Arial, sans-serif; font-family: 'Montserrat', Roboto, Arial, sans-serif;
font-weight: 600; font-weight: 600;
@ -57,14 +38,14 @@ body, html {
a { a {
text-decoration: none; text-decoration: none;
outline: none; outline: none;
color: $primary-color; color: var(--primary-color);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
color: $primary-color; color: var(--primary-color);
} }
} }
@ -98,8 +79,8 @@ a {
} }
.menu { .menu {
background-color: $background-secondary-color; background-color: var(--background-secondary-color);
color: $text-primary-color; color: var(--text-primary-color);
width: 100%; width: 100%;
clear: both; clear: both;
height: 6rem; height: 6rem;
@ -107,7 +88,7 @@ a {
a { a {
padding: 0 1rem; padding: 0 1rem;
color: $text-primary-color; color: var(--text-primary-color);
height: 100%; height: 100%;
display: inline-block; display: inline-block;
font-family: "Bungee", sans-serif; font-family: "Bungee", sans-serif;
@ -132,14 +113,14 @@ a {
} }
&.active::after { &.active::after {
background: $text-primary-color; background: var(--text-primary-color);
} }
&:hover { &:hover {
background-color: $table-border-color; background-color: var(--table-border-color);
&::after { &::after {
background: $primary-color; background: var(--primary-color);
} }
} }
} }
@ -162,7 +143,7 @@ a {
cursor: default; cursor: default;
padding: 0 1rem; padding: 0 1rem;
color: $text-primary-color; color: var(--text-primary-color);
height: 100%; height: 100%;
font-size: 2rem; font-size: 2rem;
position: relative; position: relative;
@ -171,7 +152,7 @@ a {
.menu-content { .menu-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: $background-secondary-color; background-color: var(--background-secondary-color);
z-index: 5; z-index: 5;
left: 0; left: 0;
right: 0; right: 0;
@ -264,14 +245,10 @@ a {
} }
tr { tr {
border-top: solid 1px $table-border-color; border-top: solid 1px var(--table-border-color);
&:nth-child(odd) {
//background-color: rgba($text-primary-color, 0.01);
}
&:first-child { &:first-child {
background-color: $table-header-color; background-color: var(--table-header-color);
height: 2.5rem; height: 2.5rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
@ -281,7 +258,7 @@ a {
line-height: 2rem; line-height: 2rem;
&:hover { &:hover {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
} }
} }
@ -295,16 +272,16 @@ a {
} }
&.error { &.error {
background-color: $error-background-color; background-color: var(--error-background-color);
} }
} }
.table-select-box { .table-select-box {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
background: $background-primary-color; background: var(--background-primary-color);
width: 10rem; width: 10rem;
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
border-radius: $border-radius; border-radius: $border-radius;
padding: 0.5rem 0; padding: 0.5rem 0;
@ -312,26 +289,27 @@ a {
padding: 0 0.5rem; padding: 0 0.5rem;
&:hover { &:hover {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
} }
} }
} }
.form-control { .form-control {
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
outline: none; outline: none;
padding: 0 1rem; padding: 0 1rem;
line-height: 2.5rem; line-height: 2.5rem;
height: 2.5rem; height: 2.5rem;
width: 100%; width: 100%;
background-color: $background-primary-color; background-color: var(--background-primary-color);
border-radius: $border-radius; border-radius: $border-radius;
margin: 1px; margin: 1px;
transition: border-color $transitionTime; transition: border-color $transitionTime;
color: var(--text-primary-color);
&:focus { &:focus {
border-color: $primary-color; border-color: var(--primary-color);
border-width: 2px; border-width: 2px;
} }
} }
@ -344,7 +322,7 @@ textarea.form-control {
select:-moz-focusring { select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 $text-primary-color; text-shadow: 0 0 0 var(--text-primary-color);
} }
.form-group { .form-group {
@ -385,7 +363,7 @@ select:-moz-focusring {
left: 0; left: 0;
width: 36px; width: 36px;
height: 14px; height: 14px;
background-color: $bg-disabled-color; background-color: var(--bg-disabled-color);
border-radius: 14px; border-radius: 14px;
z-index: 1; z-index: 1;
transition: background-color 0.28s cubic-bezier(.4, 0, .2, 1); transition: background-color 0.28s cubic-bezier(.4, 0, .2, 1);
@ -398,7 +376,7 @@ select:-moz-focusring {
left: 0; left: 0;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: $lever-disabled-color; background-color: var(--lever-disabled-color);
border-radius: 14px; border-radius: 14px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
z-index: 2; z-index: 2;
@ -411,12 +389,12 @@ select:-moz-focusring {
input:checked + label { input:checked + label {
&:before { &:before {
background-color: $bg-enabled-color; background-color: var(--bg-enabled-color);
} }
&:after { &:after {
left: 16px; left: 16px;
background-color: $lever-enabled-color; background-color: var(--lever-enabled-color);
} }
} }
} }
@ -426,12 +404,12 @@ select:-moz-focusring {
} }
.form-btn { .form-btn {
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
outline: none; outline: none;
padding: 0 1rem; padding: 0 1rem;
line-height: 2rem; line-height: 2rem;
background-color: $background-primary-color; background-color: var(--background-primary-color);
color: $primary-color; color: var(--primary-color);
display: inline-block; display: inline-block;
margin-right: 0.6rem; margin-right: 0.6rem;
@ -446,21 +424,21 @@ select:-moz-focusring {
cursor: pointer; cursor: pointer;
&:focus, &:hover { &:focus, &:hover {
border-color: $primary-color; border-color: var(--primary-color);
outline-color: $primary-color; outline-color: var(--primary-color);
} }
} }
.btn-primary { .btn-primary {
background-color: $primary-color; background-color: var(--primary-color);
color: $primary-text-color; color: var(--primary-text-color);
border-color: $primary-color; border-color: var(--primary-color);
} }
.btn-danger { .btn-danger {
background-color: $error-color; background-color: var(--error-color);
color: $error-text-color; color: var(--error-text-color);
border-color: $error-color; border-color: var(--error-color);
} }
button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner { button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner {
@ -522,9 +500,28 @@ form {
float: left; float: left;
} }
a {
i { i {
font-size: 1.5rem; font-size: 1.8rem;
padding: 0 0.5rem; padding: 0 0.5rem;
position: relative;
}
&:first-child i::after {
content: '';
position: absolute;
left: 100%;
height: 100%;
width: 4rem;
}
&:last-child i::after {
content: '';
position: absolute;
height: 100%;
left: -4rem;
width: 4rem;
}
} }
} }
@ -589,8 +586,8 @@ form {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background-color: $primary-color; background-color: var(--primary-color);
color: $primary-text-color; color: var(--primary-text-color);
padding: 0 0.5rem; padding: 0 0.5rem;
margin: 0.5rem; margin: 0.5rem;
@ -609,7 +606,7 @@ form {
} }
&.drag { &.drag {
box-shadow: 0 0.1rem 0.2rem rgba($text-primary-color, 0.8); box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
z-index: 2; z-index: 2;
.calendar-tools { .calendar-tools {
@ -625,7 +622,7 @@ form {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $background-primary-color; background-color: var(--background-primary-color);
opacity: 0.6; opacity: 0.6;
} }
@ -635,7 +632,7 @@ form {
.calendar[data-editable = "true"].edit { .calendar[data-editable = "true"].edit {
.calendar-table { .calendar-table {
width: calc(100% - 16rem); width: calc(100% - 16rem);
border-right: solid 1px $table-border-color; border-right: solid 1px var(--table-border-color);
} }
.calendar-edit-main { .calendar-edit-main {
@ -655,8 +652,8 @@ form {
display: none; display: none;
z-index: 10; z-index: 10;
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
box-shadow: 0 0.1rem 0.2rem $primary-text-color; box-shadow: 0 0.1rem 0.2rem var(--primary-text-color);
a { a {
padding: 0.2rem; padding: 0.2rem;
@ -686,8 +683,8 @@ form {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background-color: $primary-color; background-color: var(--primary-color);
color: $primary-text-color; color: var(--primary-text-color);
padding: 0 0.5rem; padding: 0 0.5rem;
@ -705,7 +702,7 @@ form {
} }
&.drag { &.drag {
box-shadow: 0 0.1rem 0.2rem rgba($text-primary-color, 0.8); box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
z-index: 2; z-index: 2;
.calendar-tools { .calendar-tools {
@ -721,12 +718,12 @@ form {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $background-primary-color; background-color: var(--background-primary-color);
opacity: 0.6; opacity: 0.6;
} }
&.error { &.error {
outline: solid 0.4rem $error-color; outline: solid 0.4rem var(--error-color);
} }
@include no-select() @include no-select()
@ -754,14 +751,14 @@ form {
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
border-left: solid 1px $table-border-color; border-left: solid 1px var(--table-border-color);
position: absolute; position: absolute;
} }
} }
} }
.calendar-row { .calendar-row {
border-top: solid 1px $table-border-color; border-top: solid 1px var(--table-border-color);
line-height: 3rem; line-height: 3rem;
height: 3rem; height: 3rem;
@ -774,12 +771,12 @@ form {
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
border-left: solid 1px $table-border-color; border-left: solid 1px var(--table-border-color);
position: absolute; position: absolute;
} }
&:hover { &:hover {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
.calendar-entry { .calendar-entry {
@ -796,7 +793,7 @@ form {
width: 6rem; width: 6rem;
left: 0; left: 0;
text-align: center; text-align: center;
border-right: solid 1px $table-border-color; border-right: solid 1px var(--table-border-color);
} }
.calendar-link { .calendar-link {
@ -827,7 +824,7 @@ form {
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
border-left: solid 1px $table-border-color; border-left: solid 1px var(--table-border-color);
position: absolute; position: absolute;
} }
} }
@ -847,12 +844,12 @@ form {
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
border-left: solid 1px $table-border-color; border-left: solid 1px var(--table-border-color);
position: absolute; position: absolute;
} }
&:hover { &:hover {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
.calendar-entry { .calendar-entry {
@ -873,7 +870,7 @@ form {
} }
&:nth-child(4n + 2) .calendar-cell::before { &:nth-child(4n + 2) .calendar-cell::before {
border-top: solid 1px $table-border-color; border-top: solid 1px var(--table-border-color);
} }
} }
@ -920,8 +917,8 @@ form {
width: 1.1rem; width: 1.1rem;
height: 0.5rem; height: 0.5rem;
transform: rotate(-45deg); transform: rotate(-45deg);
border-left: solid 0.3rem $background-primary-color; border-left: solid 0.3rem var(--background-primary-color);
border-bottom: solid 0.3rem $background-primary-color; border-bottom: solid 0.3rem var(--background-primary-color);
} }
} }
@ -942,7 +939,7 @@ form {
height: 3rem; height: 3rem;
border-radius: 1.5rem; border-radius: 1.5rem;
z-index: 1; z-index: 1;
border: solid 0.1rem $text-primary-color; border: solid 0.1rem var(--text-primary-color);
} }
input:checked ~ label::before { input:checked ~ label::before {
@ -954,8 +951,8 @@ form {
width: 1.1rem; width: 1.1rem;
height: 0.5rem; height: 0.5rem;
transform: rotate(-45deg); transform: rotate(-45deg);
border-left: solid 0.3rem $text-primary-color; border-left: solid 0.3rem var(--text-primary-color);
border-bottom: solid 0.3rem $text-primary-color; border-bottom: solid 0.3rem var(--text-primary-color);
} }
label input { label input {
@ -993,8 +990,8 @@ form {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: $primary-text-color; color: var(--primary-text-color);
background: $primary-color; background: var(--primary-color);
} }
} }
@ -1018,8 +1015,8 @@ form {
display: none; display: none;
padding: 0.5rem 0; padding: 0.5rem 0;
background: $background-primary-color; background: var(--background-primary-color);
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
border-radius: $border-radius; border-radius: $border-radius;
span { span {
@ -1028,7 +1025,7 @@ form {
display: block; display: block;
&:hover { &:hover {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
} }
@ -1068,7 +1065,7 @@ form {
top: 0; top: 0;
left: 0; left: 0;
font-size: 1.2rem; font-size: 1.2rem;
color: $primary-color; color: var(--primary-color);
line-height: 2rem; line-height: 2rem;
padding: 0 1rem; padding: 0 1rem;
@ -1078,7 +1075,7 @@ form {
opacity: 0.5; opacity: 0.5;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 2rem; line-height: 2rem;
color: $text-primary-color; color: var(--text-primary-color);
} }
} }
@ -1148,11 +1145,11 @@ form {
} }
td { td {
border-top: solid 1px $table-border-color; border-top: solid 1px var(--table-border-color);
} }
th { th {
background-color: $table-header-color; background-color: var(--table-header-color);
} }
td, th { td, th {
@ -1161,7 +1158,7 @@ form {
} }
.post-footer { .post-footer {
color: $text-secondary-color; color: var(--text-secondary-color);
padding: 0 1rem; padding: 0 1rem;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
@ -1195,9 +1192,9 @@ form {
.post-edit-image { .post-edit-image {
width: 100%; width: 100%;
padding-top: 75%; padding-top: 75%;
border: solid 1px $input-border-color; border: solid 1px var(--input-border-color);
margin: 0; margin: 0;
background-color: $background-primary-color; background-color: var(--background-primary-color);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
@ -1213,7 +1210,7 @@ form {
height: 1px; height: 1px;
left: 0; left: 0;
right: 0; right: 0;
background: $table-border-color; background: var(--table-border-color);
} }
} }
@ -1258,3 +1255,49 @@ form {
flex-direction: row; flex-direction: row;
} }
} }
.footer {
height: 5rem;
}
.footer-credit {
float: left;
}
.footer-theme {
float: right;
line-height: 2rem;
margin-top: 0.5rem;
a {
display: block;
position: relative;
padding-left: 2.5rem;
&::after {
content: '';
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
position: absolute;
top: 1rem;
left: 1rem;
transform: translate(-50%, -50%);
border: solid 0.2rem transparent;
}
&.selected::after {
border-color: var(--primary-color) !important;
}
}
#theme-light::after {
background-color: #fff;
border-color: #fff;
}
#theme-dark::after {
background-color: #2d2d2d;
border-color: #2d2d2d;
}
}

3
src/jvmMain/kotlin/de/kif/backend/route/Account.kt
View file

@ -9,6 +9,7 @@ import de.kif.backend.route.api.error
import de.kif.backend.util.WikiImporter import de.kif.backend.util.WikiImporter
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.respondMain
import de.kif.common.RepositoryType import de.kif.common.RepositoryType
import de.kif.common.model.Permission import de.kif.common.model.Permission
import io.ktor.application.call import io.ktor.application.call
@ -38,7 +39,7 @@ fun Route.account() {
val tracks = TrackRepository.all() val tracks = TrackRepository.all()
val wikiSections = WikiImporter.loadSections() val wikiSections = WikiImporter.loadSections()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.ACCOUNT active = MenuTemplate.Tab.ACCOUNT

9
src/jvmMain/kotlin/de/kif/backend/route/Calendar.kt
View file

@ -11,6 +11,7 @@ import de.kif.backend.repository.WorkGroupRepository
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.TableTemplate import de.kif.backend.view.TableTemplate
import de.kif.backend.view.respondMain
import de.kif.common.CALENDAR_GRID_WIDTH import de.kif.common.CALENDAR_GRID_WIDTH
import de.kif.common.Search import de.kif.common.Search
import de.kif.common.model.Permission import de.kif.common.model.Permission
@ -303,7 +304,7 @@ fun Route.calendar() {
.withLocale(KlockLocale.german) .withLocale(KlockLocale.german)
.format(date) .format(date)
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.CALENDAR active = MenuTemplate.Tab.CALENDAR
@ -315,13 +316,13 @@ fun Route.calendar() {
div("header") { div("header") {
div("header-left") { div("header-left") {
if (day - 1 in range) { if (editable || day - 1 > range.start) {
a("/calendar/${day - 1}") { i("material-icons") { +"chevron_left" } } a("/calendar/${day - 1}") { i("material-icons") { +"chevron_left" } }
} }
span { span {
+dateString +dateString
} }
if (day + 1 in range) { if (editable || day + 1 < range.endInclusive) {
a("/calendar/${day + 1}") { i("material-icons") { +"chevron_right" } } a("/calendar/${day + 1}") { i("material-icons") { +"chevron_right" } }
} }
} }
@ -400,7 +401,7 @@ fun Route.calendar() {
val list = WorkGroupRepository.all() val list = WorkGroupRepository.all()
val room = RoomRepository.get(roomId) ?: return@get val room = RoomRepository.get(roomId) ?: return@get
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP

3
src/jvmMain/kotlin/de/kif/backend/route/Login.kt
View file

@ -3,6 +3,7 @@ package de.kif.backend.route
import de.kif.backend.PortalSession import de.kif.backend.PortalSession
import de.kif.backend.UserPrinciple import de.kif.backend.UserPrinciple
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.respondMain
import io.ktor.application.call import io.ktor.application.call
import io.ktor.auth.authenticate import io.ktor.auth.authenticate
import io.ktor.auth.principal import io.ktor.auth.principal
@ -32,7 +33,7 @@ fun Route.login() {
get { get {
val needLogin = call.sessions.get<PortalSession>() == null val needLogin = call.sessions.get<PortalSession>() == null
if (needLogin) { if (needLogin) {
call.respondHtmlTemplate(MainTemplate()) { respondMain {
content { content {
div { div {
div { div {

9
src/jvmMain/kotlin/de/kif/backend/route/Overview.kt
View file

@ -8,6 +8,7 @@ import de.kif.backend.repository.PostRepository
import de.kif.backend.util.markdownToHtml import de.kif.backend.util.markdownToHtml
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.respondMain
import de.kif.common.formatDateTime import de.kif.common.formatDateTime
import de.kif.common.model.Permission import de.kif.common.model.Permission
import de.kif.common.model.Post import de.kif.common.model.Post
@ -76,7 +77,7 @@ fun Route.overview() {
val postList = PostRepository.all().asReversed() val postList = PostRepository.all().asReversed()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.BOARD active = MenuTemplate.Tab.BOARD
@ -116,7 +117,7 @@ fun Route.overview() {
return@get return@get
} }
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.BOARD active = MenuTemplate.Tab.BOARD
@ -133,7 +134,7 @@ fun Route.overview() {
authenticateOrRedirect(Permission.POST) { user -> authenticateOrRedirect(Permission.POST) { user ->
val postId = call.parameters["id"]?.toLongOrNull() ?: return@get val postId = call.parameters["id"]?.toLongOrNull() ?: return@get
val editPost = PostRepository.get(postId) ?: return@get val editPost = PostRepository.get(postId) ?: return@get
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.BOARD active = MenuTemplate.Tab.BOARD
@ -363,7 +364,7 @@ fun Route.overview() {
get("/post/new") { get("/post/new") {
authenticateOrRedirect(Permission.POST) { user -> authenticateOrRedirect(Permission.POST) { user ->
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.BOARD active = MenuTemplate.Tab.BOARD

8
src/jvmMain/kotlin/de/kif/backend/route/Room.kt
View file

@ -5,6 +5,7 @@ import de.kif.backend.repository.RoomRepository
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.TableTemplate import de.kif.backend.view.TableTemplate
import de.kif.backend.view.respondMain
import de.kif.common.Search import de.kif.common.Search
import de.kif.common.model.Permission import de.kif.common.model.Permission
import de.kif.common.model.Room import de.kif.common.model.Room
@ -30,7 +31,8 @@ fun Route.room() {
authenticateOrRedirect(Permission.ROOM) { user -> authenticateOrRedirect(Permission.ROOM) { user ->
val search = call.parameters["search"] ?: "" val search = call.parameters["search"] ?: ""
val list = RoomRepository.all() val list = RoomRepository.all()
call.respondHtmlTemplate(MainTemplate()) {
respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.ROOM active = MenuTemplate.Tab.ROOM
@ -110,7 +112,7 @@ fun Route.room() {
authenticateOrRedirect(Permission.ROOM) { user -> authenticateOrRedirect(Permission.ROOM) { user ->
val roomId = call.parameters["id"]?.toLongOrNull() ?: return@get val roomId = call.parameters["id"]?.toLongOrNull() ?: return@get
val editRoom = RoomRepository.get(roomId) ?: return@get val editRoom = RoomRepository.get(roomId) ?: return@get
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.ROOM active = MenuTemplate.Tab.ROOM
@ -273,7 +275,7 @@ fun Route.room() {
get("/room/new") { get("/room/new") {
authenticateOrRedirect(Permission.ROOM) { user -> authenticateOrRedirect(Permission.ROOM) { user ->
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.ROOM active = MenuTemplate.Tab.ROOM

7
src/jvmMain/kotlin/de/kif/backend/route/Track.kt
View file

@ -6,6 +6,7 @@ import de.kif.backend.repository.TrackRepository
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.TableTemplate import de.kif.backend.view.TableTemplate
import de.kif.backend.view.respondMain
import de.kif.common.Search import de.kif.common.Search
import de.kif.common.model.Color import de.kif.common.model.Color
import de.kif.common.model.Permission import de.kif.common.model.Permission
@ -88,7 +89,7 @@ fun Route.track() {
authenticateOrRedirect(Permission.WORK_GROUP) { user -> authenticateOrRedirect(Permission.WORK_GROUP) { user ->
val search = call.parameters["search"] ?: "" val search = call.parameters["search"] ?: ""
val list = TrackRepository.all() val list = TrackRepository.all()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP
@ -148,7 +149,7 @@ fun Route.track() {
authenticateOrRedirect(Permission.WORK_GROUP) { user -> authenticateOrRedirect(Permission.WORK_GROUP) { user ->
val trackId = call.parameters["id"]?.toLongOrNull() ?: return@get val trackId = call.parameters["id"]?.toLongOrNull() ?: return@get
val editTrack = TrackRepository.get(trackId) ?: return@get val editTrack = TrackRepository.get(trackId) ?: return@get
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP
@ -217,7 +218,7 @@ fun Route.track() {
get("/track/new") { get("/track/new") {
authenticateOrRedirect(Permission.WORK_GROUP) { user -> authenticateOrRedirect(Permission.WORK_GROUP) { user ->
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP

7
src/jvmMain/kotlin/de/kif/backend/route/User.kt
View file

@ -7,6 +7,7 @@ import de.kif.backend.repository.UserRepository
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.TableTemplate import de.kif.backend.view.TableTemplate
import de.kif.backend.view.respondMain
import de.kif.common.Search import de.kif.common.Search
import de.kif.common.model.Permission import de.kif.common.model.Permission
import de.kif.common.model.User import de.kif.common.model.User
@ -31,7 +32,7 @@ fun Route.user() {
authenticateOrRedirect(Permission.USER) { user -> authenticateOrRedirect(Permission.USER) { user ->
val search = call.parameters["search"] ?: "" val search = call.parameters["search"] ?: ""
val list = UserRepository.all() val list = UserRepository.all()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.USER active = MenuTemplate.Tab.USER
@ -90,7 +91,7 @@ fun Route.user() {
authenticateOrRedirect(Permission.USER) { user -> authenticateOrRedirect(Permission.USER) { user ->
val userId = call.parameters["id"]?.toLongOrNull() ?: return@get val userId = call.parameters["id"]?.toLongOrNull() ?: return@get
val editUser = UserRepository.get(userId) ?: return@get val editUser = UserRepository.get(userId) ?: return@get
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.USER active = MenuTemplate.Tab.USER
@ -183,7 +184,7 @@ fun Route.user() {
get("/user/new") { get("/user/new") {
authenticateOrRedirect(Permission.USER) { user -> authenticateOrRedirect(Permission.USER) { user ->
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.USER active = MenuTemplate.Tab.USER

7
src/jvmMain/kotlin/de/kif/backend/route/WorkGroup.kt
View file

@ -6,6 +6,7 @@ import de.kif.backend.repository.WorkGroupRepository
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import de.kif.backend.view.MenuTemplate import de.kif.backend.view.MenuTemplate
import de.kif.backend.view.TableTemplate import de.kif.backend.view.TableTemplate
import de.kif.backend.view.respondMain
import de.kif.common.Search import de.kif.common.Search
import de.kif.common.model.* import de.kif.common.model.*
import io.ktor.application.call import io.ktor.application.call
@ -27,7 +28,7 @@ fun Route.workGroup() {
authenticateOrRedirect(Permission.WORK_GROUP) { user -> authenticateOrRedirect(Permission.WORK_GROUP) { user ->
val search = call.parameters["search"] ?: "" val search = call.parameters["search"] ?: ""
val list = WorkGroupRepository.all() val list = WorkGroupRepository.all()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP
@ -164,7 +165,7 @@ fun Route.workGroup() {
WorkGroupRepository.get(it)!! WorkGroupRepository.get(it)!!
} }
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP
@ -527,7 +528,7 @@ fun Route.workGroup() {
get("/workgroup/new") { get("/workgroup/new") {
authenticateOrRedirect(Permission.WORK_GROUP) { user -> authenticateOrRedirect(Permission.WORK_GROUP) { user ->
val tracks = TrackRepository.all() val tracks = TrackRepository.all()
call.respondHtmlTemplate(MainTemplate()) { respondMain {
menuTemplate { menuTemplate {
this.user = user this.user = user
active = MenuTemplate.Tab.WORK_GROUP active = MenuTemplate.Tab.WORK_GROUP

61
src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt
View file

@ -1,13 +1,15 @@
package de.kif.backend.view package de.kif.backend.view
import de.kif.backend.Resources import de.kif.backend.Resources
import io.ktor.html.Placeholder import io.ktor.application.ApplicationCall
import io.ktor.html.Template import io.ktor.application.call
import io.ktor.html.TemplatePlaceholder import io.ktor.html.*
import io.ktor.html.insert import io.ktor.request.path
import io.ktor.response.respondRedirect
import io.ktor.util.pipeline.PipelineContext
import kotlinx.html.* import kotlinx.html.*
class MainTemplate : Template<HTML> { class MainTemplate(private val theme: Theme) : Template<HTML> {
val content = Placeholder<HtmlBlockTag>() val content = Placeholder<HtmlBlockTag>()
val menuTemplate = TemplatePlaceholder<MenuTemplate>() val menuTemplate = TemplatePlaceholder<MenuTemplate>()
@ -27,6 +29,15 @@ class MainTemplate : Template<HTML> {
) )
link(href = "/static/style/style.css", type = LinkType.textCss, rel = LinkRel.stylesheet) link(href = "/static/style/style.css", type = LinkType.textCss, rel = LinkRel.stylesheet)
when (theme) {
Theme.LIGHT -> {
// Ignore
}
Theme.DARK -> {
link(href = "/static/style/dark.css", type = LinkType.textCss, rel = LinkRel.stylesheet)
}
}
script(src = "/static/require.min.js") {} script(src = "/static/require.min.js") {}
script { script {
@ -43,6 +54,46 @@ class MainTemplate : Template<HTML> {
insert(content) insert(content)
} }
} }
div("footer") {
div("container") {
div("footer-credit") {
}
div("footer-theme") {
for (it in Theme.values()) {
val name = it.name.toLowerCase()
a("?theme=$name", classes = if (theme == it) "selected" else "") {
id = "theme-$name"
+name.capitalize()
} }
} }
} }
}
}
}
}
}
enum class Theme {
LIGHT, DARK
}
private fun String?.toTheme() = this?.toUpperCase()?.let { str ->
Theme.values().find { str == it.name }
} ?: Theme.LIGHT
suspend fun PipelineContext<Unit, ApplicationCall>.respondMain(body: MainTemplate.() -> Unit) {
val param = call.request.queryParameters["theme"]
if (param != null) {
call.response.cookies.append("theme", param.toTheme().name.toLowerCase())
call.respondRedirect(call.request.path())
} else {
call.respondHtmlTemplate(
MainTemplate(
call.request.cookies["theme"].toTheme()
),
body = body
)
}
}