design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2023-01-07 14:05:25 +01:00
parent ea0858fd27
commit 8ea7c53154
11 changed files with 2826 additions and 17430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ts_web/elements/wcc-properties.ts
View File

@ -36,7 +36,6 @@ export class WccProperties extends DeesElement {
public render(): TemplateResult {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
:host {
font-family: 'Roboto', sans-serif;
@ -62,6 +61,21 @@ export class WccProperties extends DeesElement {
grid-template-columns: 33% 33% 33%;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.properties .property {
padding: 5px;
background: #444;
@ -157,7 +171,7 @@ export class WccProperties extends DeesElement {
this.selectTheme('dark');
}}
>
Dark<br /><i class="material-icons">brightness_3</i>
Dark<br /><i class="material-symbols-outlined">brightness_3</i>
</div>
<div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -165,7 +179,7 @@ export class WccProperties extends DeesElement {
this.selectTheme('bright');
}}
>
Bright<br /><i class="material-icons">flare</i>
Bright<br /><i class="material-symbols-outlined">flare</i>
</div>
</div>
</div>
@ -178,7 +192,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('phone');
}}
>
Phone<br /><i class="material-icons">smartphone</i>
Phone<br /><i class="material-symbols-outlined">smartphone</i>
</div>
<div
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@ -186,7 +200,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('phablet');
}}
>
Phablet<br /><i class="material-icons">smartphone</i>
Phablet<br /><i class="material-symbols-outlined">smartphone</i>
</div>
<div
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@ -194,7 +208,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('tablet');
}}
>
Tablet<br /><i class="material-icons">tablet</i>
Tablet<br /><i class="material-symbols-outlined">tablet</i>
</div>
<div
class="button ${this.selectedViewport === 'desktop' ||
@ -205,7 +219,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('native');
}}
>
Desktop<br /><i class="material-icons">desktop_windows</i>
Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
</div>
</div>
</div>

25
ts_web/elements/wcc-sidebar.ts
View File

@ -39,6 +39,21 @@ export class WccSidebar extends DeesElement {
padding: 5px;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.heading {
font-size: 24px;
text-align: center;
@ -78,13 +93,13 @@ export class WccSidebar extends DeesElement {
background: #455A64;
}
.selectOption .material-icons {
.selectOption .material-symbols-outlined {
color: #666;
display: block;
transition: all 0.2s;
}
.selectOption.selected .material-icons {
.selectOption.selected .material-symbols-outlined {
color: #000;
}
@ -106,7 +121,7 @@ export class WccSidebar extends DeesElement {
<div class="menu">
<h3>Live Websites</h3>
${this.websites.map(website => {
return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
return html`<div class="selectOption"><i class="material-symbols-outlined">ondemand_video</i><div class="text">${website}</div></div>`;
})}
<h3>Pages</h3>
${(() => {
@ -121,7 +136,7 @@ export class WccSidebar extends DeesElement {
this.selectItem('page', pageName, item);
}}
>
<i class="material-icons">insert_drive_file</i>
<i class="material-symbols-outlined">insert_drive_file</i>
<div class="text">${pageName}</div>
</div>
`;
@ -140,7 +155,7 @@ export class WccSidebar extends DeesElement {
this.selectItem('element', elementName, item);
}}
>
<i class="material-icons">featured_video</i>
<i class="material-symbols-outlined">featured_video</i>
<div class="text">${elementName}</div>
</div>
`;