mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
Update switch dark light
This commit is contained in:
AlphaX-Projects
GitHub
parent
5304d625ee
commit
3faf1e6f79
4
qortal-ui-core/assets/js/svg.js
Normal file
4
qortal-ui-core/assets/js/svg.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { html } from 'lit'
|
||||
|
||||
export const svgSun = html`<svg height="64px" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd;width: 32px;" version="1.1" viewBox="0 0 64 64" width="64px" xml:space="preserve"><defs><style type="text/css">.str0 {stroke:#FFC106;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:22.9256} .fil1 {fill:none} .fil0 {fill:#FFC106}</style></defs><g id="Layer_x0020_1"><g id="_866321920"><circle class="fil0" r="22.97" transform="matrix(0.543121 0.145529 -0.145529 0.543121 32.0002 31.9993)"/><path class="fil1 str0" d="M32 12.4c0,1.52 0,2 0,2m-9.8 0.63c0.76,1.32 1,1.73 1,1.73m-8.17 5.44c1.32,0.76 1.73,1 1.73,1m-4.36 8.8c1.53,0 2,0 2,0m0.63 9.8c1.32,-0.76 1.73,-1 1.73,-1m5.44 8.17c0.76,-1.32 1,-1.73 1,-1.73m8.8 4.36c0,-1.53 0,-2 0,-2m9.8 -0.63c-0.76,-1.32 -1,-1.73 -1,-1.73m8.17 -5.44c-1.32,-0.76 -1.73,-1 -1.73,-1m4.36 -8.8c-1.53,0 -2,0 -2,0m-0.63 -9.8c-1.32,0.76 -1.73,1 -1.73,1m-5.44 -8.17c-0.76,1.32 -1,1.73 -1,1.73"/></g></g></svg>`;
|
||||
export const svgMoon = html `<svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"><g id="Layer_1"/><g id="moon_x5F_fill"><g><path d="M24.633,22.184c-8.188,0-14.82-6.637-14.82-14.82c0-2.695,0.773-5.188,2.031-7.363 C5.02,1.969,0,8.188,0,15.645C0,24.676,7.32,32,16.352,32c7.457,0,13.68-5.023,15.648-11.844 C29.82,21.41,27.328,22.184,24.633,22.184z" style="fill:#4E4E50;"/></g></g></svg>`;
|
||||
39
qortal-ui-core/font/switch-theme.css
Normal file
39
qortal-ui-core/font/switch-theme.css
Normal file
@ -0,0 +1,39 @@
|
||||
html {
|
||||
--white: #ffffff;
|
||||
--black: #080808;
|
||||
--gray: #c8c8c8;
|
||||
--plugback: #ffffff;
|
||||
--border: #d0d6de;
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
--tradeborder: #666666;
|
||||
--tradehave: #555555;
|
||||
--txtfieldborder: #666666;
|
||||
--txtfieldhoverborder: #00000;
|
||||
--relaynodetxt: #646464;
|
||||
--chatmenuhover: #eeeeee;
|
||||
--chatmenuactive: #ebebeb;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
--white: #36393f;
|
||||
--black: #f8f8f8;
|
||||
--gray: #d8d8d8;
|
||||
--plugback: #36393f;
|
||||
--border: #fcfcfc;
|
||||
--border2: #fdfdfd;
|
||||
--copybutton: #d0d6de;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #e8ebf0;
|
||||
--tradeborder: #cccccc;
|
||||
--tradehave: #dddddd;
|
||||
--txtfieldborder: #cccccc;
|
||||
--txtfieldhoverborder: #ffffff;
|
||||
--relaynodetxt: #d4d4d4;
|
||||
--chatmenuhover: #666666;
|
||||
--chatmenuactive: #6b6b6b;
|
||||
}
|
||||
@ -58,8 +58,8 @@
|
||||
"@rollup/plugin-commonjs": "^21.0.2",
|
||||
"@rollup/plugin-node-resolve": "^13.1.3",
|
||||
"@rollup/plugin-replace": "^4.0.0",
|
||||
"@vaadin/grid": "^23.0.0",
|
||||
"@vaadin/password-field": "^23.0.0",
|
||||
"@vaadin/grid": "^23.0.1",
|
||||
"@vaadin/password-field": "^23.0.1",
|
||||
"asmcrypto.js": "^2.3.2",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"epml": "^0.3.3",
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/favicon/manifest.json">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileColor" content="var(--white)">
|
||||
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="theme-color" content="var(--white)">
|
||||
|
||||
<style>
|
||||
html {
|
||||
@ -55,12 +55,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #eee;
|
||||
background: background: var(--plugback);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/build/styles.bundle.css">
|
||||
<link rel="stylesheet" href="/font/material-icons.css">
|
||||
<link rel="stylesheet" href="/font/switch-theme.css">
|
||||
<title>Qortal</title>
|
||||
|
||||
|
||||
|
||||
@ -27,10 +27,12 @@ class AppInfo extends connect(store)(LitElement) {
|
||||
.normal {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
}
|
||||
|
||||
.normal-button {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-on-primary: white;
|
||||
}
|
||||
|
||||
mwc-button.normal-button {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-on-primary: white;
|
||||
@ -38,10 +40,12 @@ class AppInfo extends connect(store)(LitElement) {
|
||||
.test-net {
|
||||
--mdc-theme-primary: black;
|
||||
}
|
||||
|
||||
.test-net-button {
|
||||
--mdc-theme-primary: black;
|
||||
--mdc-theme-on-primary: white;
|
||||
}
|
||||
|
||||
mwc-button.test-net-button {
|
||||
--mdc-theme-primary: black;
|
||||
--mdc-theme-on-primary: white;
|
||||
@ -50,6 +54,7 @@ class AppInfo extends connect(store)(LitElement) {
|
||||
flex: 0 0 100px;
|
||||
padding:12px;
|
||||
border-top: 1px solid #eee;
|
||||
background: var(--white);
|
||||
}
|
||||
.info {
|
||||
margin: 0;
|
||||
@ -58,6 +63,7 @@ class AppInfo extends connect(store)(LitElement) {
|
||||
display: inline-block;
|
||||
width:100%;
|
||||
padding-bottom:8px;
|
||||
color: var(--black);
|
||||
}
|
||||
.blue {
|
||||
color: #03a9f4;
|
||||
@ -67,7 +73,7 @@ class AppInfo extends connect(store)(LitElement) {
|
||||
display: inline;
|
||||
}
|
||||
.black {
|
||||
color: black;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight:200;
|
||||
|
||||
@ -9,6 +9,7 @@ import './wallet-profile.js'
|
||||
import './app-info.js'
|
||||
import './sidenav-menu.js'
|
||||
import './show-plugin.js'
|
||||
import './qort-theme-toggle.js'
|
||||
|
||||
import '@material/mwc-drawer'
|
||||
|
||||
@ -27,47 +28,56 @@ class AppView extends connect(store)(LitElement) {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
--app-drawer-width: 260px;
|
||||
}
|
||||
app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) {
|
||||
display: none;
|
||||
}
|
||||
app-drawer {
|
||||
box-shadow: var(--shadow-2);
|
||||
background: var(--mdc-theme-surface);
|
||||
}
|
||||
app-header {
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
app-toolbar {
|
||||
background: var(--mdc-theme-surface);
|
||||
color: var(--mdc-theme-on-surface);
|
||||
}
|
||||
#sideBar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sideBarMenu{
|
||||
overflow-y: auto;
|
||||
flex: 1 1;
|
||||
}
|
||||
#sideBar::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
background-color: transparent;
|
||||
}
|
||||
:host {
|
||||
--app-drawer-width: 260px;
|
||||
}
|
||||
|
||||
#sideBar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sideBar::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
border-radius: 6px;
|
||||
border: 3px solid #333;
|
||||
}
|
||||
`
|
||||
app-drawer {
|
||||
box-shadow: var(--shadow-2);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
app-header {
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
border-top: 1px solid rgb(238, 238, 238);
|
||||
}
|
||||
|
||||
#sideBar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.sideBarMenu{
|
||||
overflow-y: auto;
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
#sideBar::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#sideBar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#sideBar::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
border-radius: 6px;
|
||||
border: 3px solid #333;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
|
||||
@ -94,6 +104,8 @@ class AppView extends connect(store)(LitElement) {
|
||||
<img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
|
||||
</span>
|
||||
</div>
|
||||
<qort-theme-toggle></qort-theme-toggle>
|
||||
<div> </div>
|
||||
<div style="display:inline">
|
||||
<paper-icon-button icon="icons:settings" @click=${ () => this.openSettings()} title="Settings" ></paper-icon-button>
|
||||
</div>
|
||||
|
||||
134
qortal-ui-core/src/components/qort-theme-toggle.js
Normal file
134
qortal-ui-core/src/components/qort-theme-toggle.js
Normal file
@ -0,0 +1,134 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { svgSun, svgMoon } from '../../assets/js/svg.js'
|
||||
|
||||
class QortThemeToggle extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
theme: {
|
||||
type: String,
|
||||
reflect: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light';
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 32px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--graylight);
|
||||
transition: all .4s ease;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
background: var(--graylight);
|
||||
border: 2px solid var(--gray);
|
||||
border-radius: 50%;
|
||||
transition: transform 300ms ease;
|
||||
}
|
||||
|
||||
:host([theme="light"]) .icon {
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
input:checked ~ .icon,
|
||||
:host([theme="dark"]) .icon {
|
||||
transform: translate(calc(100% - 18px), -50%);
|
||||
}
|
||||
|
||||
.moon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.moon svg {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
:host([theme="dark"]) .sun {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([theme="dark"]) .moon {
|
||||
display: inline-block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<input type="checkbox" @change=${() => this.toggleTheme()}/>
|
||||
<div class="slider"></div>
|
||||
<div class="icon">
|
||||
<span class="sun">${svgSun}</span>
|
||||
<span class="moon">${svgMoon}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.initTheme();
|
||||
}
|
||||
|
||||
|
||||
toggleTheme() {
|
||||
if (this.theme === 'light') {
|
||||
this.theme = 'dark';
|
||||
} else {
|
||||
this.theme = 'light';
|
||||
}
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('qort-theme-change', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: this.theme,
|
||||
}),
|
||||
);
|
||||
|
||||
window.localStorage.setItem('qortalTheme', this.theme);
|
||||
this.initTheme();
|
||||
}
|
||||
|
||||
initTheme() {
|
||||
document.querySelector('html').setAttribute('theme', this.theme);
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('qort-theme-toggle', QortThemeToggle);
|
||||
@ -20,11 +20,12 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
.mcd-menu {
|
||||
list-style: none;
|
||||
padding: 0px 0px;
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--white);
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li {
|
||||
position: relative;
|
||||
line-height: 48px;
|
||||
@ -32,17 +33,19 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
padding: 2px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mcd-menu li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
color: var(--mdc-theme-on-surface);
|
||||
color: var(--black);
|
||||
text-align: left;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #EEE;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li a mwc-icon {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
@ -65,6 +68,7 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
.mcd-menu li:hover > a mwc-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover a span {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
@ -74,12 +78,14 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
background: #f8f8f8;
|
||||
color: #515151;
|
||||
}
|
||||
|
||||
.mcd-menu li a.active {
|
||||
position: relative;
|
||||
color: #515151;
|
||||
background-color: #eee;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li a.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -123,6 +129,7 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
border-left: 4px solid #515151;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -133,6 +140,7 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
border-top: 5px solid transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover > ul,
|
||||
.mcd-menu li ul li:hover > ul {
|
||||
display: block;
|
||||
@ -149,17 +157,20 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
height: auto;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li ul li a mwc-icon {
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.mcd-menu li ul li ul {
|
||||
left: 230px;
|
||||
top: 0;
|
||||
border: 0;
|
||||
border-left: 4px solid #515151;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mcd-menu li ul li ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -170,6 +181,7 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
border-top: 5px solid transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li ul li:hover > ul {
|
||||
top: 0px;
|
||||
left: 200px;
|
||||
@ -186,10 +198,6 @@ class SidenavMenu extends connect(store)(LitElement) {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<ul class="mcd-menu">
|
||||
${this.urls.map(myPlugin => myPlugin.menus.length === 0 ? html`
|
||||
|
||||
@ -36,9 +36,11 @@ class WalletProfile extends connect(store)(LitElement) {
|
||||
#profileInMenu {
|
||||
padding: 12px;
|
||||
border-top: 1px solid rgb(238, 238, 238);
|
||||
background: rgb(255, 255, 255);
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
}
|
||||
#profileInMenu:hover {
|
||||
/* cursor:pointer; */
|
||||
}
|
||||
#accountIcon {
|
||||
font-size:48px;
|
||||
@ -63,7 +65,6 @@ class WalletProfile extends connect(store)(LitElement) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
margin:0;
|
||||
margin-top:8px;
|
||||
font-size:11px;
|
||||
|
||||
1
qortal-ui-core/src/redux/app/version.js
Normal file
1
qortal-ui-core/src/redux/app/version.js
Normal file
@ -0,0 +1 @@
|
||||
export const UI_VERSION = "1.7.4";
|
||||
Loading…
x
Reference in New Issue
Block a user