openharmony/applications_settings
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_settings synced 2025-02-17 07:37:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

!247 wifi 蓝牙 ux优化

Browse Source 
Merge pull request !247 from shaoziyang/master
This commit is contained in:
openharmony_ci 2022-08-29 11:16:15 +00:00 committed by Gitee
commit f375e26545
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
12 changed files with 686 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
product/phone/src/main/ets/controller/bluetooth/BluetoothDeviceController.ts
View File

@ -20,6 +20,7 @@ import ConfigData from '../../../../../../../common/utils/src/main/ets/default/b
import ISettingsController from '../../../../../../../common/component/src/main/ets/default/controller/ISettingsController';
import LogUtil from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import AboutDeviceModel from '../../model/aboutDeviceImpl/AboutDeviceModel'
import deviceInfo from '@ohos.deviceInfo'
const DISCOVERY_DURING_TIME: number = 30000; // 30'
const DISCOVERY_INTERVAL_TIME: number = 3000; // 3'
@ -489,7 +490,8 @@ export default class BluetoothDeviceController extends BaseSettingsController {
cancel: () => {
LogUtil.info('Closed callbacks')
},
alignment: DialogAlignment.Bottom
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
alignment: deviceInfo.deviceType === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
})
}

181
product/phone/src/main/ets/pages/bluetooth.ets
View File

