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

8
changelog.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## 2025-12-19 - 3.1.0 - feat(wcc-properties)
add Share selector with inline Record button and adjust properties panel grid layout
- Increase rightmost column width from 70px to 100px in properties grid
- Introduce .shareSelector and .selectorButtons1 CSS classes and markup
- Replace <wcc-record-button> with inline Record button that toggles icon based on isRecording
- Add Share panel heading and integrate record control into selector area
## 2025-12-19 - 3.0.0 - BREAKING CHANGE(ts_web) ## 2025-12-19 - 3.0.0 - BREAKING CHANGE(ts_web)
Replace fullscreen boolean with native viewport mode across components, add native viewport selector and toggle, and update dev deps and npmextra config Replace fullscreen boolean with native viewport mode across components, add native viewport selector and toggle, and update dev deps and npmextra config

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-wcctools', name: '@design.estate/dees-wcctools',
version: '3.0.0', version: '3.1.0',
description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.' description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
} }

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

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