Skip to content

Commit 8ebeed7

Browse files
jogibear9988jogibear9988
committed
# Conflicts: # index.html # package.json
2 parents b71fa81 + 7407afa commit 8ebeed7

File tree

7 files changed

+254
-275
lines changed

7 files changed

+254
-275
lines changed

‎assets/dockspawn.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,38 @@
44

55
.dockspan-tab-handle-text {
66
margin-top: 0;
7+
}
8+
9+
.splitbar-vertical {
10+
background-color: #23252a !important;
11+
}
12+
13+
.panel-titlebar {
14+
display: flex;
15+
align-items: end;
16+
}
17+
18+
.dockspan-tab-handle-list-container {
19+
background-color: rgb(44, 46, 53) !important;
20+
}
21+
22+
.dockspan-tab-content {
23+
background-color: rgb(44, 46, 53) !important;
24+
}
25+
26+
.dockspan-tab-host {
27+
background-color: rgb(44, 46, 53) !important;
28+
}
29+
30+
.dockspan-tab-handle-active {
31+
background-color: #434651 !important;
32+
}
33+
34+
.dockspan-tab-handle {
35+
display: flex;
36+
align-items: center;
37+
}
38+
39+
.dockspan-tab-handle-close-button::after {
40+
top: 0;
741
}

‎index.html‎

Lines changed: 76 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,24 @@
5555
importShim.addImportMap(importMap);
5656
</script>
5757

58-
<link rel="stylesheet" href="./node_modules/metro4-dist/css/metro-all.min.css">
5958
<link rel="stylesheet" href="./node_modules/dock-spawn-ts/lib/css/dock-manager-context-menu.css">
6059

6160
<!-- Drag/Drop support on touch devices -->
6261
<link rel="stylesheet" href="./node_modules/mobile-drag-drop/default.css">
6362
<script src="./node_modules/mobile-drag-drop/index.js"></script>
63+
<script>
64+
MobileDragDrop.polyfill({
65+
forceApply: !!(navigator.maxTouchPoints && navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'))
66+
});
67+
</script>
6468

6569
<!-- if you use Moacco Editor -->
6670
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
6771
<script>
6872
require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs', 'vs/css': { disabled: true } } });
69-
require(['vs/editor/editor.main'], () => { });
73+
require(['vs/editor/editor.main'], () => {
74+
monaco.editor.setTheme('vs-dark');
75+
});
7076
</script>
7177

7278
<!-- if you use ACE Editor -->
@@ -82,6 +88,7 @@
8288
-->
8389

8490
<script type="module">
91+
importShim('dock-spawn-ts/lib/js/webcomponent/DockSpawnTsWebcomponent.js');
8592
importShim('./node_modules/@node-projects/web-component-designer/dist/index.js');
8693
importShim('./dist/appShell.js');
8794
</script>
@@ -154,152 +161,79 @@
154161
}
155162
}
156163
</style>
157-
</head>
158164

