From bf55cb5faf49f737448d07f84fec1f13976e0946 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Mon, 12 Jun 2023 18:13:56 +0200 Subject: [PATCH] Design tab menu and hover menu button --- core/font/switch-theme.css | 6 + core/src/components/app-view.js | 13 +- core/src/components/show-plugin.js | 327 +++++++++++++++++------------ core/src/styles/switch-theme.css | 12 ++ 4 files changed, 217 insertions(+), 141 deletions(-) diff --git a/core/font/switch-theme.css b/core/font/switch-theme.css index 7e78709a..a6d1c8bc 100644 --- a/core/font/switch-theme.css +++ b/core/font/switch-theme.css @@ -60,6 +60,9 @@ html { --gif-button-row-bg: #eaeaef; --gif-button-row-color: #464040; --gif-collection-hover-bg: #eaeaefa3; + --app-background-1: #045de9; + --app-background-2: #09c6f9; + --app-icon: #ffffff; } html[theme="dark"] { @@ -124,4 +127,7 @@ html[theme="dark"] { --gif-button-row-bg: #82899c; --gif-button-row-color: #151212; --gif-collection-hover-bg: #ffffff26; + --app-background-1: #7f5a83; + --app-background-2: #0d324d; + --app-icon: #03a9f4; } \ No newline at end of file diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js index 435c735a..a8a5d3a4 100644 --- a/core/src/components/app-view.js +++ b/core/src/components/app-view.js @@ -119,9 +119,9 @@ class AppView extends connect(store)(LitElement) { return [ css` * { - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - --mdc-theme-error: rgb(255, 89, 89); + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --mdc-theme-error: rgb(255, 89, 89); --lumo-primary-text-color: rgb(0, 167, 245); --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); @@ -468,7 +468,6 @@ class AppView extends connect(store)(LitElement) { -
@@ -513,6 +512,12 @@ class AppView extends connect(store)(LitElement) { addTradeBotRoutes(parentEpml) parentEpml.imReady() + var drawerTog = this.shadowRoot.getElementById("mb") + + drawerTog.addEventListener('mouseover', function() { + drawerTog.click() + }) + this.getNodeType() const myAppNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js index b9e7e177..54c11bb3 100644 --- a/core/src/components/show-plugin.js +++ b/core/src/components/show-plugin.js @@ -6,13 +6,7 @@ import { addPluginRoutes } from '../plugins/addPluginRoutes.js' import { repeat } from 'lit/directives/repeat.js'; import ShortUniqueId from 'short-unique-id'; import { setNewTab } from '../redux/app/app-actions.js' -import '@vaadin/icon' -import '@vaadin/icons' - - -import '@vaadin/icon' -import '@vaadin/icons' import '@material/mwc-icon' class ShowPlugin extends connect(store)(LitElement) { @@ -99,7 +93,7 @@ class ShowPlugin extends connect(store)(LitElement) { } .tab:hover { - background: #F3F4F6; + background: var(--nav-color-hover); color: #03a9f4; font-weight: bold; } @@ -154,6 +148,7 @@ class ShowPlugin extends connect(store)(LitElement) { color: #03a9f4; --mdc-icon-size: 20px; } + .iconInactive { position: absolute; top: 7px; @@ -218,13 +213,13 @@ class ShowPlugin extends connect(store)(LitElement) { class="add-tab-button" title="Add Tab" @click=${() => { - const lengthOfTabs = this.tabs.length - this.addTab({ - url: "", - id: this.uid() - }) - this.currentTab = lengthOfTabs - }} + const lengthOfTabs = this.tabs.length + this.addTab({ + url: "", + id: this.uid() + }) + this.currentTab = lengthOfTabs + }} > + @@ -232,8 +227,7 @@ class ShowPlugin extends connect(store)(LitElement) { ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
- - - - this.changePage(val)}> - - + this.changePage(val)}> +
`)} ` @@ -320,7 +312,6 @@ class ShowPlugin extends connect(store)(LitElement) { } changePage(page) { - const copiedTabs = [...this.tabs] copiedTabs[this.currentTab] = { ...copiedTabs[this.currentTab], @@ -328,8 +319,6 @@ class ShowPlugin extends connect(store)(LitElement) { url: page.url } this.tabs = copiedTabs - - } stateChanged(state) { @@ -390,127 +379,166 @@ class ShowPlugin extends connect(store)(LitElement) { window.customElements.define('show-plugin', ShowPlugin) -class NavBar extends LitElement { +class NavBar extends connect(store)(LitElement) { static get properties() { return { - registeredUrls: { type: Array }, - changePage: { attribute: false }, + menuList: { type: Array }, + newMenuList: { type: Array }, + myMenuList: { type: Array }, + addressInfo: { type: Object }, + changePage: { attribute: false } } } + constructor() { super() - this.registeredUrls = [] + this.menuList = [] + this.newMenuList = [] + this.myMenuList = [] + this.addressInfo = {} + } - } static styles = css` - .parent { - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; - } - .navbar { - display: flex; - justify-content: space-between; - align-items: center; - background-color: #f8f8f8; - padding: 10px 20px; - max-width: 750px; - width: 80%; - } - .navbar input { - font-size: 16px; - padding: 5px; - flex-grow: 1; - margin-right: 10px; - border: 1px solid #ddd; - } - .navbar button { - padding: 5px 10px; - background-color: #4CAF50; - color: white; - border: none; - cursor: pointer; - } - .navbar button:hover { - background-color: #45a049; - } - .app-list { - display: flex; - justify-content: space-around; - padding: 20px 0; - gap: 20px; - flex-wrap: wrap; - } - .app-list .app-icon { - text-align: center; - font-size: 24px; - width: 150px; - height: 150px; - background: white; - border-radius: 5px; - padding: 5px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 10px; - cursor: pointer; - } - .app-list .app-icon span { - display: block; - } - `; + .parent { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + overflow-y: auto; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: color: var(--white); + padding: 10px 20px; + max-width: 750px; + width: 80%; + } + + .navbar input { + font-size: 16px; + color: #000; + padding: 5px; + flex-grow: 1; + margin-right: 10px; + border: 1px solid var(--black); + } + + .navbar button { + padding: 5px 10px; + font-size: 18px; + background-color: var(--app-background-1); + background-image: linear-gradient(315deg, var(--app-background-1) 0%, var(--app-background-2) 74%); + color: var(--app-icon); + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + } + + .navbar button:hover { + background-color: #45a049; + } + + .app-list { + display: flex; + justify-content: space-between; + padding: 20px 0; + gap: 20px; + flex-wrap: wrap; + } + + .app-list .app-icon { + text-align: center; + font-size: 16px; + font-weight: bold; + color: var(--black); + width: 150px; + height: 110px; + background: transparent; + padding: 5px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + cursor: pointer; + } + + .app-list .app-icon span { + display: block; + } + + .app-icon-box { + display: flex; + align-items: center; + padding-left: 14px; + width: 80px; + height: 80px; + background-color: var(--app-background-1); + background-image: linear-gradient(315deg, var(--app-background-1) 0%, var(--app-background-2) 74%); + border-top-left-radius: 10px; + border-top-right-radius: 20px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 10px; + } + + .menuIcon { + color: var(--app-icon); + --mdc-icon-size: 64px; + } + ` async extractComponents(url) { if (!url.startsWith("qortal://")) { - return null; + return null } - url = url.replace(/^(qortal\:\/\/)/, ""); + url = url.replace(/^(qortal\:\/\/)/, "") if (url.includes("/")) { - let parts = url.split("/"); - const service = parts[0].toUpperCase(); - parts.shift(); - const name = parts[0]; - parts.shift(); - let identifier; + let parts = url.split("/") + const service = parts[0].toUpperCase() + parts.shift() + const name = parts[0] + parts.shift() + let identifier if (parts.length > 0) { - identifier = parts[0]; // Do not shift yet + identifier = parts[0] // Do not shift yet // Check if a resource exists with this service, name and identifier combination - const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]; - const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; + const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port let responseObj = await parentEpml.request('apiCall', { url: `${nodeUrl}/arbitrary/resource/status/${service}/${name}/${identifier}?apiKey=${myNode.apiKey}}` }) if (responseObj.totalChunkCount > 0) { // Identifier exists, so don't include it in the path - parts.shift(); + parts.shift() } else { - identifier = null; + identifier = null } } - const path = parts.join("/"); + const path = parts.join("/") - const components = {}; - components["service"] = service; - components["name"] = name; - components["identifier"] = identifier; - components["path"] = path; - return components; + const components = {} + components["service"] = service + components["name"] = name + components["identifier"] = identifier + components["path"] = path + return components } - return null; + return null } async getQuery(value) { - let newQuery = value; + let newQuery = value if (newQuery.endsWith('/')) { - newQuery = newQuery.slice(0, -1); + newQuery = newQuery.slice(0, -1) } const res = await this.extractComponents(newQuery) if (!res) return @@ -527,15 +555,14 @@ class NavBar extends LitElement { } this.changePage({ - "url": "qapp", "domain": "core", "page": `qdn/browser/index.html${query}`, "title": "Q-App", - "icon": "vaadin:desktop", + "icon": "vaadin:external-browser", + "mwcicon": "open_in_browser", "menus": [], "parent": false - }) } @@ -548,36 +575,62 @@ class NavBar extends LitElement { if (e.key === 'Enter') { const value = this.shadowRoot.getElementById('linkInput').value this.getQuery(value) - } } render() { return html` -
- -
-
- - ${repeat(this.registeredUrls, (plugin) => plugin.url, (plugin, index) => html` -
{ - this.changePage(plugin) - }}> - - ${plugin.title} -
- - `)} - - -
-
-
- `; +
+ +
+
+ ${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html` +
{ + this.changePage(plugin) + }}> +
+ ${plugin.mwcicon} +
+ ${plugin.title} +
+ `)} +
+
+
+ ` + } + + firstUpdated() { + const addressInfo = this.addressInfo + const isMinter = addressInfo?.error !== 124 && +addressInfo?.level > 0 + const isSponsor = +addressInfo?.level >= 5 + + if (!isMinter) { + this.newMenuList = this.menuList.filter((minter) => { + return minter.url !== 'minting' + }) + } else { + this.newMenuList = this.menuList.filter((minter) => { + return minter.url !== 'become-minter' + }) + } + + if (!isSponsor) { + this.myMenuList = this.newMenuList.filter((sponsor) => { + return sponsor.url !== 'sponsorship-list' + }) + } else { + this.myMenuList = this.newMenuList + } + } + + stateChanged(state) { + this.menuList = state.app.registeredUrls + this.addressInfo = state.app.accountInfo.addressInfo } } -customElements.define('nav-bar', NavBar); \ No newline at end of file +customElements.define('nav-bar', NavBar) \ No newline at end of file diff --git a/core/src/styles/switch-theme.css b/core/src/styles/switch-theme.css index c2a7f9b8..a6d1c8bc 100644 --- a/core/src/styles/switch-theme.css +++ b/core/src/styles/switch-theme.css @@ -29,6 +29,7 @@ html { --relaynodetxt: #646464; --menuhover: #eeeeee; --menuactive: #ebebeb; + --menuactivergb: 235, 235, 235; --mainmenutext: #080808; --mainmenutexthover: #080808; --switchbackground: #666666; @@ -42,11 +43,13 @@ html { --nav-icon-color: #080808; --nav-border-color: #eeeeee; --nav-border-selected-color: #03a9f4; + --error: #d50000; --background: url("/img/qortal_background_light_.jpg"); --chatHeadBg: #ebebeb; --chatHeadBgActive: #ebebeb; --chatHeadText: #080808; --chatHeadTextActive: #080808; + --lightChatHeadHover: #1e1f201a; --group-header: #929292; --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px; --reactions-tooltip-bg: #ffffff; @@ -57,6 +60,9 @@ html { --gif-button-row-bg: #eaeaef; --gif-button-row-color: #464040; --gif-collection-hover-bg: #eaeaefa3; + --app-background-1: #045de9; + --app-background-2: #09c6f9; + --app-icon: #ffffff; } html[theme="dark"] { @@ -90,6 +96,7 @@ html[theme="dark"] { --relaynodetxt: #d4d4d4; --menuhover: #008fd5; --menuactive: #008fd5; + --menuactivergb: 0, 143, 213; --mainmenutext: #008fd5; --mainmenutexthover: #0f1a2e; --switchbackground: #eeeeee; @@ -103,11 +110,13 @@ html[theme="dark"] { --nav-icon-color: #008fd5; --nav-border-color: #0b305e; --nav-border-selected-color: #76c8f5; + --error: #d50000; --background: url("/img/qortal_background_dark_.jpg"); --chatHeadBg: #008fd5; --chatHeadBgActive: #0f1a2e; --chatHeadText: #ffffff; --chatHeadTextActive: #ffffff; + --lightChatHeadHover: #e0e1e31a; --group-header: #c8c8c8; --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px; --reactions-tooltip-bg: #161515; @@ -118,4 +127,7 @@ html[theme="dark"] { --gif-button-row-bg: #82899c; --gif-button-row-color: #151212; --gif-collection-hover-bg: #ffffff26; + --app-background-1: #7f5a83; + --app-background-2: #0d324d; + --app-icon: #03a9f4; } \ No newline at end of file