From 261256c4f383e13215699c8e3e471e931bb44ea6 Mon Sep 17 00:00:00 2001 From: lvxiangcong Date: Thu, 10 Nov 2022 15:09:49 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=9E=E7=8E=B0alter,confirm,prompt?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 1 + src/components/dialog/alert-dialog.css.ts | 21 ++++-- src/components/dialog/alert-dialog.ts | 61 +++++++++++++----- src/components/dialog/base-dialog.css.ts | 55 ++++++++++++++-- src/components/dialog/base-dialog.ts | 33 ++++++---- src/components/dialog/confirm-dialog.css.ts | 31 +++++++-- src/components/dialog/confirm-dialog.ts | 49 ++++++++++---- src/components/dialog/prompt-dialog.css.ts | 43 ++++++++++-- src/components/dialog/prompt-dialog.ts | 50 +++++++++----- .../icon-added-container.ts | 4 +- .../icon-unadd-container.ts | 4 +- src/test/panels/dialog/asserts/icon1.png | Bin 0 -> 4841 bytes src/test/panels/dialog/dialog.ts | 58 +++++++++-------- src/test/panels/shared-picker-styles.ts | 2 +- 14 files changed, 305 insertions(+), 107 deletions(-) create mode 100644 src/test/panels/dialog/asserts/icon1.png diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index d95e47d..c735c43 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -10,6 +10,7 @@ export const autoPxStyle: CSSResult = css` --auto-15px: calc(15px / var(--hostDevicePixelRatio)); --auto-16px: calc(16px / var(--hostDevicePixelRatio)); --auto-18px: calc(18px / var(--hostDevicePixelRatio)); + --auto-20px: calc(20px / var(--hostDevicePixelRatio)); --auto-24px: calc(24px / var(--hostDevicePixelRatio)); --auto-26px: calc(26px / var(--hostDevicePixelRatio)); --auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio)); diff --git a/src/components/dialog/alert-dialog.css.ts b/src/components/dialog/alert-dialog.css.ts index aee6e1a..e1681b4 100644 --- a/src/components/dialog/alert-dialog.css.ts +++ b/src/components/dialog/alert-dialog.css.ts @@ -1,10 +1,21 @@ import {css} from 'lit' export default css` - div { - position: absolute; - width: 200px; - height: 200px; - background-color: red; + .star-alter-checkbox { + align-self: start; + font-size: 16px; + color: #8a8a8a; + margin: var(--auto-10px) var(--auto-20px); + } + .star-alter-group { + display: flex; + font-size: 18px; + align-items: center; + justify-content: center; + line-height: 60px; + } + .star-alter-button { + color: #1d98f0; + font-weight: bold; } ` diff --git a/src/components/dialog/alert-dialog.ts b/src/components/dialog/alert-dialog.ts index a670d77..7e78111 100644 --- a/src/components/dialog/alert-dialog.ts +++ b/src/components/dialog/alert-dialog.ts @@ -3,6 +3,7 @@ import { CSSResultArray, TemplateResult, customElement, + query, } from '../base/star-base-element.js' import StarBaseDialog from './base-dialog.js' import alertDialogStyles from './alert-dialog.css.js' @@ -12,12 +13,25 @@ import '../button-group/button-group.js' interface AlertDialogOptions { text?: string + checkBoxText?: string confirm?: string - onconfirm?: () => void + dataTo?: Object + onconfirm?: (e: Object) => void } @customElement('star-alert-dialog') export class StarAlertDialog extends StarBaseDialog { + constructor(obj: AlertDialogOptions) { + super() + this.text = obj.text || '' + this.checkBoxText = obj.checkBoxText || '' + this.dataTo = obj.dataTo || {} + this.confirm = obj.confirm || '确定' + this.onconfirm = obj.onconfirm || (() => {}) + } + // 暴露给外部使用 + @query('input') public alterInput!: HTMLInputElement + public static override get styles(): CSSResultArray { return [super.styles, alertDialogStyles] } @@ -26,41 +40,56 @@ export class StarAlertDialog extends StarBaseDialog { text!: string - onconfirm!: () => void + onconfirm!: (e: Object) => void protected override get headerContent(): TemplateResult { return html` -

${this.title}

+
+
${this.title}
+
` } protected override get mainContent(): TemplateResult { return html` - ${this.text} + ${this.text} + ${this.checkBoxText + ? html` +
+ +
+ ` + : ''} ` } protected override get bottomContent(): TemplateResult { return html` - +
+ + ${this.confirm} + +
+ ` } - - handleEvent(e: any): void { - console.log(e) - } - - constructor(obj: AlertDialogOptions) { - super() - this.text = obj.text || '' - this.confirm = obj.confirm || '确定' - this.onconfirm = obj.onconfirm || (() => {}) + transmitAlter() { + if (this.checkBoxText) { + let checkedInput = this.alterInput.checked + console.log(checkedInput) + // @ts-ignore + this.dataTo.checked = checkedInput + } + this.handleConfirm() } } diff --git a/src/components/dialog/base-dialog.css.ts b/src/components/dialog/base-dialog.css.ts index eb26967..236b34a 100644 --- a/src/components/dialog/base-dialog.css.ts +++ b/src/components/dialog/base-dialog.css.ts @@ -1,13 +1,58 @@ import {css} from 'lit' export default css` - div { - position: absolute; - width: 200px; - height: 200px; - background-color: red; + * { + border: none; + background: transparent; } dialog::backdrop { background: green; + border:2px solid yellow; } + .star-confirm-background { + position: fixed; + width: 100vw; + height: 100vh; + background-color: #00000033; + display: flex; + justify-content: center; + align-items: center; + } + .star-base-dialog { + width: 380px; + background: linear-gradient( + 134.78deg, + #f7f5f7 2.34%, + #fafafa 34.11%, + #e1e4f2 100% + ); + border-radius: var(--auto-20px); + overflow: hidden; + pointer-events: auto; + } + .star-base-main { + padding: var(--auto-20px) var(--auto-20px) 0px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + .star-base-title { + margin-top: var(--auto-10px); + margin-bottom: var(--auto-10px); + color: #262626; + font-size: var(--auto-18px); + font-weight: bold; + text-align: center; + line-height: var(--auto-20px); + } + .star-base-subtitle { + display: flex; + align-items: center; + justify-content: center; + font-size: var(--auto-16px); + color: #4d4d4d; + max-height: var(--auto-96px); + margin: var(--auto-10px) var(--auto-20px); + overflow: auto; ` diff --git a/src/components/dialog/base-dialog.ts b/src/components/dialog/base-dialog.ts index 1912c59..44f9436 100644 --- a/src/components/dialog/base-dialog.ts +++ b/src/components/dialog/base-dialog.ts @@ -13,13 +13,21 @@ const USE_DIALOG = 0 export default class StarBaseDialog extends StarBaseElement { title!: string + subtitle!: string + + image!: string + + checkBoxText!: string + value!: string cancel!: string confirm!: string - onconfirm!: (e: Event) => void + dataTo!: Object + + onconfirm!: (e: Object) => void oncancel!: (e: Event) => void @@ -49,9 +57,9 @@ export default class StarBaseDialog extends StarBaseElement { return this.parentElement || (this.getRootNode() as Element) } - protected handleConfirm(e: Event) { + protected handleConfirm() { this.parent.removeChild(this) - this.onconfirm?.(e) + this.onconfirm?.(this.dataTo) } protected handleCancel(e: Event) { @@ -64,20 +72,21 @@ export default class StarBaseDialog extends StarBaseElement { */ private renderDialog() { return html` - -
${this.headerContent}
-
${this.mainContent}
-
${this.bottomContent}
- + + ${this.renderMockDialog()} ` } private renderMockDialog() { return html` -
-
${this.headerContent}
-
${this.mainContent}
-
${this.bottomContent}
+
+
+
${this.headerContent}
+
${this.mainContent}
+
${this.bottomContent}
+
` } diff --git a/src/components/dialog/confirm-dialog.css.ts b/src/components/dialog/confirm-dialog.css.ts index aee6e1a..06d5af7 100644 --- a/src/components/dialog/confirm-dialog.css.ts +++ b/src/components/dialog/confirm-dialog.css.ts @@ -1,10 +1,31 @@ import {css} from 'lit' export default css` - div { - position: absolute; - width: 200px; - height: 200px; - background-color: red; + .star-confirm-image{ + height: 48px; + width: 48px; + margin-bottom: 10px; } + .star-button-group { + display: flex; + font-size: 18px; + align-items: center; + line-height: 60px; + font-weight: bold; + } + .star-button1 { + flex: 1; + color: #4d4d4d; + text-align: center; + cursor: pointer; + } + .star-split-line { + height: 20px; + border: 1px solid rgba(0, 0, 0, 0.09); + } + .star-button2 { + flex: 1; + color: #1d98f0; + cursor: pointer; + text-align: center; ` diff --git a/src/components/dialog/confirm-dialog.ts b/src/components/dialog/confirm-dialog.ts index 83e0579..0df9eb5 100644 --- a/src/components/dialog/confirm-dialog.ts +++ b/src/components/dialog/confirm-dialog.ts @@ -11,27 +11,59 @@ import '../button/button.js' interface ConfirmDialogOptions { title?: string + subtitle?: string + image?: string + dataTo?: Object + checkBoxText?: string cancel?: string confirm?: string oncancel?: () => void - onconfirm?: () => void + onconfirm?: (e: Object) => void } @customElement('star-confirm-dialog') export class StarConfirmDialog extends StarBaseDialog { + constructor(obj: ConfirmDialogOptions) { + super() + this.title = obj.title || '' + this.subtitle = obj.subtitle || '' + this.image = obj.image || '' + this.cancel = obj.cancel || '取消' + this.confirm = obj.confirm || '确定' + this.oncancel = obj.oncancel || (() => {}) + this.onconfirm = obj.onconfirm || (() => {}) + } + public static override get styles(): CSSResultArray { return [super.styles, confirmDialogStyles] } protected override get headerContent(): TemplateResult { return html` -

${this.title}

+
+ ${this.image + ? html` + + ` + : ''} +
${this.title}
+
${this.subtitle}
+
` } protected override get bottomContent(): TemplateResult { return html` - +
+ + ${this.cancel} + + + + ${this.confirm} + +
+ ` } - - constructor(obj: ConfirmDialogOptions) { - super() - this.title = obj.title || '' - this.cancel = obj.cancel || '取消' - this.confirm = obj.confirm || '确定' - this.oncancel = obj.oncancel || (() => {}) - this.onconfirm = obj.onconfirm || (() => {}) - } } diff --git a/src/components/dialog/prompt-dialog.css.ts b/src/components/dialog/prompt-dialog.css.ts index aee6e1a..d3b48f8 100644 --- a/src/components/dialog/prompt-dialog.css.ts +++ b/src/components/dialog/prompt-dialog.css.ts @@ -1,10 +1,43 @@ import {css} from 'lit' export default css` - div { - position: absolute; - width: 200px; - height: 200px; - background-color: red; + .star-prompt-main { + text-align: center; + } + .star-prompt-input { + background: #ffffff; + border-radius: 8px; + padding: 1% 0.1% 1% 0.1%; + font-size: 14px; + font-weight: 500; + color: #262626; + outline: none; + border: 2px solid #1d98f0; + } + .star-prompt-input:focus { + border: 2px solid #1d98f0; + } + .star-button-group { + display: flex; + font-size: 18px; + align-items: center; + line-height: 60px; + font-weight: bold; + } + .star-button1 { + flex: 1; + color: #4d4d4d; + text-align: center; + cursor: pointer; + } + .star-split-line { + height: 20px; + border: 1px solid rgba(0, 0, 0, 0.09); + } + .star-button2 { + flex: 1; + color: #1d98f0; + cursor: pointer; + text-align: center; } ` diff --git a/src/components/dialog/prompt-dialog.ts b/src/components/dialog/prompt-dialog.ts index 5a0ec8c..45b138f 100644 --- a/src/components/dialog/prompt-dialog.ts +++ b/src/components/dialog/prompt-dialog.ts @@ -12,15 +12,28 @@ import '../button/button.js' interface PromptDialogOptions { title?: string + subtitle?: string value?: string + dataTo?: Object cancel?: string confirm?: string oncancel?: () => void - onconfirm?: () => void + onconfirm?: (e: Object) => void } @customElement('star-prompt-dialog') export class StarPromptDialog extends StarBaseDialog { + constructor(obj: PromptDialogOptions) { + super() + this.title = obj.title || '' + this.subtitle = obj.subtitle || '' + this.value = obj.value || '' + this.cancel = obj.cancel || '取消' + this.confirm = obj.confirm || '确定' + this.dataTo = obj.dataTo || {} + this.oncancel = obj.oncancel || (() => {}) + this.onconfirm = obj.onconfirm || (() => {}) + } // 暴露给外部使用 @query('input') public promptInput!: HTMLInputElement @@ -30,21 +43,33 @@ export class StarPromptDialog extends StarBaseDialog { protected override get headerContent(): TemplateResult { return html` -

${this.title}

+
+
${this.title}
+
${this.subtitle}
+
` } protected override get mainContent(): TemplateResult { return html` -

- +

+

` } protected override get bottomContent(): TemplateResult { return html` - +
+ + ${this.cancel} + + + + ${this.confirm} + +
+ ` } - - constructor(obj: PromptDialogOptions) { - super() - this.title = obj.title || '' - this.value = obj.value || '' - this.cancel = obj.cancel || '取消' - this.confirm = obj.confirm || '确定' - this.oncancel = obj.oncancel || (() => {}) - this.onconfirm = obj.onconfirm || (() => {}) + transmitPrompt() { + let promptInput = this.promptInput.value.trim() //获取输入的内容 + this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''}) + this.handleConfirm() } } diff --git a/src/components/icon-added-container/icon-added-container.ts b/src/components/icon-added-container/icon-added-container.ts index 7cffe8b..b233277 100644 --- a/src/components/icon-added-container/icon-added-container.ts +++ b/src/components/icon-added-container/icon-added-container.ts @@ -47,7 +47,7 @@ interface DragAndDrop { delay: number // Timeout used to initiate drag-and-drop actions - timeout: NodeJS.Timeout + timeout: number // The child that was tapped/clicked child: any @@ -62,7 +62,7 @@ interface DragAndDrop { last: lastClickInfo // Timeout used to send drag-move events - moveTimeout: NodeJS.Timeout + moveTimeout: number // The last time a move event was fired lastMoveEventTime: number diff --git a/src/components/icon-unadd-container/icon-unadd-container.ts b/src/components/icon-unadd-container/icon-unadd-container.ts index 6841cd2..79a2858 100644 --- a/src/components/icon-unadd-container/icon-unadd-container.ts +++ b/src/components/icon-unadd-container/icon-unadd-container.ts @@ -44,7 +44,7 @@ interface DragAndDrop { delay: number // Timeout used to initiate drag-and-drop actions - timeout: NodeJS.Timeout + timeout: number // The child that was tapped/clicked child: any @@ -59,7 +59,7 @@ interface DragAndDrop { last: lastClickInfo // Timeout used to send drag-move events - moveTimeout: NodeJS.Timeout + moveTimeout: number // The last time a move event was fired lastMoveEventTime: number diff --git a/src/test/panels/dialog/asserts/icon1.png b/src/test/panels/dialog/asserts/icon1.png new file mode 100644 index 0000000000000000000000000000000000000000..4f010639385d30be5f7e9c47c363c944ba83406a GIT binary patch literal 4841 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 - - +
+ + + +
` } showAlert() { const starAlertDialog = new StarAlertDialog({ - text: '请先填写个人信息', - onconfirm: () => console.log('确认'), + text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐', + checkBoxText: '不再提示', + onconfirm: (e: any) => console.log('确定', e), }) console.log(starAlertDialog) this.shadowRoot?.appendChild(starAlertDialog) @@ -46,7 +49,9 @@ export class PanelDialog extends LitElement { showConfirm() { const starConfirmDialog = new StarConfirmDialog({ - title: '确定要离开吗？', + image: '/src/test/panels/dialog/asserts/icon1.png', + title: '是否卸载"影音"', + subtitle: '卸载应用将会同步清除其所有数据', oncancel: () => console.log('取消'), onconfirm: () => console.log('确定'), }) @@ -55,10 +60,11 @@ export class PanelDialog extends LitElement { showPrompt() { const starPromptDialog = new StarPromptDialog({ - title: '请输入你的账号：', + title: '内容', + subtitle: '描述性文字描述性文字描述性文字', value: '8位数字', oncancel: () => console.log('取消'), - onconfirm: () => console.log('确定'), + onconfirm: (e: any) => console.log('确定', e), }) this.shadowRoot?.appendChild(starPromptDialog) } diff --git a/src/test/panels/shared-picker-styles.ts b/src/test/panels/shared-picker-styles.ts index 496bbe7..586a076 100644 --- a/src/test/panels/shared-picker-styles.ts +++ b/src/test/panels/shared-picker-styles.ts @@ -1,5 +1,5 @@ import {css, CSSResult} from 'lit' -import './iconfont/iconfont/iconfont.css' +// import './iconfont/iconfont/iconfont.css' export const sharedPickerStyles: CSSResult = css` * { From c2e3fe6b0abc79bb2bb0de2b8723f5b47c47c277 Mon Sep 17 00:00:00 2001 From: lvxiangcong Date: Thu, 10 Nov 2022 15:28:06 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=BC=B9=E6=A1=86=E4=BD=8D=E7=BD=AE,=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dialog/base-dialog.css.ts | 6 +++--- src/components/dialog/base-dialog.ts | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/dialog/base-dialog.css.ts b/src/components/dialog/base-dialog.css.ts index 236b34a..f7f4f1f 100644 --- a/src/components/dialog/base-dialog.css.ts +++ b/src/components/dialog/base-dialog.css.ts @@ -1,15 +1,15 @@ import {css} from 'lit' export default css` - * { + /* * { border: none; background: transparent; - } + } */ dialog::backdrop { background: green; - border:2px solid yellow; } .star-confirm-background { + top:0; position: fixed; width: 100vw; height: 100vh; diff --git a/src/components/dialog/base-dialog.ts b/src/components/dialog/base-dialog.ts index 44f9436..5e79f30 100644 --- a/src/components/dialog/base-dialog.ts +++ b/src/components/dialog/base-dialog.ts @@ -72,10 +72,9 @@ export default class StarBaseDialog extends StarBaseElement { */ private renderDialog() { return html` - - ${this.renderMockDialog()} + ` } From a9e2a0747fd56e8b59eb4145c2bd636910e2bf13 Mon Sep 17 00:00:00 2001 From: lvxiangcong Date: Sat, 12 Nov 2022 17:06:25 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E5=96=84alter,confirm,prompt?= =?UTF-8?q?=E5=BC=B9=E7=AA=97,=E5=AE=9E=E7=8E=B0=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94,=E6=B7=B1=E6=B5=85=E6=A8=A1=E5=BC=8F=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=92=8C=E8=87=AA=E5=8A=A8=E8=81=9A=E7=84=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 7 +++ src/components/dialog/alert-dialog.css.ts | 50 +++++++++++---- src/components/dialog/alert-dialog.ts | 42 ++++++------- src/components/dialog/base-dialog.css.ts | 40 +++--------- src/components/dialog/base-dialog.ts | 8 +-- src/components/dialog/confirm-dialog.css.ts | 48 +++++++------- src/components/dialog/confirm-dialog.ts | 19 ++---- src/components/dialog/prompt-dialog.css.ts | 69 +++++++++++++-------- src/components/dialog/prompt-dialog.ts | 48 +++++++------- src/components/dialog/svg/close_lm.svg | 10 +++ src/test/panels/dialog/dialog.ts | 67 +++++++++++++++++--- 11 files changed, 250 insertions(+), 158 deletions(-) create mode 100644 src/components/dialog/svg/close_lm.svg diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index b7940c9..7af012b 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -5,6 +5,7 @@ export const autoPxStyle: CSSResult = css` --hostDevicePixelRatio: var(--devicePixelRatio, 1); --auto-1px: calc(1px / var(--hostDevicePixelRatio)); --auto-6px: calc(6px / var(--hostDevicePixelRatio)); + --auto-8px: calc(9px / var(--hostDevicePixelRatio)); --auto-9px: calc(9px / var(--hostDevicePixelRatio)); --auto-10px: calc(10px / var(--hostDevicePixelRatio)); --auto-12px: calc(12px / var(--hostDevicePixelRatio)); @@ -26,6 +27,7 @@ export const autoPxStyle: CSSResult = css` --auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio)); --auto-40px: calc(40px / var(--hostDevicePixelRatio)); --auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio)); + --auto-45px: calc(44.8px / var(--hostDevicePixelRatio)); --auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio)); --auto-48px: calc(48px / var(--hostDevicePixelRatio)); --auto-50px: calc(50px / var(--hostDevicePixelRatio)); @@ -33,8 +35,10 @@ export const autoPxStyle: CSSResult = css` --auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio)); --auto-64px: calc(64px / var(--hostDevicePixelRatio)); --auto-66px: calc(66px / var(--hostDevicePixelRatio)); + --auto-74px: calc(66px / var(--hostDevicePixelRatio)); --auto-76px: calc(76px / var(--hostDevicePixelRatio)); --auto-80px: calc(80px / var(--hostDevicePixelRatio)); + --auto-82px: calc(80px / var(--hostDevicePixelRatio)); --auto-88px: calc(88px / var(--hostDevicePixelRatio)); --auto-92px: calc(92px / var(--hostDevicePixelRatio)); --auto-96px: calc(96px / var(--hostDevicePixelRatio)); @@ -54,7 +58,10 @@ export const autoPxStyle: CSSResult = css` --auto-368px: calc(368px / var(--hostDevicePixelRatio)); --auto-418px: calc(418px / var(--hostDevicePixelRatio)); --auto-440px: calc(440px / var(--hostDevicePixelRatio)); + --auto-472px: calc(440px / var(--hostDevicePixelRatio)); --auto-520px: calc(520px / var(--hostDevicePixelRatio)); + --auto-524px: calc(520px / var(--hostDevicePixelRatio)); --auto-607px: calc(607px / var(--hostDevicePixelRatio)); + --auto-620px: calc(607px / var(--hostDevicePixelRatio)); } ` diff --git a/src/components/dialog/alert-dialog.css.ts b/src/components/dialog/alert-dialog.css.ts index e1681b4..a55fcad 100644 --- a/src/components/dialog/alert-dialog.css.ts +++ b/src/components/dialog/alert-dialog.css.ts @@ -1,21 +1,49 @@ import {css} from 'lit' export default css` - .star-alter-checkbox { - align-self: start; - font-size: 16px; - color: #8a8a8a; - margin: var(--auto-10px) var(--auto-20px); + .star-alter-title { + color: #262626; + font-size: var(--auto-28px); + font-weight: bold; + text-align: center; + line-height: var(--auto-36px); + max-height: var(--auto-524px); + margin: var(--auto-40px) var(--auto-48px) 0px; } - .star-alter-group { + .star-alter-subtitle { display: flex; - font-size: 18px; align-items: center; justify-content: center; - line-height: 60px; + font-size: var(--auto-26px); + color: #4d4d4d; + font-weight: 400; + line-height: var(--auto-40px); + max-height: var(--auto-524px); + margin: var(--auto-8px) var(--auto-48px) 0px; + overflow: auto; } - .star-alter-button { - color: #1d98f0; - font-weight: bold; + .star-alter-checkbox { + align-self: start; + font-size: var(--auto-26px); + color: #8a8a8a; + font-weight: 400; + line-height: var(--auto-40px); + margin-top: var(--auto-16px); + margin-left: var(--auto-45px); + } + .alter-checkbox { + width: var(--auto-26px); + height: var(--auto-26px); + } + @media (prefers-color-scheme: dark) { + .star-alter-title { + color: var(--font-main-white); + } + .star-alter-subtitle { + color: var(--font-secondary-white); + } + .star-alter-checkbox { + color: var(--font-sec-auxiliary-white); + } } ` diff --git a/src/components/dialog/alert-dialog.ts b/src/components/dialog/alert-dialog.ts index 7e78111..ba1b4ea 100644 --- a/src/components/dialog/alert-dialog.ts +++ b/src/components/dialog/alert-dialog.ts @@ -16,7 +16,7 @@ interface AlertDialogOptions { checkBoxText?: string confirm?: string dataTo?: Object - onconfirm?: (e: Object) => void + onconfirm?: () => void } @customElement('star-alert-dialog') @@ -40,24 +40,28 @@ export class StarAlertDialog extends StarBaseDialog { text!: string - onconfirm!: (e: Object) => void + onconfirm!: (e: Event) => void protected override get headerContent(): TemplateResult { return html`
-
${this.title}
+
${this.title}
` } protected override get mainContent(): TemplateResult { return html` - ${this.text} + ${this.text} ${this.checkBoxText ? html`
@@ -68,28 +72,22 @@ export class StarAlertDialog extends StarBaseDialog { protected override get bottomContent(): TemplateResult { return html` -
- - ${this.confirm} - -
- + ` } - transmitAlter() { - if (this.checkBoxText) { - let checkedInput = this.alterInput.checked - console.log(checkedInput) - // @ts-ignore - this.dataTo.checked = checkedInput - } - this.handleConfirm() - } + // transmitAlter() { + // if (this.checkBoxText) { + // let checkedInput = this.alterInput.checked + // // @ts-ignore + // this.dataTo.checked = checkedInput + // } + // this.handleConfirm() + // } } diff --git a/src/components/dialog/base-dialog.css.ts b/src/components/dialog/base-dialog.css.ts index f7f4f1f..5fb3728 100644 --- a/src/components/dialog/base-dialog.css.ts +++ b/src/components/dialog/base-dialog.css.ts @@ -1,15 +1,12 @@ import {css} from 'lit' export default css` - /* * { - border: none; - background: transparent; - } */ dialog::backdrop { background: green; } - .star-confirm-background { - top:0; + .star-base-background { + top: 0; + left: 0; position: fixed; width: 100vw; height: 100vh; @@ -19,40 +16,21 @@ export default css` align-items: center; } .star-base-dialog { - width: 380px; - background: linear-gradient( - 134.78deg, - #f7f5f7 2.34%, - #fafafa 34.11%, - #e1e4f2 100% - ); + width: var(--auto-620px); + background: var(--gradient-shallow); border-radius: var(--auto-20px); overflow: hidden; pointer-events: auto; } .star-base-main { - padding: var(--auto-20px) var(--auto-20px) 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; } - .star-base-title { - margin-top: var(--auto-10px); - margin-bottom: var(--auto-10px); - color: #262626; - font-size: var(--auto-18px); - font-weight: bold; - text-align: center; - line-height: var(--auto-20px); + @media (prefers-color-scheme: dark) { + .star-base-dialog { + background: var(--gradient-deep); + } } - .star-base-subtitle { - display: flex; - align-items: center; - justify-content: center; - font-size: var(--auto-16px); - color: #4d4d4d; - max-height: var(--auto-96px); - margin: var(--auto-10px) var(--auto-20px); - overflow: auto; ` diff --git a/src/components/dialog/base-dialog.ts b/src/components/dialog/base-dialog.ts index 5e79f30..9e77591 100644 --- a/src/components/dialog/base-dialog.ts +++ b/src/components/dialog/base-dialog.ts @@ -27,7 +27,7 @@ export default class StarBaseDialog extends StarBaseElement { dataTo!: Object - onconfirm!: (e: Object) => void + onconfirm!: (e: Event) => void oncancel!: (e: Event) => void @@ -57,9 +57,9 @@ export default class StarBaseDialog extends StarBaseElement { return this.parentElement || (this.getRootNode() as Element) } - protected handleConfirm() { + protected handleConfirm(e: Event) { this.parent.removeChild(this) - this.onconfirm?.(this.dataTo) + this.onconfirm?.(e) } protected handleCancel(e: Event) { @@ -80,7 +80,7 @@ export default class StarBaseDialog extends StarBaseElement { private renderMockDialog() { return html` -
+
${this.headerContent}
${this.mainContent}
diff --git a/src/components/dialog/confirm-dialog.css.ts b/src/components/dialog/confirm-dialog.css.ts index 06d5af7..988c885 100644 --- a/src/components/dialog/confirm-dialog.css.ts +++ b/src/components/dialog/confirm-dialog.css.ts @@ -1,31 +1,37 @@ import {css} from 'lit' export default css` - .star-confirm-image{ - height: 48px; - width: 48px; - margin-bottom: 10px; + .star-confirm-image { + height: var(--auto-64px); + width: var(--auto-64px); + margin-top: var(--auto-48px); } - .star-button-group { - display: flex; - font-size: 18px; - align-items: center; - line-height: 60px; + .star-confirm-title { + color: #262626; + font-size: var(--auto-28px); font-weight: bold; + text-align: center; + line-height: var(--auto-36px); + max-height: var(--auto-524px); + margin: var(--auto-56px) var(--auto-48px) 0px; } - .star-button1 { - flex: 1; + .star-confirm-subtitle { + display: flex; + align-items: center; + justify-content: center; + font-size: var(--auto-26px); color: #4d4d4d; - text-align: center; - cursor: pointer; + line-height: var(--auto-40px); + max-height: var(--auto-524px); + margin: var(--auto-14px) var(--auto-48px) 0px; + overflow: auto; } - .star-split-line { - height: 20px; - border: 1px solid rgba(0, 0, 0, 0.09); + @media (prefers-color-scheme: dark) { + .star-confirm-title { + color: var(--font-main-white); + } + .star-confirm-subtitle { + color: var(--font-secondary-white); + } } - .star-button2 { - flex: 1; - color: #1d98f0; - cursor: pointer; - text-align: center; ` diff --git a/src/components/dialog/confirm-dialog.ts b/src/components/dialog/confirm-dialog.ts index 0df9eb5..a9147db 100644 --- a/src/components/dialog/confirm-dialog.ts +++ b/src/components/dialog/confirm-dialog.ts @@ -18,7 +18,7 @@ interface ConfirmDialogOptions { cancel?: string confirm?: string oncancel?: () => void - onconfirm?: (e: Object) => void + onconfirm?: () => void } @customElement('star-confirm-dialog') @@ -46,24 +46,15 @@ export class StarConfirmDialog extends StarBaseDialog { ` : ''} -
${this.title}
-
${this.subtitle}
+
${this.title}
+
${this.subtitle}
` } protected override get bottomContent(): TemplateResult { return html` -
- - ${this.cancel} - - - - ${this.confirm} - -
- + ` } } diff --git a/src/components/dialog/prompt-dialog.css.ts b/src/components/dialog/prompt-dialog.css.ts index d3b48f8..e73f763 100644 --- a/src/components/dialog/prompt-dialog.css.ts +++ b/src/components/dialog/prompt-dialog.css.ts @@ -1,15 +1,40 @@ import {css} from 'lit' export default css` - .star-prompt-main { + .star-prompt-title { + color: #262626; + font-size: var(--auto-28px); + font-weight: bold; text-align: center; + line-height: var(--auto-36px); + max-height: var(--auto-524px); + margin: var(--auto-56px) var(--auto-74px) 0px; + } + .star-prompt-subtitle { + display: flex; + align-items: center; + justify-content: center; + font-size: var(--auto-26px); + color: #4d4d4d; + line-height: var(--auto-40px); + max-height: var(--auto-524px); + margin: var(--auto-20px) var(--auto-74px) 0px; + overflow: auto; + } + .star-prompt-main { + display: flex; + align-items: center; + justify-content: center; + font-size: var(--auto-26px); + margin: var(--auto-26px) var(--auto-74px) var(--auto-20px); } .star-prompt-input { + width: var(--auto-472px); + height: var(--auto-74px); background: #ffffff; - border-radius: 8px; - padding: 1% 0.1% 1% 0.1%; - font-size: 14px; - font-weight: 500; + border-radius: var(--auto-14px); + font-size: var(--auto-26px); + font-weight: bold; color: #262626; outline: none; border: 2px solid #1d98f0; @@ -17,27 +42,21 @@ export default css` .star-prompt-input:focus { border: 2px solid #1d98f0; } - .star-button-group { - display: flex; - font-size: 18px; - align-items: center; - line-height: 60px; - font-weight: bold; - } - .star-button1 { - flex: 1; - color: #4d4d4d; - text-align: center; + .star-input-close { + display: inline-block; + position: absolute; + right: var(--auto-30px); + top: 30%; cursor: pointer; + height: var(--auto-28px); + width: var(--auto-28px); } - .star-split-line { - height: 20px; - border: 1px solid rgba(0, 0, 0, 0.09); - } - .star-button2 { - flex: 1; - color: #1d98f0; - cursor: pointer; - text-align: center; + @media (prefers-color-scheme: dark) { + .star-prompt-title { + color: var(--font-main-white); + } + .star-prompt-subtitle { + color: var(--font-secondary-white); + } } ` diff --git a/src/components/dialog/prompt-dialog.ts b/src/components/dialog/prompt-dialog.ts index 45b138f..13434a2 100644 --- a/src/components/dialog/prompt-dialog.ts +++ b/src/components/dialog/prompt-dialog.ts @@ -9,6 +9,7 @@ import StarBaseDialog from './base-dialog.js' import promptDialogStyles from './prompt-dialog.css.js' import './base-dialog.js' import '../button/button.js' +import close_lm from './svg/close_lm.svg' interface PromptDialogOptions { title?: string @@ -18,7 +19,7 @@ interface PromptDialogOptions { cancel?: string confirm?: string oncancel?: () => void - onconfirm?: (e: Object) => void + onconfirm?: () => void } @customElement('star-prompt-dialog') @@ -44,32 +45,30 @@ export class StarPromptDialog extends StarBaseDialog { protected override get headerContent(): TemplateResult { return html`
-
${this.title}
-
${this.subtitle}
+
${this.title}
` } protected override get mainContent(): TemplateResult { return html` -

- -

+ ${this.subtitle} +
+ + + + +
` } protected override get bottomContent(): TemplateResult { return html` -
- - ${this.cancel} - - - - ${this.confirm} - -
- + ` } - transmitPrompt() { - let promptInput = this.promptInput.value.trim() //获取输入的内容 - this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''}) - this.handleConfirm() + closeValue() { + this.promptInput.value = '' } + protected firstUpdated() { + this.promptInput.focus() + this.promptInput.setSelectionRange(0, this.value.length) + } + // transmitPrompt() { + // let promptInput = this.promptInput.value.trim() //获取输入的内容 + // this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''}) + // this.handleConfirm() + // } } diff --git a/src/components/dialog/svg/close_lm.svg b/src/components/dialog/svg/close_lm.svg new file mode 100644 index 0000000..14e2ae4 --- /dev/null +++ b/src/components/dialog/svg/close_lm.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/test/panels/dialog/dialog.ts b/src/test/panels/dialog/dialog.ts index 96ed0aa..964beb0 100644 --- a/src/test/panels/dialog/dialog.ts +++ b/src/test/panels/dialog/dialog.ts @@ -12,36 +12,60 @@ export class PanelDialog extends LitElement { render() { return html`
+

基础弹框样式

+
+

扩展弹框样式

+ + + +
` } showAlert() { const starAlertDialog = new StarAlertDialog({ text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐', - checkBoxText: '不再提示', - onconfirm: (e: any) => console.log('确定', e), + onconfirm: () => console.log('确定'), }) console.log(starAlertDialog) this.shadowRoot?.appendChild(starAlertDialog) @@ -49,9 +73,7 @@ export class PanelDialog extends LitElement { showConfirm() { const starConfirmDialog = new StarConfirmDialog({ - image: '/src/test/panels/dialog/asserts/icon1.png', - title: '是否卸载"影音"', - subtitle: '卸载应用将会同步清除其所有数据', + title: '是否删除联系人?', oncancel: () => console.log('取消'), onconfirm: () => console.log('确定'), }) @@ -59,12 +81,39 @@ export class PanelDialog extends LitElement { } showPrompt() { + const starPromptDialog = new StarPromptDialog({ + title: '内容', + subtitle: '描述性文字描述性文字描述性文字', + oncancel: () => console.log('取消'), + onconfirm: () => console.log('确定'), + }) + this.shadowRoot?.appendChild(starPromptDialog) + } + showAlert1() { + const starAlertDialog = new StarAlertDialog({ + text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐', + checkBoxText: '不再提示', + onconfirm: () => console.log('确定'), + }) + console.log(starAlertDialog) + this.shadowRoot?.appendChild(starAlertDialog) + } + showConfirm1() { + const starConfirmDialog = new StarConfirmDialog({ + title: '是否移除"天气"组件？', + subtitle: '长按屏幕空白处进入组件编辑页面，可重新添加该组件', + oncancel: () => console.log('取消'), + onconfirm: () => console.log('确定'), + }) + this.shadowRoot?.appendChild(starConfirmDialog) + } + showPrompt1() { const starPromptDialog = new StarPromptDialog({ title: '内容', subtitle: '描述性文字描述性文字描述性文字', value: '8位数字', oncancel: () => console.log('取消'), - onconfirm: (e: any) => console.log('确定', e), + onconfirm: () => console.log('确定'), }) this.shadowRoot?.appendChild(starPromptDialog) }