时间日期格式和UX优化

Signed-off-by: weiyunxing <weiyunxing@huawei.com>
This commit is contained in:
weiyunxing 2022-08-26 14:26:36 +08:00
parent 36bfc8a10e
commit 6cf8318a66
9 changed files with 126 additions and 120 deletions

View File

@ -17,33 +17,24 @@
*/
import ConfigData from './ConfigData';
import i18n from '@ohos.i18n';
import Intl from "@ohos.intl";
export class DateAndTimeUtil {
getSystemTime(isUsing24hFormat: boolean) {
let datetime = new Date();
let hours = datetime.getHours();
let minutes = datetime.getMinutes();
let time : Resource | string = this.concatTime(hours, minutes)
if (isUsing24hFormat === false) {
if (hours < 12) {
time = $r("app.string.timeMorning", this.concatTime(hours, minutes));
} else if (hours === 12) {
time = $r("app.string.timeMorning", this.concatTime(hours, minutes));
} else {
time = $r("app.string.timeAfternoon",this.concatTime((hours % 12), minutes)) ;
}
}
return time;
// @ts-ignore
var datefmt= new Intl.DateTimeFormat(i18n.getSystemLanguage(), { timeStyle: 'short' });
return datefmt.format(datetime);
}
getSystemDate() {
let dateTime = new Date();
let year = dateTime.getFullYear();
let month = dateTime.getMonth() + 1;
let day = dateTime.getDate();
let date = this.concatDate(year, month, day)
return date
let datetime = new Date();
// @ts-ignore
var datefmt= new Intl.DateTimeFormat(i18n.getSystemLanguage(), { dateStyle: 'long' });
return datefmt.format(datetime);
}
fill(value) {

View File

@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import StorageModel from '../../model/StorageImpl/StorageModel'
import StorageModel from '../../model/storageImpl/StorageModel'
import {LogAll} from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
import LogUtil from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import ConfigData from '../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';

View File

@ -19,7 +19,7 @@ import {TitleText} from '../../../../../../common/component/src/main/ets/default
import {DialogButtonLayout, DialogButtonLayoutWithState} from '../../../../../../common/component/src/main/ets/default/dialogComponent';
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import SystemAccountController from '../model/usersAndAccounts/systemAccountController';
import SystemAccountController from '../model/usersAndAccounts/SystemAccountController';
import SystemAccountModel from '../model/usersAndAccounts/systemAccountModel';
import { MAX_LENGTH } from '../model/usersAndAccounts/systemAccountModel';
import account_osAccount from '@ohos.account.osAccount';

View File

@ -17,7 +17,7 @@ import HeadComponent from '../../../../../../common/component/src/main/ets/defau
import Log from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import {PinSubType} from '../model/passwordImpl/PasswordModel';
import PasswordCheckController from '../controller/password/PasswordCheckController'
import PasswordCheckController from '../controller/password/PasswordCheckController';
import Router from '@system.router';
import InputMethod from '@ohos.inputmethod';
@ -31,32 +31,31 @@ struct PasswordCheck {
private mController: PasswordCheckController = new PasswordCheckController()
// bind Properties
private pinToken: string = undefined
private pinToken: string = undefined;
@State @Watch("freezeView")
private freezingTime: number = 0
private freezingTime: number = 0;
@State @Watch("updateView")
private remainTimes: number = -1
private remainTimes: number = -1;
// handler
private passwordOnChangeHandler: (value: string) => void;
private okOnClickHandler: (event?: ClickEvent) => void;
// private Properties
private pageRequestCode: number = -1
private prevPageUri: string = undefined
private pinChallenge: string = undefined
@State private passwordType: number = -1
@State private promptMessage: string | Resource = ''
@State private buttonVisibility: Visibility = Visibility.Visible
private pageRequestCode: number = -1;
private prevPageUri: string = undefined;
private pinChallenge: string = undefined;
@State private passwordType: number = -1;
@State private promptMessage: string | Resource = '';
@State private buttonVisibility: Visibility = Visibility.Visible;
@State private freezingTimeForView: number = -1;
@State private password: string = ''
private timerId: number = -1
@State isTouchedLeft: boolean = false
@State isTouchedRight: boolean = false
@State private password: string = '';
private timerId: number = -1;
@State isTouchedLeft: boolean = false;
@State isTouchedRight: boolean = false;
@Log
aboutToAppear(): void {
this.getRouterParam();
// bind event handlers
@ -79,11 +78,11 @@ struct PasswordCheck {
}
/**
* Get the params from router
*/
* Get the params from router
*/
@Log
getRouterParam() {
param = Router.getParams()
param = Router.getParams();
if (!param) {
return;
}
@ -185,6 +184,7 @@ struct PasswordCheck {
right: $r('sys.float.ohos_id_card_margin_end')
})
.color($r("sys.color.ohos_id_color_list_separator"))
// prompt message
Text(this.promptMessage)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
@ -193,6 +193,7 @@ struct PasswordCheck {
.align(Alignment.Center)
.textAlign(TextAlign.Center)
.margin({ top: $r('app.float.distance_14'), bottom: $r('app.float.distance_32') })
.visibility(this.remainTimes === 0 ? Visibility.Hidden : Visibility.Visible)
// button
Row() {
@ -220,6 +221,7 @@ struct PasswordCheck {
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)
@ -250,7 +252,6 @@ struct PasswordCheck {
})
.margin({ top: $r('app.float.distance_66') })
.visibility(this.buttonVisibility)
}
}
}
@ -285,8 +286,8 @@ struct PasswordCheck {
// --------------------------- updateView -----------------------
/**
* Update view
*/
* Update view
*/
@Log
updateView() {
this.promptMessage = this.getPromptMessage();
@ -294,60 +295,60 @@ struct PasswordCheck {
}
/**
* Get prompt message
*
* @return : message
*/
* Get prompt message
*
* @return : message
*/
@Log
getPromptMessage(): string | Resource {
return (this.remainTimes > 0 && this.remainTimes < DEFAULT_TIMES) ? $r('app.string.password_message_incorrect', this.remainTimes) : '';
}
/**
* 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;
}
/**
* When freezing time is greater than 0, start count down view.
*
* @return : button visibility
*/
* When freezing time is greater than 0, start count down view.
*
* @return : button visibility
*/
@Log
freezeView() {
if (this.freezingTime <= 0) {
this.stopCountDown()
this.stopCountDown();
return;
}
this.freezingTimeForView = this.freezingTime / 1000;
LogUtil.info(this.TAG_PAGE + `freezeView freezingTimeForView = ${this.freezingTimeForView}`);
this.timerId = setInterval(() => {
if (this.freezingTimeForView <= 0) {
this.stopCountDown()
this.timerId = -1
this.freezingTimeForView = 0
this.freezingTime = 0
this.updateView()
this.stopCountDown();
this.timerId = -1;
this.freezingTimeForView = 0;
this.freezingTime = 0;
this.updateView();
} else {
this.freezingTimeForView -= 1
this.freezingTimeForView -= 1;
}
}, 1000)
}
/**
* Stop count down view.
*/
* Stop count down view.
*/
@Log
stopCountDown() {
// for freezing view
if (this.timerId > 0) {
clearTimeout(this.timerId)
clearInterval(this.freezingTimeForView)
clearTimeout(this.timerId);
clearInterval(this.freezingTimeForView);
}
}
}

View File

@ -12,6 +12,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import deviceInfo from '@ohos.deviceInfo';
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import {DialogButtonLayout} from '../../../../../../common/component/src/main/ets/default/dialogComponent';
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
@ -25,6 +27,8 @@ import FeatureAbility from '@ohos.ability.featureAbility';
import prompt from '@system.prompt';
import Router from '@system.router';
const deviceTypeInfo = deviceInfo.deviceType;
@Entry
@Component
struct PasswordSetting {
@ -37,13 +41,19 @@ struct PasswordSetting {
// private Properties
private lockUi: boolean = false // prevent continuous and multiple clicks
@State isPhone: boolean = false;
@State isTouched: boolean = false;
@State touchedItem: boolean = false;
@State listSpace: string = '10vp'
@State listSpace: string = '10vp';
@State faceAuthFailedMessage: string = '';
@Log
aboutToAppear(): void {
if (deviceTypeInfo === 'phone') {
this.isPhone = true;
} else {
this.isPhone = false;
}
// bind component and initialize
this.mController.bindComponent(this)
@ -85,7 +95,7 @@ struct PasswordSetting {
if (this.lockUi) {
return;
}
this.lockUi = true
this.lockUi = true;
globalThis.settingsAbilityContext.startAbility({
bundleName: ConfigData.FACEAUTH_BUNDLE_NAME,
abilityName: ConfigData.FACEAUTH_ABILITY_NAME
@ -100,7 +110,7 @@ struct PasswordSetting {
})
LogUtil.error(`${this.TAG_PAGE}, ${ConfigData.FACEAUTH_BUNDLE_NAME} start failed. Cause: ${JSON.stringify(error)}`);
})
this.lockUi = false
this.lockUi = false;
})
}
@ -124,10 +134,10 @@ struct PasswordSetting {
if (this.lockUi) {
return;
}
this.lockUi = true
this.lockUi = true;
LogUtil.info(this.TAG_PAGE + ' disable password onclick : item = ' + JSON.stringify(item))
this.showClosePasswordDialog(item);
this.lockUi = false
this.lockUi = false;
});
}
@ -150,10 +160,10 @@ struct PasswordSetting {
if (this.lockUi) {
return;
}
this.lockUi = true
this.lockUi = true;
LogUtil.info(this.TAG_PAGE + ' item onclick : item = ' + JSON.stringify(item))
this.gotoNextPage(item)
this.lockUi = false
this.lockUi = false;
});
}
@ -185,11 +195,12 @@ struct PasswordSetting {
if (group[0].settingIsSectionTitle && group[0].settingShouldDisplay) {
ListItem() {
Text(group[0].settingTitle)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontSize($r("app.float.font_14"))
.lineHeight($r("app.float.lineHeight_19"))
.textAlign(TextAlign.Start)
.margin({ top: $r("app.float.distance_9_5") })
.padding({ left: $r('app.float.distance_24'), right: $r('app.float.distance_24') })
.padding({ left: $r('app.float.distance_12'), right: $r('app.float.distance_12') })
.width(ConfigData.WH_100_100);
}
}
@ -223,7 +234,6 @@ struct PasswordSetting {
.width(ConfigData.WH_100_100)
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.borderRadius($r('app.float.radius_24'))
.padding($r('app.float.distance_4'))
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_E3E3E3_grey'),
@ -237,7 +247,10 @@ struct PasswordSetting {
.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') })
.margin({
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({
@ -267,15 +280,15 @@ struct PasswordSetting {
//------------------------------ Router ---------------------------
/**
* Go to password page
*
* @param uri : page uri
* @param pageRequestCode : page request code
*/
* Go to password page
*
* @param uri : page uri
* @param pageRequestCode : page request code
*/
@Log
gotoNextPage(item: PasswordSettingItem) {
if (!item.settingUri) {
return
return;
}
Router.push({
uri: item.settingUri,
@ -289,9 +302,9 @@ struct PasswordSetting {
//------------------------------ Dialog ---------------------------
/**
* Close password dialog
* @param item password setting item
*/
* Close password dialog
* @param item password setting item
*/
@Log
showClosePasswordDialog(delItem: PasswordSettingItem) {
AlertDialog.show({
@ -315,8 +328,8 @@ struct PasswordSetting {
LogUtil.info(this.TAG_PAGE + 'ClosePasswordDialog Closed callbacks')
},
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: ({ dx: 0, dy: '-16dp' })
alignment: this.isPhone ? DialogAlignment.Bottom : DialogAlignment.Center,
offset: ({ dx: 0, dy: this.isPhone ? '-16dp' : 0 })
})
}
}

View File

@ -14,7 +14,7 @@
*/
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import RestoreFactorySettingsController from '../controller/restoreFactorySettings/restoreFactorySettingsController'
import RestoreFactorySettingsController from '../controller/restoreFactorySettings/RestoreFactorySettingsController'
import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';

View File

@ -14,7 +14,7 @@
*/
import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
import RestoreFactorySettingsController from '../controller/restoreFactorySettings/restoreFactorySettingsController'
import RestoreFactorySettingsController from '../controller/restoreFactorySettings/RestoreFactorySettingsController'
import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import Router from '@system.router';

View File

@ -163,9 +163,9 @@ const SETTINGS_LIST = [
@Component
struct SettingList {
@State placeholder: string= ''; // for search
@State placeholdersize: string = '22'
@State listSpaces: string = '12vp'
@State isPhone: boolean = false
@State placeholdersize: string = '22';
@State listSpaces: string = '12vp';
@State isPhone: boolean = false;
@Builder NavigationTitle() {
Column() {
@ -396,7 +396,8 @@ struct EntryComponent {
.flexShrink(1)
.width(ConfigData.WH_100_100)
.alignSelf(ItemAlign.Start);
}.margin({
}
.margin({
left: $r('sys.float.ohos_id_card_margin_start'),
right: $r('sys.float.ohos_id_card_margin_end')
})

View File

@ -24,7 +24,8 @@ import OuterComponent from './OuterComponent';
const VOLUME_MIN_VALUE = 0;
const VOLUME_MAX_VALUE = 15;
const deviceTypeInfo = deviceInfo.deviceType
const deviceTypeInfo = deviceInfo.deviceType;
/**
* Volume control
*/
@ -49,7 +50,7 @@ export struct VolumeControl {
VolumeControlComponent();
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.height(ConfigData.WH_100_100)
}
build() {
@ -59,7 +60,7 @@ export struct VolumeControl {
})
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
.height(ConfigData.WH_100_100)
}
@Log
@ -87,9 +88,8 @@ struct AudioRingerModeComponent {
private ringerNormalModel: RingerModel = new RingerModel(Audio.AudioRingMode.RINGER_MODE_NORMAL);
private TAG = ConfigData.TAG + ' AudioRingerModeComponent ';
build() {
Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween}) {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {
RowSplit() {
AudioRingerModeItem({
checked: $ringerModeNormal,
@ -97,6 +97,7 @@ struct AudioRingerModeComponent {
image: $r("app.media.ic_ring"),
text: $r('app.string.soundModeSound')
});
AudioRingerModeItem({
checked: $ringerModeSilent,
audioRingerModel: this.ringerSilentModel,
@ -105,17 +106,16 @@ struct AudioRingerModeComponent {
});
}
.resizeable(false)
.colorBlend($r("sys.color.ohos_id_color_list_separator"))
.colorBlend($r("sys.color.ohos_id_color_panel_bg"))
}
.borderRadius($r('app.float.radius_24'))
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.width(ConfigData.WH_100_100)
.height($r('app.float.wh_value_119'))
.padding({
top: $r('app.float.distance_16'),
bottom: $r('app.float.distance_16')
top: $r('app.float.distance_14'),
bottom: $r('app.float.distance_14')
})
}
@Log
@ -131,7 +131,6 @@ struct AudioRingerModeComponent {
}
}
/**
* AudioRingerMode item
*/
@ -141,13 +140,13 @@ struct AudioRingerModeItem {
private audioRingerModel: RingerModel;
private image;
private text: string | Resource;
@State isRk: boolean = true
@State isRk: boolean = true;
aboutToAppear() {
if (deviceTypeInfo === 'default') {
this.isRk = true
this.isRk = true;
} else {
this.isRk = false
this.isRk = false;
}
}
build() {
@ -156,35 +155,35 @@ struct AudioRingerModeItem {
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
.objectFit(ImageFit.Contain)
.fillColor($r("sys.color.ohos_id_color_primary"))
.fillColor($r("sys.color.ohos_fa_icon_secondary"))
Text(this.text)
.fontColor($r("sys.color.ohos_id_color_text_primary"))
.fontColor($r("app.color.font_color_182431"))
.fontSize($r("sys.float.ohos_id_text_size_body2"))
.lineHeight($r("app.float.lineHeight_19"))
.fontWeight(FontWeight.Regular)
.textAlign(TextAlign.Center)
.margin({top:$r('app.float.wh_4')});
.margin({top:$r('app.float.distance_8')});
Radio({ value: '', group: '' })
.width(this.isRk?$r('app.float.distance_8'):$r('app.float.wh_value_30'))
.height(this.isRk?$r('app.float.distance_8'):$r('app.float.wh_value_30'))
.margin({top: $r('app.float.distance_8')})
.width(this.isRk ? $r('app.float.distance_8') : $r('app.float.wh_value_24'))
.height(this.isRk ? $r('app.float.distance_8') : $r('app.float.wh_value_24'))
.margin({top: $r('app.float.distance_4')})
.checked(this.checked)
.enabled(false)
}
.padding({left: $r("app.float.distance_12"), right: $r("app.float.distance_12")})
.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)
.onClick(() => {
LogUtil.info(ConfigData.TAG + 'AudioRingerModeItem : item is clicked')
LogUtil.info(ConfigData.TAG + 'AudioRingerModeItem : item is clicked');
this.audioRingerModel.setRingerMode();
});
}
}
/**
* Volume control component
*/
@ -202,17 +201,18 @@ struct VolumeControlComponent {
build() {
Column() {
VolumeControlItem({
image: this.volumeRingTone === 0 ? $r("app.media.ic_ring_off") : $r("app.media.ic_ring"),
volumeValue: $volumeRingTone,
volumeModel: this.ringtoneModel,
text: $r("app.string.volumeControlRing")})
VolumeControlItem({
image: $r("app.media.ic_media"),
volumeValue: $volumeMedia,
volumeModel: this.mediaModel,
text: $r("app.string.volumeControlMedia")})
VolumeControlItem({
image: $r("app.media.ic_call"),
volumeValue: $volumeVoiceCall,
@ -243,7 +243,6 @@ struct VolumeControlComponent {
}
}
/**
* Volume control item
*/
@ -260,7 +259,7 @@ struct VolumeControlItem {
Image(this.image)
.width($r('app.float.wh_value_20'))
.height($r('app.float.wh_value_20'))
.fillColor($r("sys.color.ohos_id_color_primary"))
.fillColor($r("sys.color.ohos_fa_icon_secondary"))
.objectFit(ImageFit.Contain)
Text(this.text)
@ -274,6 +273,7 @@ struct VolumeControlItem {
.margin({ bottom: $r('app.float.distance_1')})
.width(ConfigData.WH_100_100)
.align(Alignment.Center);
Slider({
value: this.volumeValue,
min: VOLUME_MIN_VALUE,