jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

frontend update to tabler beta 19 (#4029)

Browse Source
This commit is contained in:
Kevin Papst
2023-05-15 19:10:00 +02:00
committed by GitHub
parent 43bd7bf1ab
commit 04422f3530
63 changed files with 235 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/app.js
View File

@@ -1,5 +1,5 @@
require('./sass/app.scss');
require('./sass/_app.scss');
// ------ Kimai itself ------
require('./js/KimaiWebLoader.js');

2
assets/export-pdf.js
View File

@@ -1,2 +1,2 @@
require('./sass/export-pdf.scss');
require('./sass/_export-pdf.scss');

2
assets/invoice-pdf.js
View File

@@ -1,2 +1,2 @@
require('./sass/invoice-pdf.scss');
require('./sass/_invoice-pdf.scss');

2
assets/invoice.js
View File

@@ -1,2 +1,2 @@
require('./sass/invoice.scss');
require('./sass/_invoice.scss');

2
assets/js/plugins/KimaiAlert.js
View File

@@ -194,7 +194,7 @@ export default class KimaiAlert extends KimaiPlugin {
<div class="toast-body">
` + icon + ' ' + message + `
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="` + translation.get('close') + `"></button>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="` + translation.get('close') + `"></button>
</div>
</div>`;

37
assets/sass/_app.scss Normal file
View File

@@ -0,0 +1,37 @@
/*
* This file is part of the Kimai time-tracking app.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
@import "bootstrap/scss/functions";
@import "@tabler/core/src/scss/variables";
@import "@tabler/core/src/scss/variables-dark";
@import "@tabler/core/src/scss/mixins";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "layout";
@import "error-page";
@import "print";
@import "content";
@import "loading-spinner";
@import "tables";
@import "calendar";
@import "ticktac";
@import "selectpicker";
@import "forms";
@import "modal";
@import "progressbar";
@import "avatar";
@import "theme-dark";
@import "pages";
@import "tabler-fixes";
@import "help";
@import "rtl";

0
assets/sass/export-pdf.scss → assets/sass/_export-pdf.scss
View File

0
assets/sass/invoice-pdf.scss → assets/sass/_invoice-pdf.scss
View File

4
assets/sass/invoice.scss → assets/sass/_invoice.scss
View File

@@ -7,15 +7,17 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/card";
@import "bootstrap/scss/utilities";
body {
font-family: $font-family-sans-serif;

26
assets/sass/app.scss
View File

@@ -1,26 +0,0 @@
/*
* This file is part of the Kimai time-tracking app.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
@import 'variables';
@import 'layout';
@import 'error-page';
@import 'print';
@import 'content';
@import 'loading-spinner';
@import 'tables';
@import 'calendar';
@import 'ticktac';
@import 'selectpicker';
@import 'forms';
@import 'modal';
@import 'progressbar';
@import 'avatar';
@import 'theme-dark';
@import 'pages';
@import 'tabler-fixes';
@import 'help';
@import 'rtl';

19
assets/sass/avatar.scss
View File

@@ -3,18 +3,18 @@ $avatar-base-size: 30;
.initials {
font-weight: bold;
font-size: ceil($avatar-base-size / 2 - 2)+px;
font-size: ceil(calc($avatar-base-size / 2 - 2))+px;
}
$avatarSizes: "xs" .75, "sm" 1.25, "md" 1.5, "lg" 2;
@each $avatarSizeName, $avatarBaseSize in $avatarSizes {
.avatar-#{$avatarSizeName} {
width: ceil($avatar-base-size * $avatarBaseSize)+px;
height: ceil($avatar-base-size * $avatarBaseSize)+px;
width: ceil(calc($avatar-base-size * $avatarBaseSize))+px;
height: ceil(calc($avatar-base-size * $avatarBaseSize))+px;
.initials {
font-size: ceil($avatar-base-size * $avatarBaseSize / 2 - 2)+px;
font-size: ceil(calc($avatar-base-size * $avatarBaseSize / 2 - 2))+px;
}
}
}
@@ -23,10 +23,10 @@ $avatarSizes: "xs" .75, "sm" 1.25, "md" 1.5, "lg" 2;
border-radius: 50%;
border: 3px solid #fff;
.avatar {
width: ceil($avatar-base-size * 2.75)+px;
height: ceil($avatar-base-size * 2.75)+px;
width: ceil(calc($avatar-base-size * 2.75))+px;
height: ceil(calc($avatar-base-size * 2.75))+px;
.initials {
font-size: ceil($avatar-base-size * 2.75 / 2 - 2)+px;
font-size: ceil(calc($avatar-base-size * 2.75 / 2 - 2))+px;
}
}
}
@@ -39,3 +39,8 @@ table.dataTable.table > tbody > tr > td {
}
}
}
/* decreases the margin between avatars, see https://github.com/tabler/tabler/issues/1567 */
.avatar-list-stacked .avatar {
margin-right: calc(var(--tblr-avatar-size)*-.1)!important;
}

10
assets/sass/content.scss
View File

@@ -5,6 +5,11 @@
* file that was distributed with this source code.
*/
/* used in security screens and other full-size pages */
.page-center {
justify-content: center;
}
/* make sure that elements can be hidden without taking space (eg. hidden modals like the search or column visibility) */
.hidden-no-space {
margin: 0;
@@ -33,11 +38,6 @@ td {
}
}
.label-gray {
background-color: $gray-lte;
color: #666;
}
.open-edit {
cursor: pointer;
}

19
assets/sass/fontawesome.scss vendored
View File

@@ -1,19 +0,0 @@
/*
* This file is part of the Kimai time-tracking app.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/brands";
/* all icon-buttons with fontawesome icons */
.btn-icon i.icon {
font-size: 16px;
color: $text-muted;
padding-top: 2px;
}

5
assets/sass/layout.scss
View File

@@ -38,3 +38,8 @@ h1.navbar-brand a {
/* bootstrap thead.sticky-top has z-index 1020 and the reporting form dropdowns hide behind that */
z-index: 1021;
}
/* reduce the default font size for the brand header */
.navbar {
--tblr-navbar-brand-font-size: 1rem;
}

2
assets/sass/loading-spinner.scss
View File

@@ -11,7 +11,7 @@
left: 0;
width: 100%;
height: 100%;
z-index: 50;
z-index: 1021;
background: rgba(255, 255, 255, 0.7);
> .fas {
position: absolute;

15
assets/sass/selectpicker.scss
View File

@@ -1,23 +1,22 @@
@import "tom-select/dist/scss/tom-select.bootstrap5";
/* bootstrap thead.sticky-top has z-index 1020 and tomselect dropdowns often hide behind that */
.ts-dropdown {
z-index: 1021;
}
/* can be removed if no error is reported. it is unknown why this was added */
/*
.ts-control {
> input {
min-width: unset;
}
}
*/
.ts-dropdown {
.optgroup-header {
background-color: #eee;
color: #000;
font-weight: 600;
}
[data-selectable].option {
padding-left: 20px;
.optgroup {
[data-selectable].option {
padding-left: 20px;
}
}
}

2
assets/sass/tabler-fixes.scss
View File

@@ -1,5 +1,3 @@
@import "@tabler/core/src/scss/variables";
/* fix for vertical labels in date-time pickers, if they are used in half-column forms, e.g. "create tasks" or "create expenses" */
fieldset legend.col-form-label {
padding-top: 0;

24
assets/sass/tables.scss
View File

@@ -4,7 +4,6 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
@import "variables";
table.dataTable {
clear: both;
@@ -93,7 +92,7 @@ table.dataTable {
&.summary td {
font-weight: bold;
border: 0;
background-color: var(--tblr-table-striped-bg);
background-color: var(--tblr-bg-surface-secondary);
}
th.multiCheckbox {
width: 15px;
@@ -118,30 +117,17 @@ table.dataTable {
padding: .3em .6em .3em;
line-height: 24px;
}
span.label-activity,
span.label-project,
span.label-customer {
a {
color: unset;
padding-bottom: 2px;
border-bottom: 1px dotted $gray-lte;
&:hover {
border-bottom: 1px dotted darken($gray-lte, 20);
}
}
}
span.label-invisible {
opacity: 0.8;
opacity: 0.6;
}
}
th.weekend,
td.weekend {
background-color: #f9f9f9;
background-color: var(--tblr-bg-surface-secondary);
}
/* order is important, "today” should overwrite "weekend" therefor later in the file */
th.today,
td.today {
background-color: $highlight-today;
th.today {
background-color: var(--tblr-highlight-bg);
}
th.total,
td.total {

49
assets/sass/theme-dark.scss
View File

@@ -1,48 +1,7 @@
@include dark-mode {
.form-check-input {
border-color: $input-border-color;
}
/* selectpicker.scss / Tom Select */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-select.single.input-active .ts-control {
color: $dark-mode-text;
}
.ts-dropdown {
background-color: $dark-mode-lighten;
color: $dark-mode-text;
}
.ts-control {
> input {
min-width: unset;
color: $dark-mode-text;
}
.item {
background-color: $dark;
color: $dark-mode-text;
}
}
.optgroup-header {
background-color: $dropdown-dark-bg;
color: $dark-mode-text;
}
@include color-mode(dark, true) {
table.dataTable {
th.weekend, td.weekend {
background-color: $dark-mode-weekend;
color: $dark-mode-text;
}
/* must be defined after weekend, to overwrite it */
th.today, td.today {
background-color: $dark-mode-today;
color: $dark-mode-text;
}
tr {
&.summary td {
background-color: $dark-mode-darken;
}
th.today {
color: var(--tblr-muted);
}
}
@@ -50,7 +9,7 @@
background: rgba(0, 0, 0, 0.5);
> .fas {
color: $dark-mode-text;
color: var(--tblr-white);
}
}
}

2
assets/sass/ticktac.scss
View File

@@ -37,8 +37,6 @@
@include media-breakpoint-down(lg) {
aside.navbar .btn-outline-white,
header.navbar .btn-outline-white {
background-color: var(--tblr-body-color);
border-color: hsla(0,0%,100%,.2);
color: hsla(0,0%,100%,.7);
}
}

30
assets/sass/variables.scss
View File

@@ -1,30 +0,0 @@
/*
* This file is part of the Kimai time-tracking app.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "@tabler/core/src/scss/variables";
@import "@tabler/core/src/scss/mixins";
/* For highlighting rows, fieldsets and so on */
$highlight-bg: #f5f5f5;
$highlight-today: #fcf8e3;
$red: #dd4b39;
$green: #00a65a;
$yellow: #f0ad4e;
$blue: #0073b7;
$gray-lte: #d2d6de;
$kimai-default: $gray-lte;
$box-border-radius: 3px;
$dark-mode-today: var(--tblr-blue);
$dark-mode-weekend: lighten($dark, 5%) !default;