@ -36,7 +36,6 @@ const deviceTypeInfo = deviceInfo.deviceType
struct Bluetooth {
private PAGE_TAG = ConfigData.TAG + 'Bluetooth page '
private deviceController: BluetoothDeviceController = new BluetoothDeviceController();
@State isPhone: boolean = false
@StorageLink('bluetoothIsOn') isOn: boolean = false;
@StorageLink('bluetoothToggleEnabled') isEnabled: boolean = true;
@StorageLink('bluetoothLocalName') localName: string = '';
@ -48,11 +47,6 @@ struct Bluetooth {
.initData()
.subscribe();
LogUtil.log(this.PAGE_TAG + 'aboutToAppear out : isOn = ' + this.isOn)
if (deviceTypeInfo === 'phone') {
this.isPhone = true
} else {
this.isPhone = false
}
}
@Log
@ -69,117 +63,82 @@ struct Bluetooth {
build() {
Column() {
GridContainer({
columns: 12,
sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp'
}) {
Row() {
Column() {
GridContainer({ gutter: 12, margin: 12 }) {
Column() {
HeadComponent({ headName: $r('app.string.bluetoothTab'), isActive: true });
Row() {
Text($r("app.string.bluetoothTab"))
.fontColor($r('sys.color.ohos_fa_text_primary'))
.fontSize($r("app.float.font_16"))
.fontWeight(FontWeight.Medium)
Blank()
Stack({ alignContent: Alignment.Start }) {
Toggle({ type: ToggleType.Switch, isOn: this.isOn })
.width('36vp')
.height('20vp')
.selectedColor('#007DFF')
.margin({ left: $r('app.float.wh_value_6') })
.onChange(() => {
LogUtil.log(this.PAGE_TAG + 'Toggle onClick: isOn = ' + this.isOn + ', enabled = ' + this.isEnabled)
if (!this.isEnabled) return;
this.deviceController.toggleValue(!this.isOn);
});
}
.width($r('app.float.wh_value_48'))
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
});
Column() {
HeadComponent({ headName: $r('app.string.bluetoothTab'), isActive: true });
.height($r('app.float.wh_value_56'))
.backgroundColor($r("app.color.white_bg_color"))
.borderRadius($r('app.float.wh_value_28'))
.padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
.alignItems(VerticalAlign.Center)
.borderRadius($r('app.float.distance_24'))
Row() {
Text($r("app.string.bluetoothTab"))
.fontColor($r('sys.color.ohos_fa_text_primary'))
.fontSize($r("app.float.font_16"))
.fontWeight(FontWeight.Medium)
Blank()
Stack({ alignContent: Alignment.Start }) {
Toggle({ type: ToggleType.Switch, isOn: this.isOn })
.width('36vp')
.height('20vp')
.selectedColor('#007DFF')
.margin({ left: $r('app.float.wh_value_6') })
.onChange(() => {
LogUtil.log(this.PAGE_TAG + 'Toggle onClick: isOn = ' + this.isOn + ', enabled = ' + this.isEnabled)
if (!this.isEnabled) return;
this.deviceController.toggleValue(!this.isOn);
});
}
.width($r('app.float.wh_value_48'))
}
Text($r('app.string.bluetooth_visible_to_nearby'))
.width(ConfigData.WH_100_100)
.height($r('app.float.wh_value_56'))
.backgroundColor($r("app.color.white_bg_color"))
.borderRadius($r('app.float.wh_value_28'))
.padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
.alignItems(VerticalAlign.Center)
.borderRadius($r('app.float.distance_24'))
.fontSize($r('app.float.font_14'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.visibility(this.isOn ? Visibility.Visible : Visibility.None)
.height($r("app.float.wh_value_48"))
.padding({
left: $r('app.float.wh_24'),
top: $r('app.float.distance_8'), bottom: $r('app.float.distance_24')
})
Scroll() {
Column() {
Text($r('app.string.bluetooth_visible_to_nearby'))
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_14'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.visibility(this.isOn ? Visibility.Visible : Visibility.None)
.height($r("app.float.wh_value_48"))
.padding({
left: $r('app.float.wh_24'),
top: $r('app.float.distance_8'), bottom: $r('app.float.distance_24')
DeviceNameComponent({
isEnabled: $isOn,
localName: $localName
})
Scroll() {
Column() {
DeviceNameComponent({
isEnabled: $isOn,
localName: $localName
if (this.isOn) {
PairedDeviceComponent({
controller: this.deviceController
})
if (this.isOn) {
AvailableDeviceComponent({
controller: this.deviceController,
})
PairedDeviceComponent({
controller: this.deviceController
})
AvailableDeviceComponent({
controller: this.deviceController,
isPhone: this.isPhone
})
}
}
.width(ConfigData.WH_100_100)
}
.scrollBarWidth(0)
.width(ConfigData.WH_100_100)
.align(Alignment.TopStart)
.layoutWeight(1)
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({
left: $r('app.float.wh_24'),
right: $r('app.float.wh_24'),
})
.scrollBarWidth(0)
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
.align(Alignment.TopStart)
.layoutWeight(1)
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.useSizeType({
sm: { span: 4, offset: 0 },
md: { span: 6, offset: 1 },
lg: { span: 8, offset: 2 }
});
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
@ -448,8 +407,8 @@ struct PairedDeviceComponent {
callback();
}
},
alignment: DialogAlignment.Bottom,
offset:({dx:0,dy:'-16dp'}),
alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
})
}
}
@ -481,7 +440,6 @@ struct AvailableDeviceComponent {
@StorageLink('bluetoothAvailableDevices') availableDevices: BluetoothDevice[] = [];
@State pairPinCode: string = '';
private pairingDevice: BluetoothDevice = undefined;
private isPhone: boolean = false;
@StorageLink("controlPairing") controlPairing: boolean = true ;
pairDialog: CustomDialogController = new CustomDialogController({
builder: PairDialog({
@ -491,8 +449,8 @@ struct AvailableDeviceComponent {
this.confirmPairing(accept);
}
}),
alignment:this.isPhone?DialogAlignment.Bottom:DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone?'-16dp':0 }),
alignment:deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
autoCancel: true,
});
@ -516,6 +474,7 @@ struct AvailableDeviceComponent {
.fontSize($r('app.float.font_14'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.width(ConfigData.WH_100_100)
.height($r('app.float.distance_19'))
.fontWeight(500)
.margin({
left: $r('app.float.wh_24'),
@ -648,7 +607,8 @@ struct AvailableDeviceComponent {
LogUtil.info(this.TAG_PAGE + `AlertDialog success:`);
}
},
alignment: DialogAlignment.Bottom
alignment:deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
})
}
@ -789,7 +749,8 @@ struct PairDialog {
right: $r('app.float.distance_24')
})
}
.width(ConfigData.WH_100_100);
.width(deviceTypeInfo==='phone' ? ConfigData.WH_100_100 : $r("app.float.wh_value_410"))
.padding(deviceTypeInfo==='phone' ? { left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12")} : {})
}
}
@ -831,7 +792,8 @@ function showDialog(dialogTitle: string | Resource, dialogMessage: string | Reso
AlertDialog.show({
title: dialogTitle,
message: dialogMessage,
offset: ({ dx: 0, dy: -16 }),
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
confirm: {
value: buttonValue,
action: () => {
@ -840,8 +802,7 @@ function showDialog(dialogTitle: string | Resource, dialogMessage: string | Reso
},
cancel: () => {
LogUtil.info(ConfigData.TAG + 'Bluetooth page showDialog : Closed callbacks');
},
alignment: DialogAlignment.Bottom
}
})
LogUtil.info(ConfigData.TAG + 'Bluetooth page showDialog out.');
}

97
product/phone/src/main/ets/pages/bluetoothPairedDeviceInfo.ets
View File

@ -40,73 +40,44 @@ struct BluetoothPairedDeviceInfo {
build() {
Column() {
GridContainer({
columns: 12,
sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp'
}) {
Row({}) {
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
});
Column() {
HeadComponent({ headName: this.bluetoothDevice.deviceName, isActive: true });
Blank()
Row() {
Button() {
Text($r("app.string.cancelPairing"))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
GridContainer({ gutter: 12, margin: 12 }) {
Column() {
HeadComponent({ headName: this.bluetoothDevice.deviceName, isActive: true });
Blank()
Row() {
Button() {
Text($r("app.string.cancelPairing"))
.fontSize($r('app.float.application_button_subtitle_size'))
.fontColor(Color.Blue)
}
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.paired_device_button_width"))
.height($r("app.float.wh_value_40"))
.align(Alignment.Center)
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouched = true;
}
.backgroundColor($r('app.color.color_E3E3E3_grey'))
.width($r("app.float.paired_device_button_width"))
.height($r("app.float.wh_value_40"))
.align(Alignment.Center)
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouched = true;
}
if (event.type === TouchType.Up) {
this.isTouched = false;
}
})
.onClick(() => {
LogUtil.log(ConfigData.TAG + "unpair onClick");
if (this.controller.unpair(this.bluetoothDevice.deviceId)) {
Router.back();
}
})
}.margin({ bottom: $r('app.float.distance_24'), top: $r("app.float.distance_8") });
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
if (event.type === TouchType.Up) {
this.isTouched = false;
}
})
.onClick(() => {
LogUtil.log(ConfigData.TAG + "unpair onClick");
if (this.controller.unpair(this.bluetoothDevice.deviceId)) {
Router.back();
}
})
}.margin({ bottom: $r('app.float.distance_24'), top: $r("app.float.distance_8") });
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.height(ConfigData.WH_100_100)
.useSizeType({
sm: { span: 4, offset: 0 },
md: { span: 6, offset: 1 },
lg: { span: 8, offset: 2 }
});
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)

189
product/phone/src/main/ets/pages/deviceName.ets
View File

@ -35,124 +35,89 @@ struct DeviceName {
build() {
Column() {
GridContainer({
columns: 12,
sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp'
}) {
Row({}) {
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
});
GridContainer({ gutter: 12, margin: 12 }) {
Column() {
HeadComponent({ headName: $r('app.string.deviceName'), isActive: true })
Column() {
Column() {
HeadComponent({ headName: $r('app.string.deviceName'), isActive: true })
}
TextInput({ text: this.deviceName })
.placeholderFont({ size: $r("app.float.font_18"), weight: FontWeight.Normal, style: FontStyle.Normal })
.type(InputType.Normal)
.enterKeyType(EnterKeyType.Done)
.caretColor($r('app.color.font_color_007DFF'))
.maxLength(30)
.fontColor($r("sys.color.ohos_id_color_primary"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.height($r("app.float.wh_value_40"))
.borderRadius(0)
.margin({ top: $r("app.float.distance_8") })
.backgroundColor($r('app.color.color_00000000_transparent'))
.onFocus(() => {
this.isFocused = true;
})
.onChange((value: string) => {
LogUtil.debug(ConfigData.TAG + 'device name changed to: ' + JSON.stringify(value));
if(value.trim().length != 0){
this.deviceName = value;
this.confirmsButton = true
} else {
this.deviceName = value.trim();
this.confirmsButton = false
}
if (this.deviceName.length == 30) {
this.isFocused = false
ResourceUtil.getString($r("app.string.Input_Reached_Limited")).then(value => {
prompt.showToast({
message:value,
duration: 2000,
bottom: 1000
})
})
}
})
.onSubmit((enterKey) => {
InputMethod.getInputMethodController().stopInput().then((ret) => {
LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
});
})
Divider()
.strokeWidth(1)
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.color($r("sys.color.ohos_id_color_primary"))
.opacity($r('sys.float.ohos_id_alpha_content_secondary'))
Row() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Row() {
ButtonComponent({ text: $r("app.string.cancel"),deviceName : $deviceName ,buttonFlag : $cancelButton, onClickEvent: () => {
Router.back();
} })
}
.width($r("app.float.deviceName_button_width"))
.margin({ right: $r("app.float.distance_12") })
Row() {
ButtonComponent({ text: $r("app.string.confirm"),deviceName : $deviceName ,buttonFlag : $confirmsButton,onClickEvent: () => {
if(this.deviceName.length >0){
AboutDeviceModel.setSystemName(this.deviceName)
Router.back();
} else {
return
}
}})
}
.width($r("app.float.deviceName_button_width"))
TextInput({ text: this.deviceName })
.placeholderFont({ size: $r("app.float.font_18"), weight: FontWeight.Normal, style: FontStyle.Normal })
.type(InputType.Normal)
.enterKeyType(EnterKeyType.Done)
.caretColor($r('app.color.font_color_007DFF'))
.maxLength(30)
.fontColor($r("sys.color.ohos_id_color_primary"))
.height($r("app.float.wh_value_40"))
.borderRadius(0)
.margin({ top: $r("app.float.distance_8") })
.backgroundColor($r('app.color.color_00000000_transparent'))
.onFocus(() => {
this.isFocused = true;
})
.onChange((value: string) => {
LogUtil.debug(ConfigData.TAG + 'device name changed to: ' + JSON.stringify(value));
if(value.trim().length != 0){
this.deviceName = value;
this.confirmsButton = true
} else {
this.deviceName = value.trim();
this.confirmsButton = false
}
}
.alignItems(this.isFocused ? VerticalAlign.Top : VerticalAlign.Bottom)
.height('100%')
.padding(this.isFocused ? { top: $r("app.float.wh_value_212") } : { bottom: $r('app.float.wh_padding_128') })
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
if (this.deviceName.length == 30) {
this.isFocused = false
ResourceUtil.getString($r("app.string.Input_Reached_Limited")).then(value => {
prompt.showToast({
message:value,
duration: 2000,
bottom: 1000
})
})
}
})
.onSubmit((enterKey) => {
InputMethod.getInputMethodController().stopInput().then((ret) => {
LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
});
})
Divider()
.strokeWidth(1)
.padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
.color($r("sys.color.ohos_id_color_primary"))
.opacity($r('sys.float.ohos_id_alpha_content_secondary'))
Row() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Row() {
ButtonComponent({ text: $r("app.string.cancel"),deviceName : $deviceName ,buttonFlag : $cancelButton, onClickEvent: () => {
Router.back();
} })
}
.width($r("app.float.deviceName_button_width"))
Column() {
.margin({ right: $r("app.float.distance_12") })
Row() {
ButtonComponent({ text: $r("app.string.confirm"),deviceName : $deviceName ,buttonFlag : $confirmsButton,onClickEvent: () => {
if(this.deviceName.length >0){
AboutDeviceModel.setSystemName(this.deviceName)
Router.back();
} else {
return
}
}})
}
.width($r("app.float.deviceName_button_width"))
}
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
.alignItems(this.isFocused ? VerticalAlign.Top : VerticalAlign.Bottom)
.height('100%')
.padding(this.isFocused ? { top: $r("app.float.wh_value_212") } : { bottom: $r('app.float.wh_padding_128') })
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.useSizeType({
sm: { span: 4, offset: 0 },
md: { span: 6, offset: 1 },
lg: { span: 8, offset: 2 }
});
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)

734
product/phone/src/main/ets/pages/wifi.ets
View File

@ -99,7 +99,6 @@ struct Index {
timestamp: 0,
securityType: 1,
};
@State isPhone: boolean = false;
private switchDebounceFlag = undefined;
private timerId: number = -1;
private errorMessage: string = "";
@ -107,8 +106,8 @@ struct Index {
builder: apInfoDialog({
apInfo: this.userSelectedApInfo,
}),
alignment: this.isPhone?DialogAlignment.Bottom:DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone?'-16dp':0 }),
alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
autoCancel: true,
customStyle: true
});
@ -120,194 +119,155 @@ struct Index {
WifiModel.refreshApScanResults();
}
}),
alignment: this.isPhone?DialogAlignment.Bottom:DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone?'-16dp':0 }),
alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
autoCancel: true,
customStyle: true
});
build() {
Column() {
GridContainer({
columns: 12,
sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp'
}) {
Row({}) {
Column() {
GridContainer({ gutter: 12, margin: 12 }) {
Column() {
HeadComponent({ headName: $r('app.string.wifiTab'), isActive: true });
Row() {
Text($r('app.string.wifiTab'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
Blank()
Toggle({ type: ToggleType.Switch, isOn: this.isWiFiEnabled })
.width('36vp')
.height('20vp')
.selectedColor('#007DFF')
.onChange((isOn: boolean) => {
this.switchWiFiActiveStatus();
});
}
.height($r('app.float.wh_value_56'))
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
});
.alignItems(VerticalAlign.Center)
.margin({ top: $r("app.float.distance_8") })
.padding({ left: $r("app.float.wh_value_12"), right: $r('app.float.wh_value_6') })
.backgroundColor($r("app.color.white_bg_color"))
.borderRadius($r('app.float.radius_24'));
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
HeadComponent({ headName: $r('app.string.wifiTab'), isActive: true });
}
.margin({ left: $r("app.float.wh_24"), right: $r("app.float.wh_24") })
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Row() {
Text($r('app.string.wifiTab'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start);
}
.alignItems(VerticalAlign.Center)
.width($r("app.float.wh_value_240"))
.height($r("app.float.wh_value_48"))
.margin({ top: $r("app.float.wh_value_4"), bottom: $r("app.float.wh_value_4"),
left: $r("app.float.wh_value_12") })
Toggle({ type: ToggleType.Switch, isOn: this.isWiFiEnabled })
.width('36vp')
.height('20vp')
.selectedColor('#007DFF')
.margin({ right: $r('app.float.wh_value_6') })
.onChange((isOn: boolean) => {
this.switchWiFiActiveStatus();
});
}
.margin({ left: $r("app.float.wh_24"), right: $r("app.float.wh_24"), top: $r("app.float.distance_8") })
.height($r('app.float.wh_value_56'))
.backgroundColor($r("app.color.white_bg_color"))
.borderRadius($r('app.float.radius_24'))
Scroll(this.scroller) {
Scroll(this.scroller) {
Column() {
Column() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Text($r("app.string.wifiTipConnectedWLAN"))
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.distance_19_5'), bottom: $r('app.float.distance_9_5') })
}
.height($r("app.float.wh_value_48"))
.margin({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') });
Column() {
List() {
ListItem() {
WiFiEntryComponent({
settingIcon: this.connectedWiFi.settingIcon,
settingTitle: this.connectedWiFi.settingTitle,
settingSummary: genWiFiStatusSummary(this.connectedWiFi.settingSummary),
settingValue: this.connectedWiFi.settingValue,
settingArrow: this.connectedWiFi.settingArrow,
settingUri: this.connectedWiFi.settingUri,
titleFontColor: "activated"
});
}
.margin({ top: $r("app.float.wh_value_4"), bottom: $r("app.float.wh_value_4") })
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked connected wifi item');
this.userSelectedApInfo = this.connectedWiFi.apInfo;
this.clickApInfoDetailsDialog.open();
LogUtil.info(MODULE_TAG + 'end!!!');
});
}
}
.borderRadius($r("app.float.radius_24"))
.backgroundColor($r("app.color.white_bg_color"))
Row() {
Text($r("app.string.wifiTipConnectedWLAN"))
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.height($r('app.float.distance_19'));
}
.height($r("app.float.wh_value_120"))
.visibility(this.isNeedRenderConnectedWiFi() ? Visibility.Visible : Visibility.None);
.height($r("app.float.wh_value_48"))
.width(ConfigData.WH_100_100)
.padding({ left: $r('app.float.wh_value_12'), top: $r('app.float.distance_19_5'), bottom: $r('app.float.distance_9_5') })
.justifyContent(FlexAlign.Start);
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
WiFiEntryComponent({
settingIcon: this.connectedWiFi.settingIcon,
settingTitle: this.connectedWiFi.settingTitle,
settingSummary: genWiFiStatusSummary(this.connectedWiFi.settingSummary),
settingValue: this.connectedWiFi.settingValue,
settingArrow: this.connectedWiFi.settingArrow,
settingUri: this.connectedWiFi.settingUri,
titleFontColor: "activated"
});
}
.height($r("app.float.wh_value_64"))
.borderRadius($r("app.float.radius_24"))
.backgroundColor($r("app.color.white_bg_color"))
.margin({ top: $r("app.float.wh_value_4"), bottom: $r("app.float.wh_value_4") })
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked connected wifi item');
this.userSelectedApInfo = this.connectedWiFi.apInfo;
this.clickApInfoDetailsDialog.open()
LogUtil.info(MODULE_TAG + 'end!!!')
});
}
.visibility(this.isNeedRenderConnectedWiFi() ? Visibility.Visible : Visibility.None);
Column() {
Row() {
Row() {
Text($r("app.string.wifiTipValidWLAN"))
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Medium)
.margin({ top: $r('app.float.distance_19_5'), bottom: $r('app.float.distance_9_5') })
.textAlign(TextAlign.Start)
Row() {
ImageAnimatorComponent({ imageWidth: $r('app.float.wh_value_24'),
imageHeight: $r('app.float.wh_value_24') })
}
.height($r('app.float.wh_value_19'));
}
.height($r("app.float.wh_value_48"))
.margin({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.padding({ top: $r('app.float.distance_19_5'), bottom: $r('app.float.distance_9_5') });
Column() {
List() {
ForEach(this.scanWiFiResults, (item) => {
ListItem() {
WiFiEntryComponent({
settingIcon: item.settingIcon,
settingTitle: item.settingTitle,
settingSummary: genWiFiStatusSummary(item.settingSummary),
settingValue: item.settingValue,
settingArrow: item.settingArrow,
settingUri: item.settingUri,
titleFontColor: "inactivated"
});
Blank()
ImageAnimatorComponent({ imageWidth: $r('app.float.wh_value_24'), imageHeight: $r('app.float.wh_value_24') })
}
.height($r("app.float.wh_value_48"))
.width(ConfigData.WH_100_100)
.padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
.alignItems(VerticalAlign.Center);
Column() {
List() {
ForEach(this.scanWiFiResults, (item) => {
ListItem() {
WiFiEntryComponent({
settingIcon: item.settingIcon,
settingTitle: item.settingTitle,
settingSummary: genWiFiStatusSummary(item.settingSummary),
settingValue: item.settingValue,
settingArrow: item.settingArrow,
settingUri: item.settingUri,
titleFontColor: "inactivated"
});
}
.onClick(() => {
if (WifiModel.isSavedAp(item.settingTitle)) {
this.userSelectedApInfo = item.apInfo;
this.clickApInfoDialog.open();
} else {
this.jumpToConnectApPage(item.apInfo);
}
.onClick(() => {
if (WifiModel.isSavedAp(item.settingTitle)) {
this.userSelectedApInfo = item.apInfo;
this.clickApInfoDialog.open();
} else {
this.jumpToConnectApPage(item.apInfo);
}
})
});
}
.margin({ top: $r('app.float.wh_value_4'), bottom: $r('app.float.wh_value_4') })
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r("app.float.wh_value_12"),
endMargin: $r("app.float.wh_value_12"),
})
});
}
.margin({ bottom: $r("app.float.wh_value_56") })
.borderRadius($r("app.float.radius_24"))
.backgroundColor($r("app.color.white_bg_color"))
.visibility(this.scanWiFiResults.length !== 0 ? Visibility.Visible : Visibility.None)
.margin({ top: $r('app.float.wh_value_4'), bottom: $r('app.float.wh_value_4') })
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r("app.float.wh_value_12"),
endMargin: $r("app.float.wh_value_12"),
});
}
.visibility(this.isWiFiEnabled ? Visibility.Visible : Visibility.None);
.borderRadius($r("app.float.radius_24"))
.backgroundColor($r("app.color.white_bg_color"))
.visibility(this.scanWiFiResults.length !== 0 ? Visibility.Visible : Visibility.None)
}
.width('100%')
.padding({ left: $r("app.float.wh_24"), right: $r("app.float.wh_24") })
.visibility(this.isWiFiEnabled ? Visibility.Visible : Visibility.None);
}
.margin({ top: $r("app.float.wh_value_4"), bottom: $r("app.float.wh_value_72") })
.width(ConfigData.WH_100_100)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarColor('#B3B3B3')
.scrollBarWidth(6)
.borderRadius($r("app.float.radius_24"))
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
.borderRadius($r("app.float.radius_24"))
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarColor('#B3B3B3')
.scrollBarWidth(6)
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.useSizeType({
sm: { span: 4, offset: 0 },
md: { span: 6, offset: 1 },
lg: { span: 8, offset: 2 }
});
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
@ -411,12 +371,6 @@ struct Index {
});
// init wifi active status
this.isWiFiEnabled = WifiModel.isWiFiActive();
if (deviceTypeInfo === 'phone') {
this.isPhone = true
} else {
this.isPhone = false
}
AppStorage.SetOrCreate('slConnectedWifi', (new ApScanResult()).renderToListModel());
}
@ -451,27 +405,25 @@ export default struct ApInfoComponent {
@Prop value: string;
build() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Row() {
Text(this.label)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
}
.alignItems(VerticalAlign.Center);
Row() {
Text(this.value)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.End)
}
.alignItems(VerticalAlign.Center);
Row() {
Text(this.label)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start);
Blank();
Text(this.value)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.End);
}
.height($r('app.float.wh_value_48'))
.width(ConfigData.WH_100_100)
.backgroundColor($r("app.color.white_bg_color"))
.alignItems(VerticalAlign.Center);
}
}
@ -494,92 +446,95 @@ struct apInfoDialog {
build() {
Column() {
Row() {
Text(this.apInfo.ssid)
.fontSize($r('app.float.font_20'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.align(Alignment.Start)
}
.height($r("app.float.wh_value_56"))
.width($r("app.float.wh_value_362"))
.margin({ left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
Column() {
Row() {
Text(this.apInfo.ssid)
.fontSize($r('app.float.font_20'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.align(Alignment.Start)
}
.height($r("app.float.wh_value_56"))
.width(ConfigData.WH_100_100)
.padding({ left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
List() {
ForEach(this.dataList, (item) => {
ListItem() {
ApInfoComponent({
label: item.key,
value: item.value
});
}
.height($r('app.float.wh_value_48'))
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked ap info item');
List() {
ForEach(this.dataList, (item) => {
ListItem() {
ApInfoComponent({
label: item.key,
value: item.value
});
}
.height($r('app.float.wh_value_48'))
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked ap info item');
})
})
}
.margin({ left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
})
List() {
ForEach(this.buttons, (item) => {
ListItem() {
Row() {
Text(item.summary)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.width(ConfigData.WH_100_100)
.textAlign(TextAlign.Center)
}
.width($r("app.float.dialog_118"))
.height($r("app.float.wh_value_40"))
.alignItems(VerticalAlign.Center)
}
.margin({ left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.onClick(() => {
// 0 is cancel, 1 is delete, 2 is connect
if (item.opType === 0) {
LogUtil.info(MODULE_TAG + 'clicked ap info cancel');
}
if (item.opType === 1) {
LogUtil.info(MODULE_TAG + 'clicked ap info delete');
WifiModel.removeDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
if (item.opType === 2) {
LogUtil.info(MODULE_TAG + 'clicked ap info connect');
WifiModel.disconnectWiFi();
WifiModel.connectByDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
this.controller.close();
})
})
}
.margin({
top: $r('app.float.wh_value_8'),
left: $r("app.float.wh_value_16"),
right: $r("app.float.wh_value_16"),
bottom: $r("app.float.wh_value_16")
})
.height($r('app.float.wh_value_40'))
.listDirection(Axis.Horizontal)
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r('app.float.wh_value_8'),
endMargin: $r('app.float.wh_value_8')
})
}
.margin({ left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
})
List() {
ForEach(this.buttons, (item) => {
ListItem() {
Row() {
Text(item.summary)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.width(ConfigData.WH_100_100)
.textAlign(TextAlign.Center)
}
.width($r("app.float.dialog_118"))
.height($r("app.float.wh_value_40"))
.alignItems(VerticalAlign.Center)
}
.margin({ left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.onClick(() => {
// 0 is cancel, 1 is delete, 2 is connect
if (item.opType === 0) {
LogUtil.info(MODULE_TAG + 'clicked ap info cancel');
}
if (item.opType === 1) {
LogUtil.info(MODULE_TAG + 'clicked ap info delete');
WifiModel.removeDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
if (item.opType === 2) {
LogUtil.info(MODULE_TAG + 'clicked ap info connect');
WifiModel.disconnectWiFi();
WifiModel.connectByDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
this.controller.close();
})
})
}
.margin({
top: $r('app.float.wh_value_8'),
left: $r("app.float.wh_value_16"),
right: $r("app.float.wh_value_16"),
bottom: $r("app.float.wh_value_16")
})
.height($r('app.float.wh_value_40'))
.listDirection(Axis.Horizontal)
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r('app.float.wh_value_8'),
endMargin: $r('app.float.wh_value_8')
})
.height($r("app.float.wh_value_216"))
.borderRadius($r("app.float.radius_32"))
.backgroundColor($r("app.color.white_bg_color"))
}
.height($r("app.float.wh_value_216"))
.width($r("app.float.wh_value_410"))
.borderRadius($r("app.float.radius_32"))
.backgroundColor($r("app.color.white_bg_color"))
.width(deviceTypeInfo==='phone' ? ConfigData.WH_100_100 : $r("app.float.wh_value_410"))
.padding(deviceTypeInfo==='phone' ? { left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12")} : {})
}
aboutToAppear(): void {
@ -616,109 +571,111 @@ struct apInfoDetailsDialog {
build() {
Column() {
Column() {
QRCode(this.value)
.width(160)
.height(160)
}
.width(ConfigData.WH_100_100)
.margin({ top: $r("app.float.wh_48") })
.alignItems(HorizontalAlign.Center);
Column() {
QRCode(this.value)
.width(160)
.height(160)
}
.width(ConfigData.WH_100_100)
.margin({ top: $r("app.float.wh_48") })
.alignItems(HorizontalAlign.Center);
Row() {
Text(this.apInfo.ssid)
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_24'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center);
}
.width($r("app.float.wh_value_288"))
.height($r("app.float.wh_value_32"))
.margin({ top: $r("app.float.wh_value_28") });
Row() {
Text(this.apInfo.ssid)
.width(ConfigData.WH_100_100)
.fontSize($r('app.float.font_24'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center);
}
.width($r("app.float.wh_value_288"))
.height($r("app.float.wh_value_32"))
.margin({ top: $r("app.float.wh_value_28") });
Row() {
Text($r("app.string.wifiTipsScanInfo"))
.width(ConfigData.WH_100_100)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start);
}
.width($r("app.float.wh_value_250"))
.height($r("app.float.wh_value_19"))
.margin({ top: $r("app.float.wh_value_6") });
Row() {
Text($r("app.string.wifiTipsScanInfo"))
.width(ConfigData.WH_100_100)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start);
}
.width($r("app.float.wh_value_250"))
.height($r("app.float.wh_value_19"))
.margin({ top: $r("app.float.wh_value_6") });
List() {
ForEach(this.dataList, (item) => {
ListItem() {
ApInfoComponent({
label: item.key,
value: item.value
});
}
.height($r('app.float.wh_value_48'))
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked ap detail info item');
List() {
ForEach(this.dataList, (item) => {
ListItem() {
ApInfoComponent({
label: item.key,
value: item.value
});
}
.height($r('app.float.wh_value_48'))
.onClick(() => {
LogUtil.info(MODULE_TAG + 'clicked ap detail info item');
})
})
}
.margin({
top: $r("app.float.wh_value_16"),
left: $r("app.float.wh_value_24"),
right: $r("app.float.wh_value_24")
})
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
})
}
.margin({
top: $r("app.float.wh_value_16"),
left: $r("app.float.wh_value_24"),
right: $r("app.float.wh_value_24")
})
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
})
List() {
ForEach(this.buttons, (item) => {
ListItem() {
Row() {
Text(item.summary)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.width(ConfigData.WH_100_100)
.textAlign(TextAlign.Center)
List() {
ForEach(this.buttons, (item) => {
ListItem() {
Row() {
Text(item.summary)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.width(ConfigData.WH_100_100)
.textAlign(TextAlign.Center)
}
.width($r("app.float.wh_value_160"))
.height($r("app.float.wh_value_40"))
.alignItems(VerticalAlign.Center)
}
.width($r("app.float.wh_value_160"))
.height($r("app.float.wh_value_40"))
.alignItems(VerticalAlign.Center)
}
.margin({ left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.onClick(() => {
if (item.opType === 0) {
LogUtil.info(MODULE_TAG + 'clicked ap info cancel');
}
if (item.opType === 2) {
LogUtil.info(MODULE_TAG + 'clicked ap info to disconnect');
WifiModel.disconnectWiFi();
WifiModel.removeDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
this.controller.close();
.margin({ left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.onClick(() => {
if (item.opType === 0) {
LogUtil.info(MODULE_TAG + 'clicked ap info cancel');
}
if (item.opType === 2) {
LogUtil.info(MODULE_TAG + 'clicked ap info to disconnect');
WifiModel.disconnectWiFi();
WifiModel.removeDeviceConfig(this.apInfo);
WifiModel.refreshApScanResults();
}
this.controller.close();
})
})
})
}
.margin({ top: $r('app.float.wh_value_8'), bottom: $r('app.float.wh_value_16'),
left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.height($r('app.float.wh_value_40'))
.listDirection(Axis.Horizontal)
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r('app.float.wh_value_8'),
endMargin: $r('app.float.wh_value_8')
});
}
.margin({ top: $r('app.float.wh_value_8'), bottom: $r('app.float.wh_value_16'),
left: $r("app.float.wh_value_4"), right: $r("app.float.wh_value_4") })
.height($r('app.float.wh_value_40'))
.listDirection(Axis.Horizontal)
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
startMargin: $r('app.float.wh_value_8'),
endMargin: $r('app.float.wh_value_8')
});
.alignItems(HorizontalAlign.Center)
.height($r("app.float.wh_value_620"))
.padding({ top: $r('app.float.wh_value_6') })
.borderRadius($r("app.float.radius_32"))
.backgroundColor($r("app.color.white_bg_color"))
}
.padding({ top: $r('app.float.wh_value_6') })
.alignItems(HorizontalAlign.Center)
.height($r("app.float.wh_value_620"))
.width($r("app.float.wh_value_336"))
.borderRadius($r("app.float.radius_32"))
.backgroundColor($r("app.color.white_bg_color"))
.width(deviceInfo.deviceType==='phone' ? ConfigData.WH_100_100 : $r("app.float.wh_value_410"))
.padding(deviceInfo.deviceType==='phone' ? { left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12") }: {})
}
aboutToAppear(): void {
@ -756,49 +713,38 @@ struct WiFiEntryComponent {
@State isTouched: boolean = false;
build() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Row() {
Column() {
Text(this.settingTitle)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor(this.titleFontColor === "activated" ?
$r('sys.color.ohos_id_color_text_primary_activated') :
$r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start);
Row() {
Column() {
Text(this.settingTitle)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor(this.titleFontColor === "activated" ?
$r('sys.color.ohos_id_color_text_primary_activated') :
$r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium);
Row() {
}
.height($r('app.float.wh_value_8'))
Text(this.settingSummary)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor(this.titleFontColor === "activated" ?
$r('sys.color.ohos_id_color_text_primary') :
$r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.Start)
}
.alignItems(HorizontalAlign.Start);
Text(this.settingSummary)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor(this.titleFontColor === "activated" ?
$r('sys.color.ohos_id_color_text_primary') :
$r('sys.color.ohos_id_color_text_secondary'))
.fontWeight(FontWeight.Regular)
.margin({ top: $r('app.float.wh_value_8')});
}
.flexShrink(0)
.alignItems(VerticalAlign.Center)
.margin({ left: $r("app.float.wh_value_12") })
.align(Alignment.Start);
.alignItems(HorizontalAlign.Start)
Row() {
Image(this.settingArrow)
.fillColor($r("sys.color.ohos_id_color_primary"))
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
}
.margin({ right: $r("app.float.wh_value_12") })
.align(Alignment.End);
Blank()
Image(this.settingArrow)
.fillColor($r("sys.color.ohos_id_color_primary"))
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
.margin({ right: $r("app.float.wh_value_12") });
}
.height($r('app.float.wh_value_64'))
.width(ConfigData.WH_100_100)
.borderRadius($r("app.float.radius_24"))
.alignItems(VerticalAlign.Center)
.backgroundColor(this.isTouched ? $r("app.color.color_D8D8D8_grey") :
$r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {

310
product/phone/src/main/ets/pages/wifiPsd.ets
View File

@ -42,21 +42,20 @@ struct WifiPsd {
private isConnectedBefore: boolean = false;
private taskId: number = -1;
private toConnected: boolean = false;
@State isPhone: boolean = false
@State @Watch("controlFailedDialog") ControlFailedDialog : boolean = false;
private connectDialog: CustomDialogController = new CustomDialogController({
builder: connectProgressDialog({
ssid: this.tobeConnectedSSID,
}),
alignment: this.isPhone?DialogAlignment.Bottom:DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone?'-16dp':0 }),
alignment: deviceInfo.deviceType === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
autoCancel: false,
customStyle: true
});
private failedDialog: CustomDialogController = new CustomDialogController({
builder: connectFailedDialog({ControlFailedDialog:$ControlFailedDialog}),
alignment: this.isPhone?DialogAlignment.Bottom:DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone?'-16dp':0 }),
alignment: deviceInfo.deviceType === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: $r("app.float.customDialog_dx_offset"), dy: $r("app.float.customDialog_dy_offset") }),
autoCancel: true,
customStyle: true
});
@ -70,150 +69,100 @@ struct WifiPsd {
build() {
Column() {
GridContainer({ columns: 12, sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp' }) {
Row({}) {
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
GridContainer({ gutter: 12, margin: 12 }) {
Column() {
HeadComponent({
icBackIsVisibility: true,
headName: this.tobeConnectedSSID,
isActive: true
});
Column() {
Row() {
HeadComponent({
icBackIsVisibility: true,
headName: this.tobeConnectedSSID,
isActive: true
});
TextInput({ placeholder: this.passwdHint })
.type(InputType.Password)
.placeholderColor($r('sys.color.ohos_id_color_text_hint'))
.caretColor("red")
.placeholderFont({ size: $r("app.float.font_16"),
weight: $r("sys.string.ohos_id_text_font_family_regular"),
family: "sans-serif", style: FontStyle.Normal })
.caretColor($r('sys.color.ohos_id_color_text_primary_activated'))
.backgroundColor($r('app.color.color_00000000_transparent'))
.height($r('app.float.wh_value_48'))
.borderRadius(0)
.margin({ top: $r('app.float.wh_value_8') })
.onFocus(() => {
LogUtil.info(MODULE_TAG + "text input is focused");
this.isFocused = true;
})
.onFocusMove(() => {
LogUtil.info(MODULE_TAG + "text input is moved");
this.isFocused = false;
})
.onChange((inputs: string) => {
this.userInputs = inputs;
})
.onSubmit((enterKey) => {
InputMethod.getInputMethodController().stopInput().then((ret) => {
LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
})
});
Divider()
.color($r("sys.color.ohos_id_color_primary"))
.strokeWidth($r('app.float.wh_value_1'))
.opacity($r('sys.float.ohos_id_alpha_content_secondary'))
.padding({
left: $r('sys.float.ohos_id_default_padding_start'),
right: $r('sys.float.ohos_id_default_padding_end')
})
Row() {
Button() {
Text($r('app.string.cancel'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
}
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
TextInput({ placeholder: this.passwdHint })
.type(InputType.Password)
.placeholderColor($r('sys.color.ohos_id_color_text_hint'))
.caretColor("red")
.placeholderFont({ size: $r("app.float.font_16"),
weight: $r("sys.string.ohos_id_text_font_family_regular"),
family: "sans-serif", style: FontStyle.Normal })
.caretColor($r('sys.color.ohos_id_color_text_primary_activated'))
.backgroundColor($r('app.color.color_00000000_transparent'))
.height($r('app.float.wh_value_48'))
.borderRadius(0)
.padding({
left: $r('sys.float.ohos_id_default_padding_start'),
})
.margin({
top: $r('app.float.wh_value_8'),
left: $r('sys.float.ohos_id_default_padding_start'),
right: $r('sys.float.ohos_id_default_padding_end')
})
.onFocus(() => {
LogUtil.info(MODULE_TAG + "text input is focused");
this.isFocused = true;
})
.onFocusMove(() => {
LogUtil.info(MODULE_TAG + "text input is 0000000000000000000000000000000000 moved");
this.isFocused = false;
})
.onChange((inputs: string) => {
this.userInputs = inputs;
})
.onSubmit((enterKey) => {
InputMethod.getInputMethodController().stopInput().then((ret) => {
LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
})
});
Divider()
.color($r("sys.color.ohos_id_color_primary"))
.strokeWidth($r('app.float.wh_value_1'))
.opacity($r('sys.float.ohos_id_alpha_content_secondary'))
.padding({
left: $r('sys.float.ohos_id_max_padding_start'),
right: $r('sys.float.ohos_id_max_padding_end')
})
Column() {
Row() {
Row() {
Button() {
Text($r('app.string.cancel'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
}
.height($r('app.float.wh_value_40'))
.width($r('app.float.wh_value_263'))
.margin({ right: $r('app.float.wh_value_6') })
.align(Alignment.Center)
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
router.back();
});
Button() {
Text($r('app.string.wifiButtonConnect'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
}
.height($r('app.float.wh_value_40'))
.width($r('app.float.wh_value_263'))
.margin({ left: $r('app.float.wh_value_6') })
.align(Alignment.Center)
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.opacity(this.userInputs.length < miniPassWordSize ? $r('sys.float.ohos_fa_alpha_disabled') : 1)
.onClick(this.userInputs.length < miniPassWordSize ?
() => {
LogUtil.info(MODULE_TAG + 'no text input in passwd page');
}
:
() => {
WifiModel.setUserSelectedAp(this.tobeConnectedAp);
WifiModel.connectWiFi(this.userInputs);
this.toConnected = true;
this.connectDialog.open();
});
}
.margin(this.isFocused === false ?
{ bottom: $r("app.float.wh_value_24") } :
{ top: $r("app.float.wh_padding_212") })
.align(Alignment.Center)
.alignItems(VerticalAlign.Center)
.height($r('app.float.wh_value_40'))
.width($r('app.float.deviceName_button_width'))
.margin({ right: $r('app.float.wh_value_12') })
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
router.back();
});
Button() {
Text($r('app.string.wifiButtonConnect'))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
}
.height($r('app.float.wh_value_40'))
.width($r('app.float.deviceName_button_width'))
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.opacity(this.userInputs.length < miniPassWordSize ? $r('sys.float.ohos_fa_alpha_disabled') : 1)
.onClick(this.userInputs.length < miniPassWordSize ?
() => {
LogUtil.info(MODULE_TAG + 'no text input in passwd page');
}
.padding({ bottom: $r("app.float.wh_padding_112") })
.height(ConfigData.WH_100_100)
.alignItems(this.isFocused === false ? VerticalAlign.Bottom : VerticalAlign.Top);
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.alignItems(HorizontalAlign.Center);
:
() => {
WifiModel.setUserSelectedAp(this.tobeConnectedAp);
WifiModel.connectWiFi(this.userInputs);
this.toConnected = true;
this.connectDialog.open();
});
}
.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
.height(ConfigData.WH_100_100)
.padding({ left: $r('app.float.padding_24'), right: $r('app.float.padding_24') })
.alignItems(HorizontalAlign.Start)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
.padding(this.isFocused === false ?
{ bottom: $r("app.float.wh_padding_136") } :
{ top: $r("app.float.wh_padding_212") })
.alignItems(this.isFocused === false ? VerticalAlign.Bottom : VerticalAlign.Top)
.justifyContent(FlexAlign.Center);
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.height(ConfigData.WH_100_100)
.useSizeType({
sm: { span: 4, offset: 0 },
md: { span: 6, offset: 1 },
lg: { span: 8, offset: 2 }
});
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor('#F1F3F5')
.width(ConfigData.WH_100_100)
@ -233,11 +182,6 @@ struct WifiPsd {
this.tobeConnectedAp = params.apInfo;
this.tobeConnectedSSID = this.tobeConnectedAp.ssid;
if (deviceTypeInfo === 'phone') {
this.isPhone = true
} else {
this.isPhone = false
}
}
onPageShow() {
@ -356,31 +300,33 @@ struct connectProgressDialog {
build() {
Column() {
Row() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Column() {
Row() {
Text(this.message)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Regular)
.align(Alignment.Start)
Blank()
Column() {
ImageAnimatorComponent({ imageWidth: $r('app.float.wh_value_24'),
imageHeight: $r('app.float.wh_value_24') })
}
}
.borderColor($r("app.color.white_bg_color"))
.alignItems(VerticalAlign.Center)
.height($r("app.float.wh_value_48"))
.width($r(ConfigData.WH_100_100))
.margin({ top: $r("app.float.wh_value_24"), bottom: $r("app.float.wh_value_24"),
left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
}
.alignItems(VerticalAlign.Center)
.height($r("app.float.wh_value_48"))
.width($r("app.float.wh_value_362"))
.margin({ top: $r("app.float.wh_value_24"), bottom: $r("app.float.wh_value_24"),
left: $r("app.float.wh_value_24"), right: $r("app.float.wh_value_24") })
.height($r("app.float.wh_value_96"))
.borderRadius($r("app.float.radius_32"))
.backgroundColor($r("app.color.white_bg_color"))
}
.width($r("app.float.wh_value_410"))
.height($r("app.float.wh_value_96"))
.borderRadius($r("app.float.radius_32"))
.alignItems(HorizontalAlign.End)
.backgroundColor($r("app.color.white_bg_color"))
.width(deviceTypeInfo==='phone' ? ConfigData.WH_100_100 : $r("app.float.wh_value_410"))
.padding(deviceTypeInfo==='phone' ? { left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12")} : {})
}
}
@ -390,35 +336,35 @@ struct connectFailedDialog {
@Link ControlFailedDialog : boolean ;
build() {
Column() {
Row() {
Column() {
Text($r("app.string.wifiTipsConnectAuthFailed"))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Regular)
.align(Alignment.Start)
}
.alignItems(VerticalAlign.Center)
.margin({ top: $r("app.float.wh_value_24") })
.height($r("app.float.wh_value_21"))
.margin({ top: $r("app.float.wh_value_24") })
.height($r("app.float.wh_value_21"))
Row() {
Text($r("app.string.wifiTipsGotIt"))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.onClick(() => {
this.ControlFailedDialog = true
})
Row() {
Text($r("app.string.wifiTipsGotIt"))
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontWeight(FontWeight.Medium)
.onClick(() => {
this.ControlFailedDialog = true
})
}
.alignItems(VerticalAlign.Top)
.margin({ top: $r("app.float.wh_value_8") })
.padding({ top: $r("app.float.wh_value_9") })
.height($r("app.float.wh_value_56"))
}
.alignItems(VerticalAlign.Top)
.margin({ top: $r("app.float.wh_value_8") })
.padding({ top: $r("app.float.wh_value_9") })
.height($r("app.float.wh_value_56"))
.height($r("app.float.wh_value_109"))
.width(ConfigData.WH_100_100)
.borderRadius($r("app.float.radius_32"))
.alignItems(HorizontalAlign.Center)
.backgroundColor($r("app.color.white_bg_color"))
}
.width($r("app.float.wh_value_410"))
.height($r("app.float.wh_value_109"))
.borderRadius($r("app.float.radius_32"))
.alignItems(HorizontalAlign.Center)
.backgroundColor($r("app.color.white_bg_color"))
.width(deviceTypeInfo==='phone' ? ConfigData.WH_100_100 : $r("app.float.wh_value_410"))
.padding(deviceTypeInfo==='phone' ? { left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12")} : {})
}
}

12
product/phone/src/main/resources/base/element/float.json
View File

@ -972,6 +972,10 @@
"name": "wh_padding_128",
"value": "128vp"
},
{
"name": "wh_padding_136",
"value": "136vp"
},
{
"name": "wh_padding_212",
"value": "212vp"
@ -1015,6 +1019,14 @@
{
"name": "search_no_result_padding",
"value": "8vp"
},
{
"name": "customDialog_dx_offset",
"value": "0"
},
{
"name": "customDialog_dy_offset",
"value": "0"
}
]
}

2
product/phone/src/main/resources/base/element/string.json
View File

@ -146,7 +146,7 @@
},
{
"name": "wifiTipsConnectAuthFailed",
"value": "密码错误，连接失败"
"value": "密码错误，连接失败。"
},
{
"name": "wifiTipsConnectFailed",

2
product/phone/src/main/resources/en_US/element/string.json
View File

@ -146,7 +146,7 @@
},
{
"name": "wifiTipsConnectAuthFailed",
"value": "Password incorrect, auth failed"
"value": "Password incorrect, auth failed."
},
{
"name": "wifiTipsConnectFailed",

22
product/phone/src/main/resources/phone/element/float.json
View File

@ -182,7 +182,7 @@
},
{
"name": "wh_value_160",
"value": "144vp"
"value": "160vp"
},
{
"name": "wh_value_200",
@ -194,7 +194,7 @@
},
{
"name": "wh_value_212",
"value": "280vp"
"value": "212vp"
},
{
"name": "wh_value_216",
@ -234,7 +234,7 @@
},
{
"name": "wh_value_410",
"value": "336vp"
"value": "410vp"
},
{
"name": "wh_value_620",
@ -866,7 +866,7 @@
},
{
"name": "deviceName_button_width",
"value": "150vp"
"value": "192vp"
},
{
"name": "applicationInfo_button_width",
@ -882,7 +882,7 @@
},
{
"name": "dialog_118",
"value": "92vp"
"value": "118vp"
},
{
"name": "wh_4",
@ -972,6 +972,10 @@
"name": "wh_padding_128",
"value": "128vp"
},
{
"name": "wh_padding_136",
"value": "136vp"
},
{
"name": "wh_padding_212",
"value": "272vp"
@ -1015,6 +1019,14 @@
{
"name": "search_no_result_padding",
"value": "8vp"
},
{
"name": "customDialog_dx_offset",
"value": "0"
},
{
"name": "customDialog_dy_offset",
"value": "-16vp"
}
]
}

2
product/phone/src/main/resources/phone/element/string.json
View File

@ -158,7 +158,7 @@
},
{
"name": "wifiTipsConnectAuthFailed",
"value": "密码错误，连接失败"
"value": "密码错误，连接失败。"
},
{
"name": "wifiTipsConnectFailed",

2
product/phone/src/main/resources/zh_CN/element/string.json
View File

@ -158,7 +158,7 @@
},
{
"name": "wifiTipsConnectAuthFailed",
"value": "密码错误，连接失败"
"value": "密码错误，连接失败。"
},
{
"name": "wifiTipsConnectFailed",