159-
<body style="height: 100%;">
160-
<nav id="configRibbonHeader" data-role="ribbonmenu" class="ribbon-menu" data-role-ribbonmenu="true"
161-
style="width: 100%; background: rgb(245, 246, 247); border-bottom:solid 1px rgb(218, 219, 220);">
162-
<div class="content-holder">
163-
<div class="section active" style="height: 120px;">
164-
<div class="group">
165-
<button class="ribbon-button" data-command="new" disabled>
166-
<span class="icon">
167-
<span class="mif-file-empty fg-cyan"></span>
168-
</span>
169-
<span class="caption">new</span>
170-
</button>
171-
<button class="ribbon-button" data-command="newFixedWidth" disabled>
172-
<span class="icon">
173-
<span class="mif-file-empty fg-cyan"></span>
174-
</span>
175-
<span class="caption">new fixed</span>
176-
</button>
177-
<button class="ribbon-button" data-command="save" disabled>
178-
<span class="icon">
179-
<span class="mif-floppy-disk fg-cyan"></span>
180-
</span>
181-
<span class="caption">save</span>
182-
</button>
183-
<span class="title">file</span>
184-
</div>
185-
<div class="group">
186-
<button class="ribbon-button" data-command="paste" disabled>
187-
<span class="icon">
188-
<span class="mif-paste fg-cyan"></span>
189-
</span>
190-
<span class="caption">paste</span>
191-
</button>
192-
<div class="group flex-column">
193-
<button class="ribbon-icon-button" data-command="cut" disabled>
194-
<span class="icon">
195-
<span class="mif-cut fg-cyan"></span>
196-
</span>
197-
<span class="caption">cut</span>
198-
</button>
199-
<button class="ribbon-icon-button" data-command="copy" disabled>
200-
<span class="icon">
201-
<span class="mif-copy fg-cyan"></span>
202-
</span>
203-
<span class="caption">copy</span>
204-
</button>
205-
</div>
206-
<span class="title">clipboard</span>
207-
</div>
208-
<div class="group flex-column">
209-
<button class="ribbon-icon-button" data-command="undo" disabled title="click and hold to see the undo list">
210-
<span class="icon">
211-
<span class="mif-undo fg-cyan"></span>
212-
</span>
213-
<span class="caption">undo</span>
214-
</button>
215-
<button class="ribbon-icon-button" data-command="redo" disabled title="click and hold to see the redo list">
216-
<span class="icon">
217-
<span class="mif-redo fg-cyan"></span>
218-
</span>
219-
<span class="caption">redo</span>
220-
</button>
221-
<span class="title">edit</span>
222-
</div>
223-
<div class="group flex-column">
224-
<div class="group" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto;">
225-
<button class="tool-button" data-command="arrangeLeft" title="align left"
226-
style="background-image: url('./assets/images/layout/AlignLeft.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
227-
disabled></button>
228-
<button class="tool-button" data-command="arrangeCenter" title="align center vertically"
229-
style="background-image: url('./assets/images/layout/AlignCenter.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
230-
disabled></button>
231-
<button class="tool-button" data-command="arrangeRight" title="align right"
232-
style="background-image: url('./assets/images/layout/AlignRight.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
233-
disabled></button>
234-
<button class="tool-button" data-command="arrangeTop" title="align top"
235-
style="background-image: url('./assets/images/layout/AlignTop.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
236-
disabled></button>
237-
<button class="tool-button" data-command="arrangeMiddle" title="align center horizontally"
238-
style="background-image: url('./assets/images/layout/AlignCenterHorizontal.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
239-
disabled></button>
240-
<button class="tool-button" data-command="arrangeBottom" title="align bottom"
241-
style="background-image: url('./assets/images/layout/AlignBot.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
242-
disabled></button>
243-
<button class="tool-button" data-command="rotateClockwise" title="rotate clockwise"
244-
style="background-image: url('./assets/images/layout/RotatClockwise.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
245-
disabled></button>
165+
<style>
166+
* {
167+
box-sizing: border-box;
168+
}
246169

247-
<button class="tool-button" data-command="mirrorHorizontal" title="mirror horizontal"
248-
style="background-image: url('./assets/images/layout/MirrowHorizontal.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
249-
disabled></button>
250-
<button class="tool-button" data-command="mirrotVertical" title="mirror vertical"
251-
style="background-image: url('./assets/images/layout/MirrowVertical.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
252-
disabled></button>
253-
<button class="tool-button" data-command="moveToBack" title="bring to back"
254-
style="background-image: url('./assets/images/layout/BringToBack.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
255-
disabled></button>
256-
<button class="tool-button" data-command="moveToFront" title="bring to front"
257-
style="background-image: url('./assets/images/layout/BringToFront.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
258-
disabled></button>
259-
<button class="tool-button" data-command="moveBackward" title="bring one to back"
260-
style="background-image: url('./assets/images/layout/BringOneToBack.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
261-
disabled></button>
262-
<button class="tool-button" data-command="moveForward" title="bring one to front"
263-
style="background-image: url('./assets/images/layout/BringOneToFront.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
264-
disabled></button>
265-
<button class="tool-button" data-command="rotateCounterClockwise" title="rotate counter clockwise"
266-
style="background-image: url('./assets/images/layout/RotatCounterClockwise.svg'); background-size: cover; background-size: 80%;background-repeat: no-repeat;background-position: center;"
267-
disabled></button>
268-
</div>
269-
<span class="title">layout</span>
270-
</div>
271-
<div class="group flex-column">
272-
<button class="ribbon-button" id="btnLogoff" data-command="screenshot">
273-
<span class="icon">
274-
<span class="mif-image fg-cyan"></span>
275-
</span>
276-
</button>
277-
<span class="title">screenshot</span>
278-
</div>
279-
<div class="group flex-column">
280-
<p style="font-size: 11px; font-family: monospace;">
281-
ALT + Click -> access elements below<br>
282-
CTL + DragElements -> Disable Snapline placement
283-
</p>
284-
<span class="title">info</span>
170+
nav {
171+
background: rgb(44, 46, 53);
172+
display: flex;
173+
height: 38px;
174+
padding: 5px;
175+
gap: 0;
176+
color: #98a1a8;
177+
}
285178

