Skip to content

Commit

Permalink
update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jogibear9988
jogibear9988 committed May 2, 2024
1 parent 78ac005 commit da8400c
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 107 deletions.
34 changes: 34 additions & 0 deletions assets/dockspawn.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,38 @@

.dockspan-tab-handle-text {
margin-top: 0;
}

.splitbar-vertical {
background-color: #23252a !important;
}

.panel-titlebar {
display: flex;
align-items: end;
}

.dockspan-tab-handle-list-container {
background-color: rgb(44, 46, 53) !important;
}

.dockspan-tab-content {
background-color: rgb(44, 46, 53) !important;
}

.dockspan-tab-host {
background-color: rgb(44, 46, 53) !important;
}

.dockspan-tab-handle-active {
background-color: #434651 !important;
}

.dockspan-tab-handle {
display: flex;
align-items: center;
}

.dockspan-tab-handle-close-button::after {
top: 0;
}
160 changes: 63 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@
importShim.addImportMap(importMap);
</script>

<link rel="stylesheet" href="./node_modules/metro4-dist/css/metro-all.min.css">
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="./node_modules/dock-spawn-ts/lib/css/dock-manager-context-menu.css">

<!-- Drag/Drop support on touch devices -->
Expand Down Expand Up @@ -161,72 +159,68 @@
}
}
</style>

<style>
* {
box-sizing: border-box;
}

nav {
background: rgb(44, 46, 53);
display: flex;
height: 38px;
padding: 5px;
gap: 0;
color: #98a1a8;
}
nav div {
display: flex;
align-items: center;
font-family: monospace;
}

nav button {
border: none;
background: transparent;
}

/* https://codepen.io/sosuke/pen/Pjoqqp - css filter generator */
nav button img {
height: 24px;
filter: invert(68%) sepia(15%) saturate(133%) hue-rotate(169deg) brightness(91%) contrast(91%);
}

nav button[disabled] img {
filter: invert(38%) sepia(1%) saturate(0%) hue-rotate(211deg) brightness(94%) contrast(85%);
}

nav button:not([disabled]) img:hover {
filter: invert(100%) sepia(2%) saturate(7432%) hue-rotate(100deg) brightness(112%) contrast(94%);
}

nav button:not([disabled]) img:active {
filter: invert(41%) sepia(92%) saturate(1090%) hue-rotate(335deg) brightness(99%) contrast(93%);
}
</style>
</head>

