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

feat(wcc-properties): add Share selector with inline Record button and adjust properties panel grid layout

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-19 09:21:30 +00:00
parent 8f0f8606a1
commit ddecfcdb4c
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,7 +100,7 @@ export class WccProperties extends DeesElement {
}
.grid {
display: grid;
grid-template-columns: 1fr 150px 350px 70px;
grid-template-columns: 1fr 150px 350px 100px;
height: 100%;
}
.properties {
@@ -197,7 +197,8 @@ export class WccProperties extends DeesElement {
}
.viewportSelector,
.themeSelector {
.themeSelector,
.shareSelector {
user-select: none;
background: transparent;
display: flex;
@@ -219,6 +220,11 @@ export class WccProperties extends DeesElement {
grid-template-columns: repeat(5, 1fr);
flex: 1;
}
.selectorButtons1 {
display: grid;
grid-template-columns: 1fr;
flex: 1;
}
.button {
display: flex;
flex-direction: column;
@@ -671,12 +677,17 @@ export class WccProperties extends DeesElement {
</div>
</div>
</div>
<!-- Recording Button -->
<wcc-record-button
.state=${this.isRecording ? 'recording' : 'idle'}
.duration=${this.recordingDuration}
@record-click=${() => this.handleRecordButtonClick()}
></wcc-record-button>
<div class="shareSelector">
<div class="panelheading">Share</div>
<div class="selectorButtons1">
<div
class="button ${this.isRecording ? 'selected' : ''}"
@click=${() => this.handleRecordButtonClick()}
>
Record<i class="material-symbols-outlined">${this.isRecording ? 'stop_circle' : 'videocam'}</i>
</div>
</div>
</div>
</div>
${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
</div>