fix(core): update

This commit is contained in:
Philipp Kunz 2023-09-20 18:57:54 +02:00
parent 508b18bc3b
commit 806390a068
4 changed files with 93 additions and 33 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.210', version: '1.0.211',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -1,4 +1,4 @@
import { demoFunc } from './dees-dataview-codebox.demo.js'; import { demoFunc } from './dees-dataview-codebox.demo.js';
import { import {
DeesElement, DeesElement,
html, html,
@ -6,6 +6,7 @@ import {
type TemplateResult, type TemplateResult,
property, property,
state, state,
cssManager,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import hlight from 'highlight.js'; import hlight from 'highlight.js';
@ -13,6 +14,7 @@ import hlight from 'highlight.js';
import * as smartstring from '@push.rocks/smartstring'; import * as smartstring from '@push.rocks/smartstring';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { DeesContextmenu } from './dees-contextmenu.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -58,11 +60,11 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.appbar { .appbar {
color: ${cssManager.bdTheme('#333', '#ccc')};
background: ${cssManager.bdTheme('#ffffff', '#161616')};
border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
height: 24px; height: 24px;
background: #161616;
border-bottom: 1px solid #222222;
font-size: 12px; font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace'; font-family: 'Hubot Sans', 'monospace';
line-height: 24px; line-height: 24px;
} }
@ -88,15 +90,15 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.appbar .macControls div.close { .appbar .macControls div.close {
background: #FF5F57; background: #ff5f57;
} }
.appbar .macControls div.toDock { .appbar .macControls div.toDock {
background: #FFBD2E; background: #ffbd2e;
} }
.appbar .macControls div.minMax { .appbar .macControls div.minMax {
background: #27C93F; background: #27c93f;
} }
.appbar .macControls div:hover { .appbar .macControls div:hover {
@ -108,11 +110,11 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.bottomBar { .bottomBar {
color: ${cssManager.bdTheme('#333', '#ccc')};
background: ${cssManager.bdTheme('#ffffff', '#161616')};
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
height: 24px; height: 24px;
background: #161616;
border-top: 1px solid #222222;
font-size: 12px; font-size: 12px;
color: #888;
font-family: 'Hubot Sans', 'monospace'; font-family: 'Hubot Sans', 'monospace';
line-height: 24px; line-height: 24px;
text-align: right; text-align: right;
@ -120,7 +122,7 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.languageLabel { .languageLabel {
color: #ccc; color: ${cssManager.bdTheme('#333', '#ccc')};
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
z-index: 10; z-index: 10;
@ -143,7 +145,6 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.lineNumbers { .lineNumbers {
color: ${this.goBright ? '#acacac' : '#666666'}; color: ${this.goBright ? '#acacac' : '#666666'};
padding: 30px 16px 0px 0px; padding: 30px 16px 0px 0px;
text-align: right; text-align: right;
@ -194,7 +195,20 @@ export class DeesDataviewCodebox extends DeesElement {
color: ${this.goBright ? '#EF9300' : '#ffd765'}; color: ${this.goBright ? '#EF9300' : '#ffd765'};
} }
</style> </style>
<div class="mainbox"> <div
class="mainbox"
@contextmenu="${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'About',
iconName: 'circleInfo',
action: async () => {
return null;
},
},
]);
}}"
>
<div class="appbar"> <div class="appbar">
<div class="macControls"> <div class="macControls">
<div class="close"></div> <div class="close"></div>

View File

@ -0,0 +1,55 @@
import { html } from '@design.estate/dees-element';
import { faIcons } from './dees-icon.js';
export const demoFunc = () => html`
<style>
.demoContainer {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #111111;
padding: 10px; font-size: 30px;
}
dees-icon {
transition: color 0.02s;
color: #ffffff;
}
dees-icon:hover {
color: #e4002b;
}
.iconContainer {
display: block;
padding: 16px 16px 0px 16px;
border: 1px solid #333333;
margin-right: 8px;
margin-bottom: 8px;
}
.iconName {
font-size: 12px;
text-align: center;
color: #ccc;
background: #333333;
padding: 4px 8px;
padding-bottom: 4px;
margin-left: -16px;
margin-right: -16px;
margin-top: 16px;
}
</style>
<div class="demoContainer">
${Object.keys(faIcons).map(
(iconName) => html`
<div class="iconContainer">
<dees-icon .iconFA=${iconName as any}></dees-icon>
<div class="iconName">${iconName}</div>
</div>
`
)}
</div>
`;

View File

@ -29,6 +29,7 @@ import {
faMessage as faMessageRegular, faMessage as faMessageRegular,
faPaste as faPasteRegular, faPaste as faPasteRegular,
faSun as faSunRegular, faSun as faSunRegular,
faTrashCan as faTrashCanRegular,
} from '@fortawesome/free-regular-svg-icons'; } from '@fortawesome/free-regular-svg-icons';
import { import {
faArrowRight as faArrowRightSolid, faArrowRight as faArrowRightSolid,
@ -57,8 +58,11 @@ import {
faUsers as faUsersSolid, faUsers as faUsersSolid,
faShare as faShareSolid, faShare as faShareSolid,
faSun as faSunSolid, faSun as faSunSolid,
faTrash as faTrashSolid,
faTrashCan as faTrashCanSolid,
faXmark as faXmarkSolid, faXmark as faXmarkSolid,
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import { demoFunc } from './dees-icon.demo.js';
export const faIcons = { export const faIcons = {
// normal // normal
@ -111,6 +115,11 @@ export const faIcons = {
shareSolid: faShareSolid, shareSolid: faShareSolid,
sun: faSunRegular, sun: faSunRegular,
sunSolid: faSunSolid, sunSolid: faSunSolid,
trash: faTrashSolid,
trashSolid: faTrashSolid,
trashCan: faTrashCanRegular,
trashCanSolid: faTrashCanSolid,
users: faUsersSolid,
xmark: faXmarkSolid, xmark: faXmarkSolid,
xmarkSolid: faXmarkSolid, xmarkSolid: faXmarkSolid,
// brands // brands
@ -122,7 +131,6 @@ export const faIcons = {
slack: faSlackHash, slack: faSlackHash,
tiktok: faTiktok, tiktok: faTiktok,
twitter: faTwitter, twitter: faTwitter,
users: faUsersSolid,
}; };
export type TIconKey = keyof typeof faIcons; export type TIconKey = keyof typeof faIcons;
@ -135,24 +143,7 @@ declare global {
@customElement('dees-icon') @customElement('dees-icon')
export class DeesIcon extends DeesElement { export class DeesIcon extends DeesElement {
public static demo = () => html` public static demo = demoFunc;
<dees-icon iconName="visibility"></dees-icon>
<div style="background: #fff; padding: 10px; font-size: 30px">
<style>
dees-icon {
transition: color 0.05s;
}
dees-icon:hover {
color: #e4002b;
}
</style>
<dees-icon .iconFA=${'messageSolid'}></dees-icon>
<dees-icon .iconFA=${'sun'}></dees-icon>
<dees-icon .iconFA=${'sunSolid'}></dees-icon>
<dees-icon .iconFA=${'facebook'}></dees-icon>
<dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
</div>
`;
@property({ @property({
type: String type: String