Skip to content

Commit

Permalink
Merge pull request #33 from phillip-kruger/theme
Browse files Browse the repository at this point in the history
Added Theme
  • Loading branch information
phillip-kruger authored Apr 17, 2024
2 parents b8ab17c + 4ec5f57 commit a607f0b
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 56 deletions.
23 changes: 9 additions & 14 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<quarkus.platform.artifact-id>quarkus-bom</quarkus.platform.artifact-id>
<quarkus.platform.group-id>io.quarkus.platform</quarkus.platform.group-id>
<quarkus.platform.version>3.5.3</quarkus.platform.version>
<quarkus.platform.version>3.9.3</quarkus.platform.version>
<skipITs>true</skipITs>
<surefire-plugin.version>3.1.2</surefire-plugin.version>
<failsafe-plugin.version>2.22.2</failsafe-plugin.version>
Expand All @@ -35,7 +35,11 @@
<dependencies>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-resteasy</artifactId>
<artifactId>quarkus-rest</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-rest-jsonb</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
Expand Down Expand Up @@ -65,33 +69,24 @@
<groupId>io.quarkus</groupId>
<artifactId>quarkus-hibernate-orm-panache</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-resteasy-jsonb</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-info</artifactId>
</dependency>

<!-- For the UI -->
<dependency>
<groupId>io.quarkiverse.quteserverpages</groupId>
<artifactId>quarkus-qute-server-pages</artifactId>
<version>2.1.1.Final</version>
</dependency>
<dependency>
<groupId>io.quarkiverse.web-bundler</groupId>
<artifactId>quarkus-web-bundler</artifactId>
<version>1.1.5</version>
<version>1.4.0</version>
</dependency>
<dependency>
<groupId>org.mvnpm.at.mvnpm</groupId>
<artifactId>vaadin-webcomponents</artifactId>
<version>24.2.1</version>
<version>24.3.10</version>
<scope>provided</scope>
</dependency>


<!-- Testing -->
<dependency>
<groupId>io.quarkus</groupId>
Expand Down
5 changes: 1 addition & 4 deletions src/main/resources/application.properties
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Hibernate
quarkus.hibernate-orm.database.generation=drop-and-create
quarkus.hibernate-orm.log.sql=true
#quarkus.hibernate-orm.log.sql=true

# OpenAPI
quarkus.smallrye-openapi.info-title=TODOS API
Expand All @@ -15,6 +15,3 @@ quarkus.smallrye-openapi.info-contact-url=http://todos.com/contact
quarkus.smallrye-openapi.info-license-name=Apache 2.0
quarkus.smallrye-openapi.info-license-url=https://www.apache.org/licenses/LICENSE-2.0.html
quarkus.swagger-ui.always-include=true

