Skip to content

Commit

Permalink
tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mudloop
Mudloop committed Nov 8, 2024
1 parent 0b28343 commit bde9a2e
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 33 deletions.
35 changes: 21 additions & 14 deletions docs/bundle/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ var zT=Object.create;var{getPrototypeOf:QT,defineProperty:Y7,getOwnPropertyNames
h4 {
text-transform: uppercase;
font-size: 10px;
padding: 5px 10px;
padding: 5px 6px;
font-weight: 600;
letter-spacing: 2px;
display: flex;
Expand Down Expand Up @@ -1837,7 +1837,7 @@ const dependencies = {
}
section > ul {

border-radius: 4px;
border-radius: 2px;
padding: 0;
background-color: #353637d6;
flex: 1;
Expand All @@ -1853,13 +1853,13 @@ const dependencies = {
ul {
list-style: none;
margin: 0;
padding-left: 18px;
padding-left: 10px;
}
header {
display: flex;
align-items: center;
padding: 5px;
gap: 5px;
padding: 3px 5px;
gap: 3px;
cursor: pointer;
}
label {
Expand Down Expand Up @@ -1904,6 +1904,12 @@ const dependencies = {
nav {
display: flex;
gap: 4px;
width: 0;
overflow: hidden;
}
:host(:hover) nav {
width: unset;
overflow: unset;
}
nav>* {
flex-shrink: 0;
Expand Down Expand Up @@ -1955,9 +1961,9 @@ const dependencies = {
<h4>
<span class="ellipsis">Files</span>
<nav>
<ui-icon slot="trigger" icon="tabler-download" currentStroke @click=${()=>this.download()}></ui-icon>
<ui-icon slot="trigger" icon="tabler-file-plus" currentStroke @click=${()=>this.add("file")}></ui-icon>
<ui-icon slot="trigger" icon="tabler-folder-plus" currentStroke @click=${()=>this.add("dir")}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-download" currentStroke @click=${()=>this.download()}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-file-plus" currentStroke @click=${()=>this.add("file")}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-folder-plus" currentStroke @click=${()=>this.add("dir")}></ui-icon>
</nav>
</h4>
<section><ul class="${this.target==""?"target":""}">${ZM(this.playground.project.fs.root,this.renderNode,this.cache)}</ul></section>
Expand Down Expand Up @@ -2092,7 +2098,7 @@ const dependencies = {
}

ul {
border-radius: 4px;
border-radius: 2px;
background-color: #353637d6;
list-style: none;
padding: 0;
Expand All @@ -2105,6 +2111,7 @@ const dependencies = {
padding: 4px 8px;
cursor: pointer;
display: flex;
align-items: center;
}

li:hover {
Expand Down Expand Up @@ -2132,14 +2139,14 @@ const dependencies = {
}
li>span {
background-color: #d3cd9f;
padding: 2px 4px;
padding: 2px 6px;
font-size: 7.5px;
border-radius: 4px;
border-radius: 50px;
margin-right: 4px;
color: black;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1px;
letter-spacing: .5px;
display: flex;
align-items: center;
}
Expand Down Expand Up @@ -2374,7 +2381,7 @@ const dependencies = {
`;render=()=>qn`
<div class="trigger"><slot name="trigger"></slot></div>
<dialog><slot></slot></dialog>
`;firstUpdated(t){const j=this.shadowRoot.querySelector("dialog");j.onclick=()=>j?.close(),j.onclose=()=>this.visible=!1,this.addEventListener("pointerdown",this.open)}visible=!1;open=()=>{this.shadowRoot.querySelector("dialog").showModal(),this.querySelector("input")&&setTimeout(()=>this.querySelector("input").focus(),1),this.visible=!0,this.updatePosition()};updatePosition=()=>{if(!this.visible)return;const t=this.shadowRoot.querySelector("dialog"),j=this.getBoundingClientRect();this.style.setProperty("--left",j.left+"px"),this.style.setProperty("--top",j.bottom+"px"),requestAnimationFrame(this.updatePosition)}}qB=$n([Kr("ui-menu")],qB);var eO=Ac(AO(),1);class yB extends Hr{constructor(){super(...arguments);this.position="right";this.hideKeyboard=!1}static styles=Nr`
`;firstUpdated(t){const j=this.shadowRoot.querySelector("dialog");j.onclick=()=>j?.close(),j.onclose=()=>this.visible=!1,this.addEventListener("pointerdown",this.open)}visible=!1;open=(t)=>{if(t.button!=0)return;this.shadowRoot.querySelector("dialog").showModal(),this.querySelector("input")&&setTimeout(()=>this.querySelector("input").focus(),1),this.visible=!0,this.updatePosition()};updatePosition=()=>{if(!this.visible)return;const t=this.shadowRoot.querySelector("dialog"),j=this.getBoundingClientRect();this.style.setProperty("--left",j.left+"px"),this.style.setProperty("--top",j.bottom+"px"),requestAnimationFrame(this.updatePosition)}}qB=$n([Kr("ui-menu")],qB);var eO=Ac(AO(),1);class yB extends Hr{constructor(){super(...arguments);this.position="right";this.hideKeyboard=!1}static styles=Nr`
${hi}
:host {
width: 100%;
Expand Down Expand Up @@ -2751,5 +2758,5 @@ const dependencies = {
</div>
`}$n([$r({type:Object})],$B.prototype,"playground",void 0),$n([$r({type:String,attribute:!0})],$B.prototype,"size",void 0),$n([$r({type:Boolean,attribute:!0})],$B.prototype,"embedded",void 0),$n([$r({type:Boolean,attribute:!0})],$B.prototype,"enlarged",void 0),$n([$r({type:Boolean,attribute:"preview-mode"})],$B.prototype,"previewMode",void 0),$B=$n([Kr("cmaj-header")],$B);export{vB as Tabs,xB as Sidebar,kk as Prompt,_B as ProjectPanel,yB as ProductsPanel,fB as Playground,Al as MonacoEditor,io as Modals,qB as Menu,FB as Loader,XM as Layout,K6 as IconRegistry,pk as Icon,$B as Header,BB as FlexSplitter,BG as FileIcon,gB as Explorer,GB as ExamplesPanel,mk as Confirm,MX as CLOSE_ICON,Th as Alert};

//# debugId=95661CC453D99EC364756E2164756E21
//# debugId=041C87298F32020564756E2164756E21
//# sourceMappingURL=index.js.map
12 changes: 6 additions & 6 deletions docs/bundle/js/index.js.map
View file

Large diffs are not rendered by default.

20 changes: 13 additions & 7 deletions playground/src/components/Explorer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const directory = directive(class extends AsyncDirective {
}
section > ul {
border-radius: 4px;
border-radius: 2px;
padding: 0;
background-color: #353637d6;
flex: 1;
Expand All @@ -70,13 +70,13 @@ const directory = directive(class extends AsyncDirective {
ul {
list-style: none;
margin: 0;
padding-left: 18px;
padding-left: 10px;
}
header {
display: flex;
align-items: center;
padding: 5px;
gap: 5px;
padding: 3px 5px;
gap: 3px;
cursor: pointer;
}
label {
Expand Down Expand Up @@ -121,6 +121,12 @@ const directory = directive(class extends AsyncDirective {
nav {
display: flex;
gap: 4px;
width: 0;
overflow: hidden;
}
:host(:hover) nav {
width: unset;
overflow: unset;
}
nav>* {
flex-shrink: 0;
Expand Down Expand Up @@ -185,9 +191,9 @@ const directory = directive(class extends AsyncDirective {
<h4>
<span class="ellipsis">Files</span>
<nav>
<ui-icon slot="trigger" icon="tabler-download" currentStroke @click=${() => this.download()}></ui-icon>
<ui-icon slot="trigger" icon="tabler-file-plus" currentStroke @click=${() => this.add(FileType.File)}></ui-icon>
<ui-icon slot="trigger" icon="tabler-folder-plus" currentStroke @click=${() => this.add(FileType.Dir)}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-download" currentStroke @click=${() => this.download()}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-file-plus" currentStroke @click=${() => this.add(FileType.File)}></ui-icon>
<ui-icon width="15" height="15" slot="trigger" icon="tabler-folder-plus" currentStroke @click=${() => this.add(FileType.Dir)}></ui-icon>
</nav>
</h4>
<section><ul class="${this.target == '' ? 'target' : ''}">${directory(this.playground.project!.fs.root, this.renderNode, this.cache)}</ul></section>
Expand Down
3 changes: 2 additions & 1 deletion playground/src/components/Menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ import { customElement, property } from "lit/decorators";
this.addEventListener('pointerdown', this.open);
}
visible = false;
open = () => {
open = (e: PointerEvent) => {
if (e.button != 0) return;
(this.shadowRoot!.querySelector('dialog')!).showModal();
this.querySelector('input') && setTimeout(() => this.querySelector('input')!.focus(), 1);
this.visible = true;
Expand Down
9 changes: 5 additions & 4 deletions playground/src/components/ProjectPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { App } from "../state";
}
ul {
border-radius: 4px;
border-radius: 2px;
background-color: #353637d6;
list-style: none;
padding: 0;
Expand All @@ -32,6 +32,7 @@ import { App } from "../state";
padding: 4px 8px;
cursor: pointer;
display: flex;
align-items: center;
}
li:hover {
Expand Down Expand Up @@ -59,14 +60,14 @@ import { App } from "../state";
}
li>span {
background-color: #d3cd9f;
padding: 2px 4px;
padding: 2px 6px;
font-size: 7.5px;
border-radius: 4px;
border-radius: 50px;
margin-right: 4px;
color: black;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1px;
letter-spacing: .5px;
display: flex;
align-items: center;
}
Expand Down
2 changes: 1 addition & 1 deletion playground/src/components/common-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const COMMON_STYLES = css`
h4 {
text-transform: uppercase;
font-size: 10px;
padding: 5px 10px;
padding: 5px 6px;
font-weight: 600;
letter-spacing: 2px;
display: flex;
Expand Down

0 comments on commit bde9a2e

Please sign in to comment.