Switch to Api8

Signed-off-by: xuchangzhou <xuzhangzhou@huawei.com>
This commit is contained in:
xuchangzhou 2022-02-16 12:23:39 +08:00
parent 25ab786aff
commit f9c985eb43
11 changed files with 160 additions and 255 deletions

View File

@ -112,7 +112,7 @@ struct RadioComponent {
.align(Alignment.Start);
Row() {
Radio( {value: this.settingValue} )
Radio( {value: this.settingValue, group: ''} )
.height($r('app.float.radio_component_height'))
.margin({ right: $r('app.float.radio_component_margin_bottom_right') })
.align(Alignment.End)

View File

@ -44,7 +44,7 @@ export default struct SliderComponent {
.onClick(() => {
if (this.value != this.min && this.clickConfirm) {
this.value = Math.max(this.min, this.value - this.step);
this.onChangeHandler(this.value, SliderChangeMode.END);
this.onChangeHandler(this.value, SliderChangeMode.End);
}
}).align(Alignment.Center)
@ -82,7 +82,7 @@ export default struct SliderComponent {
.onClick(() => {
if (this.value != this.max && this.clickConfirm) {
this.value = Math.min(this.max, this.value + this.step);
this.onChangeHandler(this.value, SliderChangeMode.END);
this.onChangeHandler(this.value, SliderChangeMode.End);
}
}).align(Alignment.Center)

View File

@ -45,9 +45,14 @@ export default struct SwitchComponent {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Text(this.title)
.cssSwitchComponentTiTle(this.cssValue?.fontSize)
.fontColor(Color.Black)
.fontStyle(FontStyle.Normal)
.padding({ left: $r('app.float.switch_component_margin') })
.fontSize(this.cssValue?.fontSize)
Toggle({ type: ToggleType.Switch, isOn: this.isOn })
.cssSwitchComponentToggle()
.width($r('app.float.switch_toggle_width'))
.height($r('app.float.switch_toggle_height'))
.padding({ right: $r('app.float.switch_component_margin') })
.onChange((isOn: boolean) => {
this.isOn = new Boolean(isOn).valueOf();
if (this.toggleValue) {
@ -55,7 +60,10 @@ export default struct SwitchComponent {
}
});
}
.cssSwitchComponentFlex(this.cssValue?.margin, this.cssValue?.padding, this.cssValue?.width, this.cssValue?.height);
.width(this.cssValue?.width)
.height(this.cssValue?.height)
.margin(this.cssValue?.margin)
.padding(this.cssValue?.padding);
}
aboutToAppear() {
@ -69,24 +77,4 @@ export default struct SwitchComponent {
.initData();
}
}
}
@Extend(Text) function cssSwitchComponentTiTle (fontSize: number | string | Resource=$r('app.float.switch_title_subtitle_size')) {
.fontColor(Color.Black)
.fontStyle(FontStyle.Normal)
.padding({ left: $r('app.float.switch_component_margin') })
.fontSize(fontSize)
}
@Extend(Toggle) function cssSwitchComponentToggle () {
.width($r('app.float.switch_toggle_width'))
.height($r('app.float.switch_toggle_height'))
.padding({ right: $r('app.float.switch_component_margin') })
}
@Extend(Flex) function cssSwitchComponentFlex (margin: any, padding: any, width: number | string | Resource=ComponentConfig.WH_100_100, height: number | string | Resource=$r('app.float.switch_component_height')) {
.width(width)
.height(height)
.margin(margin)
.padding(padding)
}

View File

@ -158,24 +158,38 @@ struct ShowDialog {
})
Text(`${appInfo.settingTitle}`)
.dialogMsg()
.fontSize($r('app.float.font_18'))
.align(Alignment.Center)
.margin({ bottom: $r('app.float.item_common_vertical_margin') })
Text($r("app.string.uninstall_prompt"))
.dialogMsg()
.fontSize($r('app.float.font_18'))
.align(Alignment.Center)
.margin({ bottom: $r('app.float.item_common_vertical_margin') })
// button
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Button() {
Text($r('app.string.cancel')).dialogBtnName()
}.dialogBtn()
Text($r('app.string.cancel'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
}
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_160"))
.height($r("app.float.wh_value_40"))
.onClick(() => {
this.dialogController.close();
})
Button() {
Text($r('app.string.uninstall')).dialogBtnName()
}.dialogBtn()
Text($r('app.string.uninstall'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
}
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_160"))
.height($r("app.float.wh_value_40"))
.onClick(() => {
this.action();
this.dialogController.close();
@ -189,23 +203,4 @@ struct ShowDialog {
.alignItems(HorizontalAlign.Center)
.width(ConfigData.WH_100_100);
}
}
@Extend(Text) function dialogBtnName () {
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
}
@Extend(Button) function dialogBtn () {
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_160"))
.height($r("app.float.wh_value_40"))
}
@Extend(Text) function dialogMsg () {
.fontSize($r('app.float.font_18'))
.align(Alignment.Center)
.margin({
bottom: $r('app.float.item_common_vertical_margin')
})
}

View File

@ -103,7 +103,12 @@ struct PasswordCheck {
Row() {
// attempt seconds
Text($r('app.string.password_remain_times', this.freezingTimeForView))
.freezingTime()
.fontSize($r('app.float.font_28'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
.margin({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
.padding({ left: $r('app.float.item_common_horizontal_margin'), right: $r('app.float.item_common_horizontal_margin') })
.align(Alignment.Center)
}
.backgroundColor(Color.Gray)
.margin({
@ -116,7 +121,10 @@ struct PasswordCheck {
Column() {
// input message
Text(' ')
.inputMsg()
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
.align(Alignment.Center)
.visibility(Visibility.Hidden)
// input password
@ -133,22 +141,37 @@ struct PasswordCheck {
// prompt message
Text(this.promptMessage)
.promptMsg()
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.password_input_message_vertical_margin') })
// button
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button() {
Text($r('app.string.cancel')).dialogBtnName()
Text($r('app.string.cancel'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(() => {
Router.back();
})
Button() {
Text($r('app.string.next')).dialogBtnName()
Text($r('app.string.next'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(this.okOnClickHandler);
}
@ -234,52 +257,4 @@ struct PasswordCheck {
}
}
}
@Extend(Text) function freezingTime () {
.fontSize($r('app.float.font_28'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
.margin({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
.padding({
left: $r('app.float.item_common_horizontal_margin'),
right: $r('app.float.item_common_horizontal_margin')
})
.align(Alignment.Center)
}
@Extend(Text) function inputMsg () {
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
.align(Alignment.Center)
}
@Extend(Text) function promptMsg () {
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({
top: $r('app.float.password_input_message_vertical_margin')
})
}
@Extend(Text) function dialogBtnName () {
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
@Extend(Button) function dialogBtn () {
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
}
}

View File

@ -115,7 +115,10 @@ struct PasswordInput {
Column() {
// input message
Text(this.inputMessage)
.inputMsg()
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
.align(Alignment.Center)
// input password
Row() {
@ -131,11 +134,22 @@ struct PasswordInput {
// prompt message
Text(this.checkMessage ? this.checkMessage : $r('app.string.password_set_prompt'))
.promptMsg()
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.password_input_message_vertical_margin') })
// change unlock method
Text($r('app.string.password_change_unlock_method'))
.changeUnlockMethod()
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_20'))
.fontColor(Color.Blue)
.align(Alignment.Center)
.textAlign(TextAlign.Center)
.visibility(Visibility.Visible)
.padding({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
.onClick(() => {
this.chooseUnlockMethodDialog.open()
})
@ -143,17 +157,27 @@ struct PasswordInput {
// button
Flex( { justifyContent: FlexAlign.SpaceAround } ) {
Button() {
Text($r('app.string.cancel')).dialogBtnName()
Text($r('app.string.cancel'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(() => {
Router.back();
})
Button() {
Text($r('app.string.continue_')).dialogBtnName()
Text($r('app.string.continue_'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(this.okOnClickHandler);
}
.margin({ top: $r('app.float.password_input_button_space') })
@ -340,9 +364,13 @@ struct chooseUnlockMethodDialog {
Column() {
Button() {
Text($r('app.string.cancel'))
.dialogBtnName()
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.align(Alignment.Bottom)
.onClick(() => {
this.closeDialog();
@ -350,56 +378,7 @@ struct chooseUnlockMethodDialog {
}
.width(ConfigData.WH_100_100)
.alignItems(HorizontalAlign.Center)
.margin({
top: $r('app.float.item_common_vertical_margin'),
bottom: $r('app.float.item_common_vertical_margin')
})
.margin({ top: $r('app.float.item_common_vertical_margin'), bottom: $r('app.float.item_common_vertical_margin') })
}
}
}
@Extend(Text) function inputMsg () {
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
.align(Alignment.Center)
}
@Extend(Text) function promptMsg () {
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({
top: $r('app.float.password_input_message_vertical_margin')
})
}
@Extend(Text) function changeUnlockMethod () {
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_20'))
.fontColor(Color.Blue)
.align(Alignment.Center)
.textAlign(TextAlign.Center)
.visibility(Visibility.Visible)
.padding({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
}
@Extend(Text) function dialogBtnName () {
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
@Extend(Button) function dialogBtn () {
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
}

View File

@ -106,7 +106,10 @@ struct PasswordRepeat {
Column() {
// input message
Text($r('app.string.password_message_repeat'))
.inputMsg()
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
.align(Alignment.Center)
// input password
Row() {
@ -121,26 +124,47 @@ struct PasswordRepeat {
// prompt message
Text(this.checkMessage ? this.checkMessage : $r("app.string.password_set_prompt"))
.promptMsg()
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.password_input_message_vertical_margin') })
// change unlock method (Hidden)
Text($r('app.string.password_change_unlock_method'))
.changeUnlockMethod()
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_20'))
.fontColor(Color.Blue)
.align(Alignment.Center)
.textAlign(TextAlign.Center)
.visibility(Visibility.Hidden)
.padding({ top: $r('app.float.password_input_message_vertical_margin'), bottom: $r('app.float.password_input_message_vertical_margin') })
// button
Flex( { justifyContent: FlexAlign.SpaceAround } ) {
Button() {
Text($r('app.string.cancel')).dialogBtnName()
Text($r('app.string.cancel'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(() => {
Router.back();
})
Button() {
Text($r('app.string.confirm')).dialogBtnName()
Text($r('app.string.confirm'))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.onClick(this.okOnClickHandler);
}
.margin({ top: $r('app.float.password_input_button_space') })
@ -197,50 +221,4 @@ struct PasswordRepeat {
return this.passwordType == PinSubType.PIN_SIX ? Visibility.Hidden : Visibility.Visible;
}
}
@Extend(Text) function inputMsg () {
.fontSize($r('app.float.font_20'))
.fontColor($r('app.color.color_666666_grey'))
.margin({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
.align(Alignment.Center)
}
@Extend(Text) function promptMsg () {
.fontSize($r('app.float.font_18'))
.width(ConfigData.WH_83_100)
.fontColor(Color.Red)
.align(Alignment.Start)
.textAlign(TextAlign.Start)
.margin({
top: $r('app.float.password_input_message_vertical_margin')
})
}
@Extend(Text) function changeUnlockMethod () {
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_20'))
.fontColor(Color.Blue)
.align(Alignment.Center)
.textAlign(TextAlign.Center)
.visibility(Visibility.Hidden)
.padding({
top: $r('app.float.password_input_message_vertical_margin'),
bottom: $r('app.float.password_input_message_vertical_margin')
})
}
@Extend(Text) function dialogBtnName () {
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
@Extend(Button) function dialogBtn () {
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
}

View File

@ -79,7 +79,15 @@ struct PasswordSetting {
if (item.settingIsSectionTitle) {
ListItem() {
Text(item.settingTitle).sectionTitle()
Text(item.settingTitle)
.width(ConfigData.WH_100_100)
.height($r('app.float.wh_value_60'))
.fontSize($r('app.float.font_20'))
.fontWeight(FontWeight.Normal)
.fontColor(Color.Grey)
.maxLines(ConfigData.MAX_LINES_1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ left: $r('app.float.wh_value_15'), right: $r('app.float.wh_value_15') })
}
} else if (item.settingAlias == 'password_disable_password') {
@ -225,28 +233,33 @@ struct UnlockDialog {
// message
Row() {
Text($r("app.string.password_disable_prompt"))
.margin({
top: $r('app.float.item_common_vertical_margin'),
bottom: $r('app.float.item_common_vertical_margin'),
left: $r('app.float.wh_value_30') })
.margin({ top: $r('app.float.item_common_vertical_margin'), bottom: $r('app.float.item_common_vertical_margin'), left: $r('app.float.wh_value_30') })
.fontSize($r('app.float.font_22'));
}
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button() {
Text($r('app.string.cancel'))
.dialogBtnName()
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.align(Alignment.Bottom)
.onClick(() => {
this.closeDialog();
});
Button() {
Text($r('app.string.disable_'))
.dialogBtnName()
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
.dialogBtn()
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
.align(Alignment.Bottom)
.onClick(() => {
this.confirmAction(this.item)
@ -260,26 +273,3 @@ struct UnlockDialog {
}
}
}
@Extend(Text) function sectionTitle () {
.width(ConfigData.WH_100_100)
.height($r('app.float.wh_value_60'))
.fontSize($r('app.float.font_20'))
.fontWeight(FontWeight.Normal)
.fontColor(Color.Grey)
.maxLines(ConfigData.MAX_LINES_1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ left: $r('app.float.wh_value_15'), right: $r('app.float.wh_value_15') })
}
@Extend(Text) function dialogBtnName () {
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
.textCase(TextCase.UpperCase)
}
@Extend(Button) function dialogBtn () {
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.wh_value_210"))
.height($r("app.float.wh_value_60"))
}

View File

@ -53,10 +53,10 @@ struct BrightnessSettings {
min: BRIGHTNESS_MIN_VALUE,
max: BRIGHTNESS_MAX_VALUE,
step: BRIGHTNESS_STEP_VALUE,
style: SliderStyle.INSET
style: SliderStyle.InSet
})
.selectedColor(Color.Blue)
.blockColor(Color.Blue)
.blockColor(Color.White)
.width(ConfigData.WH_83_100)
.onChange((number, mode:SliderChangeMode) => {
this.brightnessSettingModel.setValue(number, mode);

View File

@ -56,7 +56,7 @@ struct ScreenMode {
}
.alignItems(HorizontalAlign.Start)
Radio( {value: this.TAG} )
Radio( {value: this.TAG, group: ''} )
.height($r('app.float.radio_component_height'))
.margin({ right: $r('app.float.radio_component_margin_bottom_right') })
.align(Alignment.End)

View File

@ -200,7 +200,7 @@ struct AudioRingerModeItem {
.textAlign(TextAlign.Center)
.align(Alignment.Center);
Radio({ value: this.value.toString() })
Radio({ value: this.value.toString(), group: '' })
.width($r('app.float.audio_sound_mode_radio_size'))
.height($r('app.float.audio_sound_mode_radio_size'))
.checked(this.checkedValue === this.value)