# UI
quarkus.qsp.root-path=/
31 changes: 13 additions & 18 deletions src/main/resources/web/app/todos-cards.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,22 @@ class TodosCards extends LitElement {
margin: 8px 0;
border: 0px solid white;
font-size: 24px;
color: #4d4d4d;
color: var(--lumo-body-text-color);
outline: none;
background: var(--lumo-contrast-10pct);
width: 450px;
}
input::placeholder {
font-style: italic;
color: #d9d9d9;
color: var(--lumo-contrast-70pct);
}
.cards {
display: flex;
flex-direction: column;
background: white;
border: 1px solid #e6e6e6;
-webkit-box-shadow: 5px 5px 15px 5px #C2C2C2;
box-shadow: 5px 5px 15px 5px #C2C2C2;
border: 1px solid var(--lumo-contrast-20pct);
-webkit-box-shadow: 5px 5px 15px 5px var(--lumo-contrast-10pct);
box-shadow: 5px 5px 15px 5px var(--lumo-contrast-10pct);
min-width: 550px;
}
.items {
Expand All @@ -50,16 +51,15 @@ class TodosCards extends LitElement {
}
hr {
border-top: 1px solid #e6e6e6;
border-bottom: none;
width: 100%;
}
.select-all-icon {
color: grey;
opacity: 0.1;
color: var(--lumo-contrast-70pct);
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.cards-footer {
Expand All @@ -68,28 +68,23 @@ class TodosCards extends LitElement {
padding-bottom: 15px;
font-size: 14px;
text-align: center;
color: grey;
color: var(--lumo-contrast-50pct);
}
.filter {
border: 1px solid white;
border-radius: 3px;
padding: 3px;
}
.selected-filter {
border: 1px solid #ebd7d7;
border-radius: 3px;
background: var(--lumo-contrast-10pct);
padding: 3px;
}
.filter:hover {
border: 1px solid #ebd7d7;
border-radius: 3px;
padding: 3px;
background: var(--lumo-contrast-10pct);
cursor: pointer;
}
.clear-completed:hover {
border-bottom: 1px solid #ebd7d7;
background: var(--lumo-contrast-10pct);
cursor: pointer;
}
.hide {
Expand Down
6 changes: 1 addition & 5 deletions src/main/resources/web/app/todos-footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@ import '@vaadin/horizontal-layout';

class TodosFooter extends LitElement {
static styles = css`
footer {
border-top: 1px solid #e6e6e6;
}
footer, footer a {
color: #bfbfbf;
color: var(--lumo-contrast-70pct);
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
`;

Expand Down
42 changes: 38 additions & 4 deletions src/main/resources/web/app/todos-header.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import {LitElement, css, html} from 'lit';
import '@vaadin/icon';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import '@vaadin/icons';

class TodosHeader extends LitElement {
static styles = css`
Expand All @@ -9,7 +12,6 @@ class TodosHeader extends LitElement {
line-height: 100px;
height: 100px;
font-weight: 100;
color: rgba(175, 47, 47, 0.15);
padding-top: 20px;
padding-bottom: 20px;
}
Expand All @@ -23,9 +25,41 @@ class TodosHeader extends LitElement {
width: 64px;
height: 64px;
}
.theme-switch {
height: 25px;
position: absolute;
right: 10px;
cursor: pointer;
}
`;
render() {
return html`<img class="logo" src="static/quarkus_icon.png"> <span class="title">todos</span>`;
}
static properties = {
_nextTheme: {state: true},
_currentTheme: {state: true},
}

constructor() {
super();
this._currentTheme = "dark";
this._nextTheme = "light";
}

render() {
return html`<img class="logo" src="static/quarkus_icon_${this._currentTheme}.png"> <span class="title">todos</span>
<vaadin-icon title="Switch to ${this._nextTheme} theme" class="theme-switch" icon="vaadin:adjust" @click="${this._switchTheme}"></vaadin-icon>
`;
}

_switchTheme(){
const body = document.body;
if (body.getAttribute('theme') === 'light') {
this._nextTheme = "light";
this._currentTheme = "dark";
body.setAttribute('theme', 'dark');
} else {
this._nextTheme = "dark";
this._currentTheme = "light";
body.setAttribute('theme', 'light');
}
}
}
customElements.define('todos-header', TodosHeader);
12 changes: 4 additions & 8 deletions src/main/resources/web/app/todos-task.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,26 @@ class TodosTask extends LitElement {
display: flex;
justify-content:space-between;
font-size: 24px;
color: #4d4d4d;
font-weight: 300;
width: 100%;
gap: 20px;
}
.done-icon {
color: green;
opacity: 0.2;
color: var(--lumo-success-color-50pct);
cursor: pointer;
padding-left: 5px;
}
.outstanding-icon {
color: grey;
opacity: 0.1;
color: var(--lumo-contrast-30pct);
cursor: pointer;
padding-left: 5px;
}
.done-text {
text-decoration: line-through;
color: #d9d9d9;
color: var(--lumo-contrast-50pct);
}
.delete-icon {
color: red;
opacity: 0.1;
color: var(--lumo-error-color);
cursor: pointer;
padding-right: 5px;
}
Expand Down
90 changes: 88 additions & 2 deletions src/main/resources/web/app/todos.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,96 @@
body[theme~="dark"] {
--lumo-primary-color-50pct: hsla(211, 63%, 54%, 0.5);
--lumo-body-text-color: hsla(214, 96%, 96%, 0.9);
--lumo-tertiary-text-color: hsla(214, 78%, 88%, 0.5);
--lumo-base-color: hsla(210, 10%, 23%, 1.0);
--lumo-error-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-contrast-30pct: hsla(214, 69%, 84%, 0.32);
--lumo-contrast-80pct: hsla(214, 91%, 94%, 0.8);
--lumo-contrast-70pct: hsla(214, 87%, 92%, 0.7);
--lumo-contrast-20pct: hsla(214, 64%, 82%, 0.23);
--lumo-primary-color: hsla(211, 63%, 54%, 1.0);
--lumo-error-color: hsla(3, 90%, 63%, 1.0);
--lumo-disabled-text-color: hsla(214, 69%, 84%, 0.32);
--lumo-contrast-90pct: hsla(214, 96%, 96%, 0.9);
--lumo-contrast-60pct: hsla(214, 82%, 90%, 0.6);
--lumo-warning-text-color: hsla(30, 100%, 67%, 1.0);
--lumo-contrast-10pct: hsla(214, 60%, 80%, 0.14);
--lumo-primary-text-color: hsla(211, 63%, 54%, 1.0);
--lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);
--lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
--lumo-primary-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);
--lumo-success-color: hsla(145, 65%, 42%, 1.0);
--lumo-warning-color: hsla(30, 100%, 50%, 1.0);
--lumo-success-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-contrast-50pct: hsla(214, 78%, 88%, 0.5);
--lumo-warning-color-50pct: hsla(30, 100%, 50%, 0.5);
--lumo-header-text-color: hsla(214, 100%, 98%, 1.0);
--quarkus-blue: hsla(211, 63%, 54%, 1.0);
--lumo-warning-color-10pct: hsla(30, 100%, 50%, 0.1);
--lumo-contrast-40pct: hsla(214, 73%, 86%, 0.41);
--lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);
--lumo-warning-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-secondary-text-color: hsla(214, 87%, 92%, 0.7);
--lumo-error-text-color: hsla(3, 100%, 67%, 1.0);
--quarkus-red: hsla(343, 100%, 50%, 1.0);
--quarkus-center: hsla(0, 0%, 90%, 1.0);
--lumo-contrast-5pct: hsla(214, 65%, 85%, 0.06);
--lumo-contrast: hsla(214, 100%, 98%, 1.0);
--lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);
--lumo-success-text-color: hsla(145, 85%, 47%, 1.0);
}

body[theme~="light"] {
--lumo-primary-color-50pct: hsla(211, 63%, 54%, 0.76);
--lumo-body-text-color: hsla(214, 40%, 16%, 0.94);
--lumo-tertiary-text-color: hsla(214, 45%, 20%, 0.52);
--lumo-base-color: hsla(0, 100%, 100%, 1.0);
--lumo-error-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-contrast-30pct: hsla(214, 50%, 22%, 0.26);
--lumo-contrast-80pct: hsla(214, 41%, 17%, 0.83);
--lumo-contrast-70pct: hsla(214, 42%, 18%, 0.69);
--lumo-contrast-20pct: hsla(214, 53%, 23%, 0.16);
--lumo-primary-color: hsla(211, 63%, 54%, 1.0);
--lumo-error-color: hsla(3, 85%, 48%, 1.0);
--lumo-disabled-text-color: hsla(214, 50%, 22%, 0.26);
--lumo-contrast-90pct: hsla(214, 40%, 16%, 0.94);
--lumo-contrast-60pct: hsla(214, 43%, 19%, 0.6);
--lumo-warning-text-color: hsla(30, 89%, 42%, 1.0);
--lumo-contrast-10pct: hsla(214, 57%, 24%, 0.1);
--lumo-primary-text-color: hsla(211, 63%, 54%, 1.0);
--lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
--lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
--lumo-primary-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
--lumo-success-color: hsla(145, 72%, 30%, 1.0);
--lumo-warning-color: hsla(30, 100%, 50%, 1.0);
--lumo-success-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-contrast-50pct: hsla(214, 45%, 20%, 0.52);
--lumo-warning-color-50pct: hsla(30, 100%, 50%, 0.5);
--lumo-header-text-color: hsla(214, 35%, 15%, 1.0);
--quarkus-blue: hsla(211, 63%, 54%, 1.0);
--lumo-warning-color-10pct: hsla(30, 100%, 50%, 0.1);
--lumo-contrast-40pct: hsla(214, 47%, 21%, 0.38);
--lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
--lumo-warning-contrast-color: hsla(0, 100%, 100%, 1.0);
--lumo-secondary-text-color: hsla(214, 42%, 18%, 0.69);
--lumo-error-text-color: hsla(3, 89%, 42%, 1.0);
--quarkus-red: hsla(343, 100%, 50%, 1.0);
--quarkus-center: hsla(180, 36%, 5%, 1.0);
--lumo-contrast-5pct: hsla(214, 61%, 25%, 0.05);
--lumo-contrast: hsla(214, 35%, 15%, 1.0);
--lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
--lumo-success-text-color: hsla(145, 85%, 25%, 1.0);
}
body {
background: #f5f5f5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;

background: var(--lumo-base-color);
color: var(--lumo-body-text-color);
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{#bundle /}
<title>Quarkus todos</title>
</head>
<body>
<body theme="dark">
<todos-app></todos-app>
</body>
</html>
Binary file removed src/main/resources/web/static/quarkus_icon.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a607f0b

Please sign in to comment.