<body style="height: 100%;">
<nav id="configRibbonHeader" data-role="ribbonmenu" class="ribbon-menu" data-role-ribbonmenu="true"
style="width: 100%; background: rgb(245, 246, 247); border-bottom:solid 1px rgb(218, 219, 220);">
<div class="content-holder">
<div class="section active" style="height: 120px;">
<div class="group">
<button class="ribbon-button" data-command="new" disabled>
<span class="icon">
<span class="mif-file-empty fg-cyan"></span>
</span>
<span class="caption">new</span>
</button>
<button class="ribbon-button" data-command="newFixedWidth" disabled>
<span class="icon">
<span class="mif-file-empty fg-cyan"></span>
</span>
<span class="caption">new fixed</span>
</button>
<button class="ribbon-button" data-command="save" disabled>
<span class="icon">
<span class="mif-floppy-disk fg-cyan"></span>
</span>
<span class="caption">save</span>
</button>
<span class="title">file</span>
</div>
<div class="group">
<button class="ribbon-button" data-command="paste" disabled>
<span class="icon">
<span class="mif-paste fg-cyan"></span>
</span>
<span class="caption">paste</span>
</button>
<div class="group flex-column">
<button class="ribbon-icon-button" data-command="cut" disabled>
<span class="icon">
<span class="mif-cut fg-cyan"></span>
</span>
<span class="caption">cut</span>
</button>
<button class="ribbon-icon-button" data-command="copy" disabled>
<span class="icon">
<span class="mif-copy fg-cyan"></span>
</span>
<span class="caption">copy</span>
</button>
</div>
<span class="title">clipboard</span>
</div>
<div class="group flex-column">
<button class="ribbon-icon-button" data-command="undo" disabled title="click and hold to see the undo list">
<span class="icon">
<span class="mif-undo fg-cyan"></span>
</span>
<span class="caption">undo</span>
</button>
<button class="ribbon-icon-button" data-command="redo" disabled title="click and hold to see the redo list">
<span class="icon">
<span class="mif-redo fg-cyan"></span>
</span>
<span class="caption">redo</span>
</button>
<span class="title">edit</span>
</div>
<nav>
<button data-command="new" title="new"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/file.svg"></button>
<button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
<div style="margin-left: 30px;">
web-component-designer
</div>
<button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>
<button data-command="cut" title="cut" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/cut.svg"></button>
<button data-command="copy" title="copy" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/copy.svg"></button>
<button data-command="delete" title="delete" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/delete.svg"></button>
<button style="margin-left: 10px;" data-command="undo" disabled title="click and hold to see the undo list"><img
src="./node_modules/@node-projects/web-component-designer/assets/icons/undo.svg"></button>
<button data-command="redo" disabled title="click and hold to see the redo list"><img
src="./node_modules/@node-projects/web-component-designer/assets/icons/redo.svg"></button>
<!--
<div class="group flex-column">
<div class="group" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto;">
<button class="tool-button" data-command="arrangeLeft" title="align left"
Expand Down Expand Up @@ -274,39 +268,11 @@
disabled></button>
</div>
<span class="title">layout</span>
</div>
<div class="group flex-column">
<button class="ribbon-button" id="btnLogoff" data-command="screenshot">
<span class="icon">
<span class="mif-image fg-cyan"></span>
</span>
</button>
<span class="title">screenshot</span>
</div>
<div class="group flex-column">
<p style="font-size: 11px; font-family: monospace;">
ALT + Click -> access elements below<br>
CTL + DragElements -> Disable Snapline placement
</p>
<span class="title">info</span>

</div>
<div style="position: absolute; right: 0;">
<div class="group" style="height: 111px; border-left: 1px solid #dadbdc; inline-size: fit-content;">
<button class="ribbon-button" id="btnLogoff" data-command="github">
<span class="icon">
<span class="mif-github fg-cyan"></span>
</span>
<span>source</span>

</button>
<span class="title">source</span>
</div>
</div>
</div>
</div>
</div>-->
<button style="margin-left: 10px;" data-command="screenshot"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg"></button>
<button style="margin-left: 10px;" data-command="github"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/github.svg"></button>
</nav>
<node-projects-app-shell id="shell" style="height: calc(100% - 121px); width: 100%; position: absolute;">
<node-projects-app-shell id="shell" style="height: calc(100% - 38px); width: 100%; position: absolute;">
</node-projects-app-shell>
<div id="load"
style="position: absolute; width: 100%; height: 100%; z-index: 9999999999; top: 0; left: 0; background: white;">
Expand Down
16 changes: 8 additions & 8 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"@node-projects/base-custom-webcomponent": "0.26.1",
"@node-projects/lean-he-esm": "^3.3.0",
"@node-projects/node-html-parser-esm": "^6.2.0",
"@node-projects/web-component-designer": "^0.1.132",
"@node-projects/web-component-designer": "^0.1.136",
"@node-projects/web-component-designer-codeview-monaco": "^0.1.25",
"@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.10",
"@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.4",
Expand All @@ -43,6 +43,6 @@
"mobile-drag-drop": "^3.0.0-rc.0",
"monaco-editor": "^0.48.0",
"typescript": "^5.4.5",
"wunderbaum": "^0.8.3"
"wunderbaum": "^0.8.4"
}
}

0 comments on commit da8400c

Please sign in to comment.