1/* 2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16const CHECKBOX_CONTAINER_HEIGHT: number = 48 17const CONTENT_MAX_LINES: number = 2 18const DIVIDER_CONTAINER_WIDTH: number = 16 19const DIVIDER_HEIGHT: number = 24 20const DIVIDER_WIDTH: number = 2 21const LOADING_PROGRESS_WIDTH: number = 40 22const LOADING_PROGRESS_HEIGHT: number = 48 23const ITEM_TEXT_SIZE: number = 14 24export declare type ButtonOptions = { 25 value: ResourceStr; 26 action?: () => void; 27 background?: ResourceColor; 28 fontColor?: ResourceColor; 29} 30 31@CustomDialog 32export struct TipsDialog{ 33 controller: CustomDialogController 34 imageRes: Resource 35 imageSize: SizeOptions = {width: '100%', height: 180} 36 title: ResourceStr = '' 37 content?: ResourceStr = '' 38 checkTips?: ResourceStr = '' 39 @State isChecked?: boolean = false 40 primaryButton?: ButtonOptions = {value: ""} 41 secondaryButton?: ButtonOptions = {value: ""} 42 43 build() { 44 Column() { 45 Row() { 46 Column() { 47 Image(this.imageRes) 48 .size(this.imageSize) 49 .objectFit(ImageFit.Fill) 50 }.layoutWeight(1) 51 .clip(true) 52 }.width('100%') 53 .padding({ left: 24, right: 24}) 54 .margin({top: 24}) 55 Row() { 56 Text(this.title) 57 .fontSize($r('sys.float.ohos_id_text_size_headline8')) 58 .fontWeight(FontWeight.Medium) 59 .fontColor($r('sys.color.ohos_id_color_text_primary')) 60 .textAlign(TextAlign.Center) 61 .maxLines(CONTENT_MAX_LINES) 62 .textOverflow({ overflow: TextOverflow.Ellipsis }) 63 .minFontSize(15) 64 .maxFontSize($r('sys.float.ohos_id_text_size_headline8')) 65 }.padding({ left: 24, right: 24 }) 66 .margin({top: 16}) 67 if (this.content) { 68 Row() { 69 Text(this.content) 70 .fontSize($r('sys.float.ohos_id_text_size_body1')) 71 .fontWeight(FontWeight.Regular) 72 .fontColor($r('sys.color.ohos_id_color_text_primary')) 73 .textAlign(TextAlign.Center) 74 .minFontSize($r('sys.float.ohos_id_text_size_body3')) 75 .maxLines(CONTENT_MAX_LINES) 76 .textOverflow({ overflow: TextOverflow.Ellipsis }) 77 }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) 78 .width('100%') 79 } 80 Row() { 81 Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked) 82 .onChange((checked: boolean) => { 83 this.isChecked = checked 84 }) 85 .margin({ left: 0, right: 8}) 86 Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2')) 87 .fontWeight(FontWeight.Medium) 88 .fontColor($r('sys.color.ohos_id_color_text_primary')) 89 .maxLines(CONTENT_MAX_LINES) 90 .layoutWeight(1) 91 .focusOnTouch(true) 92 .textOverflow({ overflow: TextOverflow.Ellipsis }) 93 .onClick(() => { 94 this.isChecked = !this.isChecked 95 }) 96 }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 }) 97 98 Row() { 99 if (this.primaryButton.value) { 100 Button(this.primaryButton.value) 101 .fontSize($r('sys.float.ohos_id_text_size_button1')) 102 .fontWeight(FontWeight.Medium) 103 .layoutWeight(1) 104 .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 105 .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 106 .onClick(() => { 107 if (this.primaryButton.action) this.primaryButton.action() 108 this.controller.close() 109 }) 110 } 111 if (this.secondaryButton.value && this.primaryButton.value) { 112 Column() { 113 if (!this.secondaryButton.background) { 114 Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) 115 } 116 }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) 117 } 118 if (this.secondaryButton.value) { 119 Button(this.secondaryButton.value) 120 .fontSize($r('sys.float.ohos_id_text_size_button1')) 121 .fontWeight(FontWeight.Medium) 122 .layoutWeight(1) 123 .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 124 .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 125 .onClick(() => { 126 if (this.secondaryButton.action) this.secondaryButton.action() 127 this.controller.close() 128 }) 129 } 130 }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) 131 } 132 .backgroundBlurStyle(BlurStyle.Thick) 133 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 134 .margin({ 135 left: $r('sys.float.ohos_id_dialog_margin_start'), 136 right: $r('sys.float.ohos_id_dialog_margin_end'), 137 bottom: $r('sys.float.ohos_id_dialog_margin_bottom') 138 }) 139 // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found 140 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 141 } 142} 143 144@CustomDialog 145export struct SelectDialog{ 146 controller: CustomDialogController 147 title: ResourceStr = '' 148 content?: ResourceStr = '' 149 selectedIndex?: number = -1 150 confirm?: ButtonOptions = {value: ""} 151 radioContent: Array<SheetInfo> = [] 152 153 build() { 154 Column() { 155 Row() { 156 Text(this.title) 157 .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) 158 .fontWeight(FontWeight.Medium) 159 .maxLines(CONTENT_MAX_LINES) 160 .minFontSize(15) 161 .textOverflow({ overflow: TextOverflow.Ellipsis}) 162 .fontColor($r('sys.color.ohos_id_color_text_primary')) 163 .textAlign(TextAlign.Start) 164 .width('100%') 165 }.padding({ left: 24, right: 24, top: 24 }) 166 .constraintSize({minHeight: 56}) 167 if (this.content) { 168 Row() { 169 Text(this.content) 170 .fontSize($r('sys.float.ohos_id_text_size_body2')) 171 .fontWeight(FontWeight.Medium) 172 .fontColor($r('sys.color.ohos_id_color_text_primary')) 173 .maxLines(CONTENT_MAX_LINES) 174 .textOverflow({ overflow: TextOverflow.Ellipsis}) 175 .minFontSize($r('sys.float.ohos_id_text_size_body3')) 176 }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) 177 .width('100%') 178 } 179 List({space: 1}) { 180 ForEach(this.radioContent, (item: SheetInfo, index?: number) => { 181 ListItem() { 182 Column() { 183 Row() { 184 Text(item.title) 185 .fontSize(ITEM_TEXT_SIZE) 186 .fontWeight(FontWeight.Medium) 187 .maxLines(CONTENT_MAX_LINES) 188 .fontColor($r('sys.color.ohos_id_color_text_primary')) 189 .layoutWeight(1) 190 Radio({ value: 'item.title', group: 'radioGroup'}) 191 .size({ width : 20, height : 20}) 192 .checked(this.selectedIndex == index) 193 .onClick(() => { 194 item.action && item.action() 195 this.controller.close() 196 }) 197 }.constraintSize({minHeight: 48}).clip(false) 198 .onClick(() => { 199 item.action && item.action() 200 this.controller.close() 201 }) 202 if (index < this.radioContent.length - 1) { 203 Divider().color($r('sys.color.ohos_id_color_list_separator')) 204 } 205 } 206 } 207 }) 208 }.width('100%').padding({ left: 24, right: 24, top: 8, bottom: 8 }).clip(false) 209 Row() { 210 if (this.confirm.value) { 211 Button(this.confirm.value) 212 .fontSize($r('sys.float.ohos_id_text_size_button1')) 213 .fontWeight(FontWeight.Medium) 214 .layoutWeight(1) 215 .backgroundColor(this.confirm.background? this.confirm.background: $r('sys.color.ohos_id_color_background_transparent')) 216 .fontColor(this.confirm.fontColor ? this.confirm.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 217 .onClick(() => { 218 this.confirm.action && this.confirm.action() 219 this.controller.close() 220 }) 221 } 222 }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) 223 } 224 .backgroundBlurStyle(BlurStyle.Thick) 225 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 226 .margin({ 227 left: $r('sys.float.ohos_id_dialog_margin_start'), 228 right: $r('sys.float.ohos_id_dialog_margin_end'), 229 bottom: $r('sys.float.ohos_id_dialog_margin_bottom') 230 }) 231 // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found 232 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 233 } 234} 235 236@CustomDialog 237export struct ConfirmDialog{ 238 controller: CustomDialogController 239 title: ResourceStr = '' 240 content?: ResourceStr = '' 241 checkTips?: ResourceStr = '' 242 @State isChecked?: boolean = false 243 primaryButton?: ButtonOptions = {value: ""} 244 secondaryButton?: ButtonOptions = {value: ""} 245 246 build() { 247 Column() { 248 Row() { 249 Text(this.title) 250 .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) 251 .fontWeight(FontWeight.Medium) 252 .maxLines(CONTENT_MAX_LINES) 253 .minFontSize(15) 254 .textOverflow({ overflow: TextOverflow.Ellipsis}) 255 .fontColor($r('sys.color.ohos_id_color_text_primary')) 256 .textAlign(TextAlign.Start) 257 .width('100%') 258 }.padding({ left: 24, right: 24, top: 24 }) 259 .constraintSize({minHeight: 56}) 260 if (this.content) { 261 Row() { 262 Text(this.content) 263 .fontSize($r('sys.float.ohos_id_text_size_body1')) 264 .fontWeight(FontWeight.Medium) 265 .fontColor($r('sys.color.ohos_id_color_text_primary')) 266 .maxLines(CONTENT_MAX_LINES) 267 .textOverflow({ overflow: TextOverflow.Ellipsis}) 268 .minFontSize($r('sys.float.ohos_id_text_size_body3')) 269 }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) 270 .width('100%') 271 .constraintSize({minHeight: 36}) 272 } 273 Row() { 274 Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked) 275 .onChange((checked: boolean) => { 276 this.isChecked = checked 277 }) 278 .margin({ left: 0, right: 8}) 279 Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2')) 280 .fontWeight(FontWeight.Medium) 281 .fontColor($r('sys.color.ohos_id_color_text_primary')) 282 .maxLines(CONTENT_MAX_LINES) 283 .layoutWeight(1) 284 .focusOnTouch(true) 285 .textOverflow({ overflow: TextOverflow.Ellipsis }) 286 .onClick(() => { 287 this.isChecked = !this.isChecked 288 }) 289 }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 }) 290 291 Row() { 292 if (this.primaryButton.value) { 293 Button(this.primaryButton.value) 294 .fontSize($r('sys.float.ohos_id_text_size_button1')) 295 .fontWeight(FontWeight.Medium) 296 .layoutWeight(1) 297 .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 298 .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 299 .onClick(() => { 300 if (this.primaryButton.action) this.primaryButton.action() 301 this.controller.close() 302 }) 303 } 304 if (this.secondaryButton.value && this.primaryButton.value) { 305 Column() { 306 if (!this.secondaryButton.background) { 307 Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) 308 } 309 }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) 310 } 311 if (this.secondaryButton.value) { 312 Button(this.secondaryButton.value) 313 .fontSize($r('sys.float.ohos_id_text_size_button1')) 314 .fontWeight(FontWeight.Medium) 315 .layoutWeight(1) 316 .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 317 .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 318 .onClick(() => { 319 if (this.secondaryButton.action) this.secondaryButton.action() 320 this.controller.close() 321 }) 322 } 323 }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) 324 } 325 .backgroundBlurStyle(BlurStyle.Thick) 326 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 327 .margin({ 328 left: $r('sys.float.ohos_id_dialog_margin_start'), 329 right: $r('sys.float.ohos_id_dialog_margin_end'), 330 bottom: $r('sys.float.ohos_id_dialog_margin_bottom') 331 }) 332 // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found 333 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 334 } 335} 336 337@CustomDialog 338export struct AlertDialog{ 339 controller: CustomDialogController 340 content: ResourceStr = '' 341 primaryButton?: ButtonOptions = {value: ""} 342 secondaryButton?: ButtonOptions = {value: ""} 343 build() { 344 Column() { 345 Row() { 346 Text(this.content) 347 .fontSize($r('sys.float.ohos_id_text_size_body1')) 348 .fontWeight(FontWeight.Medium) 349 .fontColor($r('sys.color.ohos_id_color_text_primary')) 350 }.padding({ 351 left: 24, 352 right: 24, 353 top: 24, 354 bottom: this.secondaryButton.value || this.primaryButton.value ? 0 : 24 355 }) 356 Row() { 357 if (this.primaryButton.value) { 358 Button(this.primaryButton.value) 359 .fontSize($r('sys.float.ohos_id_text_size_button1')) 360 .fontWeight(FontWeight.Medium) 361 .layoutWeight(1) 362 .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 363 .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 364 .onClick(() => { 365 if (this.primaryButton.action) this.primaryButton.action() 366 this.controller.close() 367 }) 368 } 369 if (this.secondaryButton.value && this.primaryButton.value) { 370 Column() { 371 if (!this.secondaryButton.background) { 372 Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) 373 } 374 }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) 375 } 376 if (this.secondaryButton.value) { 377 Button(this.secondaryButton.value) 378 .fontSize($r('sys.float.ohos_id_text_size_button1')) 379 .fontWeight(FontWeight.Medium) 380 .layoutWeight(1) 381 .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) 382 .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) 383 .onClick(() => { 384 if (this.secondaryButton.action) this.secondaryButton.action() 385 this.controller.close() 386 }) 387 } 388 }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) 389 } 390 .backgroundBlurStyle(BlurStyle.Thick) 391 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 392 .margin({ 393 left: $r('sys.float.ohos_id_dialog_margin_start'), 394 right: $r('sys.float.ohos_id_dialog_margin_end'), 395 bottom: $r('sys.float.ohos_id_dialog_margin_bottom') 396 }) 397 // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found 398 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 399 } 400} 401 402@CustomDialog 403export struct LoadingDialog{ 404 controller: CustomDialogController 405 content?: ResourceStr = '' 406 build() { 407 Column() { 408 Row() { 409 Text(this.content) 410 .fontSize($r('sys.float.ohos_id_text_size_body1')) 411 .fontWeight(FontWeight.Medium) 412 .fontColor($r('sys.color.ohos_id_color_text_primary')) 413 .layoutWeight(1) 414 LoadingProgress().width(LOADING_PROGRESS_WIDTH).height(LOADING_PROGRESS_HEIGHT).margin({ left: 16 }) 415 }.margin({ left: 24, right: 24, top: 24, bottom: 24 }) 416 .constraintSize({minHeight: 48}) 417 } 418 .backgroundBlurStyle(BlurStyle.Thick) 419 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 420 .margin({ 421 left: $r('sys.float.ohos_id_dialog_margin_start'), 422 right: $r('sys.float.ohos_id_dialog_margin_end'), 423 bottom: $r('sys.float.ohos_id_dialog_margin_bottom') 424 }) 425 // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found 426 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 427 } 428}