286-
</div>
287-
<div style="position: absolute; right: 0;">
288-
<div class="group" style="height: 111px; border-left: 1px solid #dadbdc; inline-size: fit-content;">
289-
<button class="ribbon-button" id="btnLogoff" data-command="github">
290-
<span class="icon">
291-
<span class="mif-github fg-cyan"></span>
292-
</span>
293-
<span>source</span>
179+
nav div {
180+
display: flex;
181+
align-items: center;
182+
font-family: monospace;
183+
}
294184

295-
</button>
296-
<span class="title">source</span>
297-
</div>
298-
</div>
299-
</div>
185+
nav button {
186+
border: none;
187+
background: transparent;
188+
}
189+
190+
/* https://codepen.io/sosuke/pen/Pjoqqp - css filter generator */
191+
nav button img {
192+
height: 24px;
193+
filter: invert(68%) sepia(15%) saturate(133%) hue-rotate(169deg) brightness(91%) contrast(91%);
194+
}
195+
196+
nav button[disabled] img {
197+
filter: invert(38%) sepia(1%) saturate(0%) hue-rotate(211deg) brightness(94%) contrast(85%);
198+
}
199+
200+
nav button:not([disabled]) img:hover {
201+
filter: invert(100%) sepia(2%) saturate(7432%) hue-rotate(100deg) brightness(112%) contrast(94%);
202+
}
203+
204+
nav button:not([disabled]) img:active {
205+
filter: invert(41%) sepia(92%) saturate(1090%) hue-rotate(335deg) brightness(99%) contrast(93%);
206+
}
207+
</style>
208+
</head>
209+
210+
<body style="height: 100%;">
211+
<nav>
212+
<button data-command="new" title="new"><img
213+
src="./node_modules/@node-projects/web-component-designer/assets/icons/file.svg"></button>
214+
<button data-command="save" title="save" disabled><img
215+
src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
216+
<div style="margin-left: 30px;">
217+
web-component-designer
300218
</div>
219+
<button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
220+
src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>
221+
<button data-command="cut" title="cut" disabled><img
222+
src="./node_modules/@node-projects/web-component-designer/assets/icons/cut.svg"></button>
223+
<button data-command="copy" title="copy" disabled><img
224+
src="./node_modules/@node-projects/web-component-designer/assets/icons/copy.svg"></button>
225+
<button data-command="delete" title="delete" disabled><img
226+
src="./node_modules/@node-projects/web-component-designer/assets/icons/delete.svg"></button>
227+
<button ondragstart="return false;" style="margin-left: 10px;" data-command="undo" disabled title="click and hold to see the undo list"><img
228+
src="./node_modules/@node-projects/web-component-designer/assets/icons/undo.svg"></button>
229+
<button ondragstart="return false;" data-command="redo" disabled title="click and hold to see the redo list"><img
230+
src="./node_modules/@node-projects/web-component-designer/assets/icons/redo.svg"></button>
231+
<button style="margin-left: 10px;" data-command="screenshot"><img
232+
src="./node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg"></button>
233+
<button style="margin-left: 10px;" data-command="github"><img
234+
src="./node_modules/@node-projects/web-component-designer/assets/icons/github.svg"></button>
301235
</nav>
302-
<node-projects-app-shell id="shell" style="height: calc(100% - 121px); width: 100%; position: absolute;">
236+
<node-projects-app-shell id="shell" style="height: calc(100% - 38px); width: 100%; position: absolute;">
303237
</node-projects-app-shell>
304238
<div id="load"
305239
style="position: absolute; width: 100%; height: 100%; z-index: 9999999999; top: 0; left: 0; background: white;">

0 commit comments

Comments
 (0)