openharmony/applications_settings
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_settings synced 2024-11-23 14:30:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

UX优化

Browse Source 
Signed-off-by: weiyunxing <weiyunxing@huawei.com>
This commit is contained in:
weiyunxing 2022-08-27 14:45:12 +08:00
parent 6cf8318a66
commit d95fda55a8
22 changed files with 238 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/component/src/main/ets/default/switchComponent.ets
View File

@ -55,7 +55,7 @@ export default struct SwitchComponent {
.margin({ top: $r('sys.float.ohos_id_text_margin_vertical') })
}
}
.margin({ left: $r('app.float.wh_24') })
.margin({ left:$r('sys.float.ohos_id_card_margin_start')})
.alignItems(HorizontalAlign.Start)
Blank()
@ -72,7 +72,7 @@ export default struct SwitchComponent {
this.toggleValue(this.isOn);
});
}
.margin({ right: $r('app.float.wh_24') })
.margin({ right:$r('sys.float.ohos_id_card_margin_end')})
.width($r('app.float.wh_value_48'))
.height($r('app.float.wh_value_56'))
}

10
common/component/src/main/ets/default/textComponent.ets
View File

@ -65,7 +65,9 @@ export struct TitleText {
}
.height($r("app.float.wh_value_56"))
.width(ComponentConfig.WH_100_100)
.padding({ left: $r('app.float.wh_20'), right: $r('app.float.wh_20') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')})
.borderRadius($r("app.float.radius_24"))
.linearGradient(this.isTouched ? {
angle: 90,
@ -114,7 +116,6 @@ export struct TextComponentWithEndText {
.fontSize($r('app.float.font_16'))
.fontColor($r('app.color.font_color_182431'))
.fontWeight(FontWeight.Medium)
.margin({ left: $r('app.float.wh_24') })
.textAlign(TextAlign.Start);
}
@ -127,11 +128,14 @@ export struct TextComponentWithEndText {
Image('/res/image/ic_settings_arrow.svg')
.width($r('app.float.wh_value_12'))
.height($r('app.float.wh_value_24'))
.margin({ right: $r('app.float.wh_24') })
.fillColor($r("sys.color.ohos_id_color_primary"))
.opacity($r("app.float.opacity_0_2"))
}
}
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.height($r('app.float.wh_value_48'))
.width(ComponentConfig.WH_100_100)
.borderRadius($r('app.float.radius_24'))

38
common/utils/src/main/ets/default/baseUtil/ConfigData.ts
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import settings from '@ohos.settings';
export class ConfigData {
@ -28,21 +29,21 @@ export class ConfigData {
BRIGHTNESS_DEFAULT_VALUE = 50;
DEFAULT_BUNDLE_NAME = 'com.ohos.settings';
DATE_AND_TIME_YEAR='DATE_AND_TIME_YEAR'
DATE_AND_TIME_MONTH='DATE_AND_TIME_MONTH'
DATE_AND_TIME_DAY='DATE_AND_TIME_DAY'
TAG='Settings '
DATE_AND_TIME_YEAR = 'DATE_AND_TIME_YEAR';
DATE_AND_TIME_MONTH = 'DATE_AND_TIME_MONTH';
DATE_AND_TIME_DAY = 'DATE_AND_TIME_DAY';
TAG = 'Settings ';
// page request
PAGE_REQUEST_CODE_KEY = 'pageRequestCode'
PAGE_RESULT_KEY = 'pageResult'
PAGE_RESULT_OK = -1
PAGE_RESULT_NG = 0
PAGE_REQUEST_CODE_KEY = 'pageRequestCode';
PAGE_RESULT_KEY = 'pageResult';
PAGE_RESULT_OK = -1;
PAGE_RESULT_NG = 0;
// password request code
PAGE_REQUEST_CODE_PASSWORD_CREATE = 20001
PAGE_REQUEST_CODE_PASSWORD_CHANGE = 20003
PAGE_REQUEST_CODE_PASSWORD_DISABLE = 20004
PAGE_REQUEST_CODE_PASSWORD_CREATE = 20001;
PAGE_REQUEST_CODE_PASSWORD_CHANGE = 20003;
PAGE_REQUEST_CODE_PASSWORD_DISABLE = 20004;
WH_100_100 = '100%';
WH_25_100 = '25%';
@ -67,8 +68,6 @@ export class ConfigData {
TIME_FORMAT_24 = "24";
TIME_FORMAT_12 = "12";
TIME_PREFIX_MORNING = "上午" ;
TIME_PREFIX_AFTERNOON = "下午";
TIME_FORMAT_URI = "dataability:///com.ohos.settingsdata.DataAbility";
TIME_FORMAT_KEY = settings.date.TIME_FORMAT;
SETTINGSDATA_DEVICE_NAME = settings.general.DEVICE_NAME;
@ -94,19 +93,6 @@ export class ConfigData {
SOFTWARE_UPDATES_ABILITY_NAME = 'com.hmos.ouc.MainAbility';
DEVICE_NAME = 'OpenHarmony 2.0 Canary';
// NFC states
// NFC is off
STATE_OFF = 1;
// NFC is turning on
STATE_TURNING_ON = 2;
// NFC is on
STATE_ON = 3;
// NFC is turning off
STATE_TURN_OFF = 4;
NFC_OPEN = '已开启';
NFC_CLOSE = '已关闭';
}
let configData = new ConfigData();

8
product/phone/src/main/ets/pages/OuterComponent.ets
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
@ -38,11 +39,9 @@ export default struct OuterComponent {
});
Column() {
if(this.mContentComponent){
this.mContentComponent()
}
}
.align(Alignment.Center)
.height(ConfigData.WH_100_100)
@ -67,13 +66,8 @@ export default struct OuterComponent {
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
}

32
product/phone/src/main/ets/pages/aboutDevice.ets
View File

@ -14,7 +14,7 @@
*/
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import AboutDeviceModel from '../model/aboutDeviceImpl/AboutDeviceModel'
import AboutDeviceModel from '../model/aboutDeviceImpl/AboutDeviceModel';
import {SubEntryComponentWithEndText} from '../../../../../../common/component/src/main/ets/default/subEntryComponent';
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
@ -25,8 +25,8 @@ import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUti
@Component
struct Index {
@State systemName: string = AboutDeviceModel.getSystemName();
private deviceInfo: any = ''
private aboutDeviceList: any[] = []
private deviceInfo: any = '';
private aboutDeviceList: any[] = [];
build() {
Column() {
@ -57,7 +57,9 @@ struct Index {
});
}
.width(ConfigData.WH_100_100)
.margin({ bottom: $r("app.float.distance_12"), top: $r("app.float.distance_8") })
.margin({ bottom: $r("app.float.distance_12"),
top: $r("app.float.distance_8")
})
List() {
ForEach(this.aboutDeviceList, (item) => {
@ -71,12 +73,15 @@ struct Index {
.padding({ top: $r('app.float.distance_12'), bottom: $r('app.float.distance_12') })
.fontColor($r("app.color.font_color_182431"))
.textAlign(TextAlign.Start);
Text(item.settingValue)
.fontSize($r("app.float.font_16"))
.lineHeight($r("app.float.wh_value_22"))
.fontWeight(FontWeight.Regular)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.padding({ top: $r('app.float.distance_12'), bottom: $r('app.float.distance_12') })
.padding({
top: $r('app.float.distance_12'),
bottom: $r('app.float.distance_12') })
.textAlign(TextAlign.End);
}
.width(ConfigData.WH_100_100)
@ -94,7 +99,10 @@ struct Index {
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('sys.float.ohos_id_card_margin_start'), right: $r('sys.float.ohos_id_card_margin_end') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
@ -125,22 +133,26 @@ struct Index {
private getDeviceInfo(): void {
for (let key in this.aboutDeviceList) {
let value = this.aboutDeviceList[key].settingAlias;
if ('model' === value) {
this.aboutDeviceList[key].settingValue = this.deviceInfo.productModel;
this.aboutDeviceList[key].settingTitle = $r('app.string.model');
}
};
if ('companyInfo' === value) {
this.aboutDeviceList[key].settingValue = this.deviceInfo.manufacture;
this.aboutDeviceList[key].settingTitle = $r('app.string.companyInfo');
}
};
if ('deviceId' === value) {
this.aboutDeviceList[key].settingValue = this.deviceInfo.serial;
this.aboutDeviceList[key].settingTitle = $r('app.string.deviceId');
}
};
if ('softwareVersion' === value) {
this.aboutDeviceList[key].settingValue = this.deviceInfo.displayVersion;
this.aboutDeviceList[key].settingTitle = $r('app.string.softwareVersion');
}
};
}
}

32
product/phone/src/main/ets/pages/applicationInfo.ets
View File

@ -69,7 +69,7 @@ struct ApplicationInfo {
Image(appInfo.settingIcon)
.width($r('app.float.wh_value_64'))
.height($r('app.float.wh_value_64'))
.margin({ right: $r('app.float.distance_16'), left: $r('app.float.distance_24') })
.margin({ right: $r('app.float.distance_16'), left:$r('sys.float.ohos_id_card_margin_start') })
Column() {
Text(appInfo.settingTitle)
@ -92,24 +92,14 @@ struct ApplicationInfo {
.margin({ top: $r("app.float.distance_8") })
Row() {
Text($r('app.string.uninstall'))
Button($r('app.string.uninstall'))
.fontSize($r('app.float.application_button_subtitle_size'))
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height($r('app.float.application_button_height'))
.visibility(this.isRemovableBundle ? Visibility.Visible : Visibility.Hidden)
.borderRadius($r('app.float.radius_20'))
.backgroundColor(!this.isTouchedLeft ? $r("app.color.color_D8D8D8_grey") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouchedLeft = true;
}
if (event.type === TouchType.Up) {
this.isTouchedLeft = false;
}
})
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
this.showDialog.open();
})
@ -118,23 +108,13 @@ struct ApplicationInfo {
.width($r('app.float.distance_24'))
.height($r('app.float.application_button_height'))
Text($r('app.string.forcedStop'))
Button($r('app.string.forcedStop'))
.fontSize($r('app.float.application_button_subtitle_size'))
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height($r('app.float.application_button_height'))
.borderRadius($r('app.float.radius_20'))
.backgroundColor(!this.isTouchedRight ? $r("app.color.color_D8D8D8_grey") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouchedRight = true;
}
if (event.type === TouchType.Up) {
this.isTouchedRight = false;
}
})
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
this.showPromptDialog(this.controller.killProcessesByBundleName.bind(this, appInfo.settingBundleName));
})
@ -161,7 +141,7 @@ struct ApplicationInfo {
valueFontSize: $r('app.float.font_14')
})
}
.padding($r('app.float.distance_4'))
.padding({top:$r('app.float.distance_4'),bottom:$r('app.float.distance_4')})
.borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
.backgroundColor($r('app.color.white_bg_color'))
.onClick(() => {

17
product/phone/src/main/ets/pages/applicationStorage.ets
View File

@ -58,7 +58,7 @@ struct ApplicationStorage {
Image(appInfo.settingIcon)
.width($r('app.float.wh_value_64'))
.height($r('app.float.wh_value_64'))
.margin({ right: $r('app.float.distance_16'), left: $r('app.float.distance_24') })
.margin({ right: $r('app.float.distance_16'), left: $r('sys.float.ohos_id_card_margin_start') })
Column() {
Text(appInfo.settingTitle)
.fontColor($r('app.color.font_color_182431'))
@ -110,7 +110,6 @@ struct ApplicationStorage {
}
.borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
.backgroundColor($r("app.color.white_bg_color"))
.padding($r('app.float.distance_4'))
ButtonComponent({ text: $r("app.string.deleteDataTab"), onClickEvent: () => {
this.showDialog(this.controller.clearUpApplicationData.bind(this, appInfo.settingBundleName));
@ -245,24 +244,14 @@ struct ButtonComponent {
build() {
Column() {
Text(this.text)
Button(this.text)
.fontSize($r('app.float.application_button_subtitle_size'))
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
.width($r('app.float.component_button_width'))
.height($r('app.float.application_button_height'))
.margin({ top: $r("app.float.wh_value_24"), bottom: $r("app.float.wh_value_32") })
.borderRadius($r('app.float.radius_20'))
.backgroundColor(!this.isTouched ? $r("app.color.color_D8D8D8_grey") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouched = true;
}
if (event.type === TouchType.Up) {
this.isTouched = false;
}
})
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
this.onClickEvent();
})

9
product/phone/src/main/ets/pages/developerOptions.ets
View File

@ -129,7 +129,7 @@ struct developerOptions {
.fontSize($r("sys.float.ohos_id_text_size_body1"))
}
.alignItems(HorizontalAlign.Start)
.margin({ left: $r('app.float.wh_24') })
.margin({ left: $r('sys.float.ohos_id_card_margin_start') })
Blank()
Row() {
@ -143,7 +143,7 @@ struct developerOptions {
.margin({ right: $r('app.float.distance_8') })
.fillColor($r("sys.color.ohos_id_color_primary"))
.opacity($r("app.float.opacity_0_2"))
.margin({ right: $r('app.float.wh_24') })
.margin({ right: $r('sys.float.ohos_id_card_margin_end')})
}
.onClick(() => {
this.AnimationScalingDialog.open()
@ -179,10 +179,7 @@ struct developerOptions {
}.margin({ top: $r("app.float.distance_12") })
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({
left: this.isPhone ? $r("app.float.wh_value_12") : $r('app.float.wh_24'),
right: this.isPhone ? $r("app.float.wh_value_12") : $r('app.float.wh_24')
})
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({

24
product/phone/src/main/ets/pages/locationServices.ets
View File

@ -14,7 +14,7 @@
*/
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import ViewModel from '../model/locationServicesImpl/LocationViewModel'
import ViewModel from '../model/locationServicesImpl/LocationViewModel';
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
@ -55,22 +55,17 @@ struct LocationServices {
Column() {
HeadComponent({ headName: $r('app.string.locationServicesTab'), isActive: true });
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Center
}) {
Row() {
Text($r('app.string.positionInformation'))
.fontColor($r("app.color.font_color_182431"))
.fontStyle(FontStyle.Normal)
.fontSize($r("app.float.location_font_size"))
.margin({
left: $r('app.float.distance_24'),
top: $r('app.float.distance_8'),
bottom: $r('app.float.distance_8')
})
}
Text($r('app.string.positionInformation'))
.fontColor($r("app.color.font_color_182431"))
.fontStyle(FontStyle.Normal)
.fontSize($r("app.float.location_font_size"))
.margin({ left: $r('app.float.distance_12') })
Toggle({ type: ToggleType.Switch, isOn: this.locationServiceStatus })
.margin({ right: $r('app.float.wh_value_6') })
@ -92,7 +87,10 @@ struct LocationServices {
.borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({

2
product/phone/src/main/ets/pages/multipleUsers.ets
View File

@ -382,7 +382,7 @@ struct CurrentDialogBuilder {
LogUtil.info("Click to modify user image.")
let chooseImageDialog = new CustomDialogController({
builder: ChooseImageDialog(),
alignment: DialogAlignment.Bottom,
alignment: DialogAlignment.Center,
offset: ({ dx: 0, dy: '-24dp' }),
});
chooseImageDialog.open();

73
product/phone/src/main/ets/pages/passwordCheck.ets
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import Log from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
@ -28,7 +29,7 @@ const DEFAULT_TIMES = 5;
@Component
struct PasswordCheck {
private TAG_PAGE = ConfigData.TAG + 'PasswordCheck page ';
private mController: PasswordCheckController = new PasswordCheckController()
private mController: PasswordCheckController = new PasswordCheckController();
// bind Properties
private pinToken: string = undefined;
@ -196,17 +197,19 @@ struct PasswordCheck {
.visibility(this.remainTimes === 0 ? Visibility.Hidden : Visibility.Visible)
// button
Row() {
Text($r('app.string.cancel'))
.fontSize($r('app.float.font_16'))
.fontWeight(FontWeight.Medium)
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Row() {
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Text($r('app.string.cancel'))
.fontSize($r('app.float.font_16'))
.fontWeight(FontWeight.Medium)
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
.height($r('app.float.application_button_height'))
}
.layoutWeight(1)
.height($r('app.float.application_button_height'))
.borderRadius($r('app.float.radius_20'))
.backgroundColor(!this.isTouchedLeft ? '#E6E9EB' : $r("sys.color.ohos_id_color_foreground_contrary"))
.backgroundColor(!this.isTouchedLeft ? $r("sys.color.ohos_id_color_button_normal") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouchedLeft = true;
@ -218,19 +221,21 @@ struct PasswordCheck {
.onClick(() => {
Router.back();
})
Column()
.width( $r('app.float.distance_12'))
.height($r('app.float.application_button_height'))
Text($r('app.string.next'))
.fontSize($r('app.float.font_16'))
.fontWeight(FontWeight.Medium)
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.textAlign(TextAlign.Center)
Column()
.width( $r('app.float.distance_12'))
.height($r('app.float.application_button_height'))
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Text($r('app.string.next'))
.fontSize($r('app.float.font_16'))
.fontWeight(FontWeight.Medium)
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.height($r('app.float.application_button_height'))
.textAlign(TextAlign.Center)
}
.layoutWeight(1)
.height($r('app.float.application_button_height'))
.borderRadius($r('app.float.radius_20'))
.backgroundColor(!this.isTouchedLeft ? '#E6E9EB' : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
@ -241,22 +246,24 @@ struct PasswordCheck {
}
})
.onClick(this.okOnClickHandler)
}
.alignItems(VerticalAlign.Center)
.width(ConfigData.WH_100_100)
.padding({
top: $r('app.float.distance_24'),
bottom: $r('app.float.distance_36'),
})
.margin({ top: $r('app.float.distance_66') })
.visibility(this.buttonVisibility)
}
.alignItems(VerticalAlign.Center)
.width(ConfigData.WH_100_100)
.padding({
top: $r('app.float.distance_24'),
bottom: $r('app.float.distance_36'),
left: $r('app.float.distance_24'),
right: $r('app.float.distance_24')
})
.margin({ top: $r('app.float.distance_66') })
.visibility(this.buttonVisibility)
}
}
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({

107
product/phone/src/main/ets/pages/passwordInput.ets
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import Log from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
@ -25,10 +26,9 @@ import InputMethod from '@ohos.inputmethod';
import deviceInfo from '@ohos.deviceInfo';
const deviceTypeInfo = deviceInfo.deviceType;
const MODULE_TAG = ConfigData.TAG + 'PasswdSetting.PasswdInput -> ';
const TAG = ConfigData.TAG + 'PasswdSetting.PasswdInput -> ';
let param;
console.log('settings_20220424 passwordInput page in');
@Entry
@Component
@ -91,6 +91,7 @@ struct PasswordInput {
.subscribe();
this.updateView();
if (deviceTypeInfo === 'phone') {
this.isPhone = true;
} else {
@ -104,8 +105,8 @@ struct PasswordInput {
}
/**
* Get the params from router
*/
* Get the params from router
*/
@Log
getRouterParam() {
param = Router.getParams()
@ -139,7 +140,7 @@ struct PasswordInput {
Column() {
// head
HeadComponent({ headName: this.pageTitle, isActive: true })
HeadComponent({ headName: this.pageTitle, isActive: true });
Column() {
// input message
@ -165,23 +166,24 @@ struct PasswordInput {
.margin({bottom:$r('app.float.wh_value_8')})
.onChange((value: string) => {
if (value.length > 6) {
return
return;
}
let length = value.length
for (let i = 0;i < 6; i++) {
if (i < length) {
this.passwordCircle[i] = value[i]
this.passwordCircle[i] = value[i];
} else {
this.passwordCircle[i] = ''
this.passwordCircle[i] = '';
}
}
this.passwordOnChangeHandler(value)
this.passwordOnChangeHandler(value);
})
.onSubmit((enterKey) => {
InputMethod.getInputMethodController().stopInput().then((ret) => {
LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
})
});
List({ space: 24 }) {
ForEach(this.passwordCircle, (item) => {
ListItem() {
@ -193,7 +195,8 @@ struct PasswordInput {
.margin({ top: $r('app.float.wh_value_12') })
}
})
}.listDirection(Axis.Horizontal)
}
.listDirection(Axis.Horizontal)
}
.margin({ top: $r('app.float.wh_value_20'),bottom:$r('app.float.wh_value_12') })
.width(ConfigData.WH_100_100)
@ -203,7 +206,6 @@ struct PasswordInput {
Column() {
Row() {
TextInput({ placeholder: '', text: this.password })
.margin({ right: $r("app.float.distance_16") })
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.placeholderFont({
@ -224,10 +226,9 @@ struct PasswordInput {
});
})
.onFocus(() => {
LogUtil.info(MODULE_TAG + "text input is focused");
LogUtil.info(TAG + "text input is focused");
this.isFocused = true;
})
}
Divider()
@ -237,7 +238,6 @@ struct PasswordInput {
.padding({ top: $r("app.float.distance_8"), bottom: $r("app.float.distance_6") })
}
CheckText();
// change unlock method
@ -253,24 +253,22 @@ struct PasswordInput {
}
.backgroundColor("rgba(0,0,0,0)")
.onClick(() => {
this.chooseUnlockMethodDialog.open()
this.chooseUnlockMethodDialog.open();
})
}
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
// button
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Row() {
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Text($r('app.string.cancel'))
.fontWeight(FontWeight.Medium)
.fontSize($r('app.float.application_button_subtitle_size'))
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.height($r('app.float.application_button_height'))
.textAlign(TextAlign.Center)
}
.margin({ right: "12vp" })
.layoutWeight(1)
.backgroundColor(!this.isTouchedLeft ? $r("sys.color.ohos_id_color_button_normal") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
@ -285,41 +283,43 @@ struct PasswordInput {
Router.back();
})
Column()
.width( $r('app.float.distance_12'))
.height($r('app.float.application_button_height'))
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Text(this.isInputFirstTime ? $r('app.string.continue_') : $r('app.string.confirm'))
.fontWeight(FontWeight.Medium)
.fontSize($r('app.float.application_button_subtitle_size'))
.lineHeight($r('app.float.wh_value_22'))
.fontColor($r('app.color.font_color_007DFF'))
.height($r('app.float.application_button_height'))
.textAlign(TextAlign.Center)
}
.layoutWeight(1)
.backgroundColor(!this.isTouchedRight ? $r("sys.color.ohos_id_color_button_normal") : $r("sys.color.ohos_id_color_foreground_contrary"))
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.isTouchedRight = true;
}
if (event.type === TouchType.Up) {
this.isTouchedRight = false;
console.log("isFocused0000000000")
this.isFocused = false
this.isFocused = false;
}
})
.onClick(this.okOnClickHandler)
}
.alignItems(this.isFocused === false ? VerticalAlign.Bottom : VerticalAlign.Top)
.height(this.passwordType == PinSubType.PIN_MIXED ? "63%" : "65%")
.padding(this.isFocused === false ?
{ bottom: 24 } :
{ top: (this.passwordType == PinSubType.PIN_MIXED ? "14%" : "16%") })
.padding(this.isFocused === false ? { bottom: 24 } : { top: (this.passwordType == PinSubType.PIN_MIXED ? "14%" : "16%") })
}
.width(ConfigData.WH_100_100)
.visibility(this.buttonVisibility)
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
}
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({
@ -342,10 +342,6 @@ struct PasswordInput {
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
@ -353,8 +349,8 @@ struct PasswordInput {
// --------------------------- updateView -----------------------
/**
* Update view data
*/
* Update view data
*/
@Log
clearViewData() {
AppStorage.SetOrCreate("checkMessage", '');
@ -365,8 +361,8 @@ struct PasswordInput {
}
/**
* Update view
*/
* Update view
*/
@Log
updateView() {
this.pageTitle = this.getPageTitle();
@ -376,10 +372,10 @@ struct PasswordInput {
}
/**
* Get page title
*
* @return : page title
*/
* Get page title
*
* @return : page title
*/
@Log
getPageTitle(): string | Resource {
let title: Resource = $r('app.string.password_enter_password');
@ -396,10 +392,10 @@ struct PasswordInput {
}
/**
* Get input message
*
* @return : message
*/
* Get input message
*
* @return : message
*/
@Log
getInputMessage(): string | Resource {
let inputMessage: string | Resource = '';
@ -424,28 +420,31 @@ struct PasswordInput {
}
/**
* Get unlock method list.
*
* @return : unlock method list
*/
* Get unlock method list.
*
* @return : unlock method list
*/
@Log
getUnlockMethodList(): RadioListItem[] {
var list: RadioListItem[] = [];
if (!this.isInputFirstTime) {
return list;
}
if (this.passwordType != PinSubType.PIN_SIX) {
list.push({
settingType: PinSubType.PIN_SIX,
settingTitle: $r('app.string.password_item_text_number_6')
})
}
if (this.passwordType != PinSubType.PIN_NUMBER) {
list.push({
settingType: PinSubType.PIN_NUMBER,
settingTitle: $r('app.string.password_item_text_custom')
})
}
if (this.passwordType != PinSubType.PIN_MIXED) {
list.push({
settingType: PinSubType.PIN_MIXED,
@ -456,16 +455,16 @@ struct PasswordInput {
}
/**
* Get button visibility
*
* @return : button visibility
*
*/
* Get button visibility
*
* @return : button visibility
*/
@Log
getButtonVisibility(): Visibility {
return this.passwordType == PinSubType.PIN_SIX ? Visibility.Hidden : Visibility.Visible
return this.passwordType == PinSubType.PIN_SIX ? Visibility.Hidden : Visibility.Visible;
}
}
// The check message need to change real time, put it in child component, so parent component does not refresh.
@Component
struct CheckText {

2
product/phone/src/main/ets/pages/passwordSetting.ets
View File

@ -247,7 +247,7 @@ struct PasswordSetting {
.width(ConfigData.WH_100_100)
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.margin({
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})

14
product/phone/src/main/ets/pages/privacy.ets
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
import FeatureAbility from '@ohos.ability.featureAbility';
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
@ -48,16 +49,20 @@ struct PrivacySettings {
});
Column() {
HeadComponent({ headName: $r('app.string.privacy'), isActive: true })
HeadComponent({ headName: $r('app.string.privacy'), isActive: true });
Column({ space: this.columnMargin }) {
PermissionComponent()
SubEntryComponent({ targetPage: 'pages/locationServices', title: $r('app.string.locationServicesTab') })
PermissionComponent();
SubEntryComponent({ targetPage: 'pages/locationServices', title: $r('app.string.locationServicesTab') });
}
.margin({ top: $r("app.float.distance_8") })
.width(ConfigData.WH_100_100)
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
@ -97,7 +102,6 @@ struct PrivacySettings {
}
}
/**
* Permission Manager Component
*/

55
product/phone/src/main/ets/pages/settingList.ets
View File

@ -26,7 +26,7 @@ import deviceInfo from '@ohos.deviceInfo';
import parameter from '@ohos.systemparameter';
const PAGE_SEARCH = 'pages/searchPage'; // for search
const deviceTypeInfo = deviceInfo.deviceType
const deviceTypeInfo = deviceInfo.deviceType;
const SETTINGS_LIST = [
[
{
@ -156,6 +156,7 @@ const SETTINGS_LIST = [
}
]
];
/**
* setting home page
*/
@ -172,7 +173,7 @@ struct SettingList {
Text($r('app.string.settings'))
.width(ConfigData.WH_100_100)
.height($r('app.float.wh_value_56'))
.fontColor($r("sys.color.ohos_id_color_primary"))
.fontColor($r("sys.color.ohos_id_color_text_primary"))
.fontSize($r('app.float.font_30'))
.fontWeight(FontWeight.Medium)
}
@ -241,33 +242,37 @@ struct SettingList {
aboutToAppear() {
LogUtil.info('settings SettingList aboutToAppear enter');
ResourceUtil.getString($r("app.string.searchHint")).then(value => this.placeholder = value) // for search
ResourceUtil.getString($r("app.string.searchHint")).then(value => this.placeholder = value);// for search
ResourceUtil.getString($r("app.float.search_placeholder_font")).then(value => this.placeholdersize = value);
ResourceUtil.getString($r('app.float.distance_12')).then(value => this.listSpaces = value);
let nYear = GlobalResourceManager.getStringByResource($r('app.string.year'));
nYear.then(resp => AppStorage.SetOrCreate(ConfigData.DATE_AND_TIME_YEAR, resp));
let nMonth = GlobalResourceManager.getStringByResource($r('app.string.month'));
nMonth.then(resp => AppStorage.SetOrCreate(ConfigData.DATE_AND_TIME_MONTH, resp));
let nDay = GlobalResourceManager.getStringByResource($r('app.string.day'));
nDay.then(resp => AppStorage.SetOrCreate(ConfigData.DATE_AND_TIME_DAY, resp));
LogUtil.info('settings SettingList aboutToAppear end');
if (deviceTypeInfo === 'phone') {
this.isPhone = true
this.isPhone = true;
} else {
this.isPhone = false
this.isPhone = false;
}
LogUtil.info('settings SettingList aboutToAppear end');
}
onPageShow() {
FeatureAbility.getWant().then((want) => {
if (want.uri === "wifi") {
Router.replace({ uri: "pages/wifi" })
Router.replace({ uri: "pages/wifi" });
} else if (want.uri === "bluetooth") {
Router.replace({ uri: "pages/bluetooth" })
Router.replace({ uri: "pages/bluetooth" });
} else if (want.uri === "volumeControl") {
Router.replace({ uri: "pages/volumeControl" })
Router.replace({ uri: "pages/volumeControl" });
} else if (want.uri === "locationServices") {
Router.replace({ uri: "pages/locationServices" })
Router.replace({ uri: "pages/locationServices" });
}
})
}
@ -289,7 +294,7 @@ struct EntryComponent {
}
LogUtil.info('settings SettingList nfc canUse' + this.nfcInfo);
if (!this.nfcInfo) {
this.settingsList[0].pop()
this.settingsList[0].pop();
}
}
@ -297,6 +302,8 @@ struct EntryComponent {
Column() {
if (!this.isPhone) {
Text($r('app.string.settings'))
.height($r("app.float.wh_value_56"))
.fontColor($r("sys.color.ohos_id_color_text_primary"))
.fontSize($r("app.float.font_30"))
.lineHeight($r("app.float.lineHeight_41"))
.fontWeight(FontWeight.Bold)
@ -304,11 +311,12 @@ struct EntryComponent {
.textAlign(TextAlign.Start)
.width(ConfigData.WH_100_100)
.padding({
left: $r('app.float.distance_26'),
top: $r('app.float.distance_12'),
bottom: $r('app.float.distance_17')
left: $r('app.float.distance_24'),
top: $r('app.float.distance_7'),
bottom: $r('app.float.distance_8')
})
}
List({ space: this.listSpaces }) {
// for search
ListItem() {
@ -328,8 +336,7 @@ struct EntryComponent {
.lineHeight($r("app.float.lineHeight_21"))
.fontWeight(FontWeight.Regular)
.fontFamily('HarmonyHeiTi')
.fontColor($r("sys.color.ohos_id_color_primary"))
.opacity($r("app.float.opacity_0_2"))
.fontColor($r("sys.color.ohos_id_color_text_secondary"))
.align(Alignment.Start)
.margin({
left: $r("app.float.distance_6"),
@ -342,17 +349,13 @@ struct EntryComponent {
color: $r("sys.color.ohos_id_color_fourth"),
radius: $r('app.float.wh_value_20')
})
.margin({
left: $r("app.float.distance_1"),
right: $r("app.float.distance_1"),
bottom: $r("app.float.distance_4")
})
.height($r("app.float.wh_value_40"))
.width(ConfigData.WH_100_100)
.alignItems(VerticalAlign.Center)
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
}
.height($r("app.float.wh_value_56"))
.padding($r("app.float.wh_value_8"))
}
.width(ConfigData.WH_100_100)
.onClick(() => {
@ -368,13 +371,13 @@ struct EntryComponent {
ForEach(eachBlock, (eachitem) => {
ListItem() {
if (eachitem.settingAlias === 'wlanTab') {
wifiItemComponent({ item: eachitem })
wifiItemComponent({ item: eachitem });
} else if (eachitem.settingAlias === 'blueToothTab') {
if (BluetoothModel.canUse) {
bluetoothItemComponent({ item: eachitem })
bluetoothItemComponent({ item: eachitem });
}
} else {
ItemComponent({ item: eachitem })
ItemComponent({ item: eachitem });
}
}
})
@ -397,7 +400,7 @@ struct EntryComponent {
.width(ConfigData.WH_100_100)
.alignSelf(ItemAlign.Start);
}
.margin({
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})

31
product/phone/src/main/ets/pages/storage.ets
View File

@ -21,30 +21,30 @@ import mediaquery from '@ohos.mediaquery';
/**
* Storage
*/
let portraitFunc = null
let portraitFunc = null;
@Entry
@Component
struct Storage {
listener = mediaquery.matchMediaSync('(orientation: landscape)')
listener = mediaquery.matchMediaSync('(orientation: landscape)');
@State storageList: any[] = [];
private usedSpace: any = '';
private totalSpace: any = '';
private freeBytes: any = '';
@State proportion: number = 0;
@State usedSpaceList: any[] = [];
@State screenWidth: number= 360
private dpi: number= vp2px(this.screenWidth) / this.screenWidth
@State screenWidth: number= 360;
private dpi: number= vp2px(this.screenWidth) / this.screenWidth;
private controller: StorageController = new StorageController();
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
display.getDefaultDisplay().then((disp) => {
this.screenWidth = disp.height / this.dpi / this.dpi
this.screenWidth = disp.height / this.dpi / this.dpi;
})
} else {
display.getDefaultDisplay().then((disp) => {
this.screenWidth = disp.width / this.dpi
this.screenWidth = disp.width / this.dpi;
})
}
}
@ -69,6 +69,7 @@ struct Storage {
Column() {
HeadComponent({ headName: $r('app.string.storageTab'), isActive: true });
Stack({ alignContent: Alignment.Center }) {
Column() {
Progress({ value: this.usedSpaceList[0], type: ProgressType.Ring })
@ -86,12 +87,14 @@ struct Storage {
Column() {
Row() {
Blank()
}.layoutWeight(1)
}
.layoutWeight(1)
Row() {
Column() {
Blank()
}.layoutWeight(1)
}
.layoutWeight(1)
Text(`${this.proportion}`)
.fontSize($r("app.float.dataPanel_proportion_font_size_1"))
@ -150,7 +153,6 @@ struct Storage {
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_secondary'))
.fontWeight(FontWeight.Regular)
.height($r('app.float.wh_value_40'))
.margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') })
.align(Alignment.End);
}
@ -162,7 +164,7 @@ struct Storage {
});
}
.padding({
left: $r("app.float.distance_16"),
left: $r("sys.float.ohos_id_card_margin_start"),
right: $r('sys.float.ohos_id_card_margin_end')
})
.divider({
@ -176,7 +178,10 @@ struct Storage {
.padding({ top: $r('app.float.distance_4'), bottom: $r('app.float.distance_4') })
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.align(Alignment.Start)
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
@ -211,8 +216,8 @@ struct Storage {
this.controller.bindComponent(this)
.bindProperties(["storageList", "totalSpace", "freeBytes", "usedSpace", "proportion", "usedSpaceList"])
.initData();
portraitFunc = this.onPortrait.bind(this)
this.listener.on('change', portraitFunc)
portraitFunc = this.onPortrait.bind(this);
this.listener.on('change', portraitFunc);
}
}
}

21
product/phone/src/main/ets/pages/volumeControl.ets
View File

@ -39,16 +39,20 @@ export struct VolumeControl {
//head
HeadComponent({ headName: $r('app.string.volumeControlTab') });
SubHeader({ titleContent: $r('app.string.soundMode') })
SubHeader({ titleContent: $r('app.string.soundMode') });
// sound mode
AudioRingerModeComponent();
SubHeader({ titleContent: $r('app.string.volumeControl') })
SubHeader({ titleContent: $r('app.string.volumeControl') });
// volume control
VolumeControlComponent();
}
.padding({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
}
@ -149,6 +153,7 @@ struct AudioRingerModeItem {
this.isRk = false;
}
}
build() {
Column() {
Image(this.image)
@ -171,9 +176,6 @@ struct AudioRingerModeItem {
.margin({top: $r('app.float.distance_4')})
.checked(this.checked)
}
.padding({
left: $r("app.float.distance_12"),
right: $r("app.float.distance_12")})
.alignItems(HorizontalAlign.Center)
.width(ConfigData.WH_50_100)
.height(ConfigData.WH_100_100)
@ -191,8 +193,8 @@ struct AudioRingerModeItem {
struct VolumeControlComponent {
@StorageLink('volume_ringtone') volumeRingTone: number = 2;
@StorageLink('volume_media') volumeMedia: number = 2;
@StorageLink('volume_voicecall') volumeVoiceCall: number = 2;
private voiceCallModel:VolumeModel = new VolumeModel(Audio.AudioVolumeType.VOICE_CALL);
private ringtoneModel:VolumeModel = new VolumeModel(Audio.AudioVolumeType.RINGTONE);
private mediaModel:VolumeModel = new VolumeModel(Audio.AudioVolumeType.MEDIA);
@ -222,12 +224,7 @@ struct VolumeControlComponent {
.width(ConfigData.WH_100_100)
.borderRadius($r('app.float.radius_24'))
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.padding({
top: $r('app.float.distance_12'),
left: $r('app.float.distance_12'),
right: $r('app.float.distance_12'),
bottom: $r('app.float.distance_24')
})
.padding($r('app.float.distance_12'))
}
@Log

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

@ -328,6 +328,10 @@
"name": "distance_6",
"value": "6vp"
},
{
"name": "distance_7",
"value": "7vp"
},
{
"name": "distance_8",
"value": "8vp"

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

@ -402,7 +402,7 @@
},
{
"name": "usersAccountsTab",
"value": "用户和帐号"
"value": "用户和帐户"
},
{
"name": "user",

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

@ -328,6 +328,10 @@
"name": "distance_6",
"value": "6vp"
},
{
"name": "distance_7",
"value": "7vp"
},
{
"name": "distance_8",
"value": "8vp"

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

@ -414,7 +414,7 @@
},
{
"name": "usersAccountsTab",
"value": "用户和帐号"
"value": "用户和帐户"
},
{
"name": "user",

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

@ -414,7 +414,7 @@
},
{
"name": "usersAccountsTab",
"value": "用户和账号"
"value": "用户和帐户"
},
{
"name": "user",