diff --git a/common/src/main/ets/default/constants/PresetStyleConstants.ts b/common/src/main/ets/default/constants/PresetStyleConstants.ts index 241a52a9..49c8e52f 100644 --- a/common/src/main/ets/default/constants/PresetStyleConstants.ts +++ b/common/src/main/ets/default/constants/PresetStyleConstants.ts @@ -164,6 +164,11 @@ export default class PresetStyleConstants { */ static readonly DEFAULT_OPEN_FOLDER_MARGIN_TOP = 188; + /** + * margin top of open folder + */ + static readonly DEFAULT_OPEN_FOLDER_TITLE_TOP = 40; + //----------- folder add list ------------------ /** * max height of container diff --git a/common/src/main/ets/default/constants/StyleConstants.ts b/common/src/main/ets/default/constants/StyleConstants.ts index 9258d43b..d752f6c3 100644 --- a/common/src/main/ets/default/constants/StyleConstants.ts +++ b/common/src/main/ets/default/constants/StyleConstants.ts @@ -52,6 +52,7 @@ export default class StyleConstants { static readonly DEFAULT_OPEN_FOLDER_SWIPER_HEIGHT= 480; static readonly DEFAULT_OPEN_FOLDER_GRID_GAP= 6; static readonly DEFAULT_OPEN_FOLDER_TITLE_HEIGHT = 130; + static readonly DEFAULT_OPEN_FOLDER_TITLE_TOP = 130; static readonly DEFAULT_APP_ADD_TITLE_SIZE = 56; static readonly DEFAULT_DIALOG_BOTTOM_MARGIN_NUMBER = 16; static readonly DEFAULT_BUTTON_HEIGHT_NUMBER = 40; diff --git a/common/src/main/ets/default/layoutconfig/LauncherLayoutStyleConfig.ts b/common/src/main/ets/default/layoutconfig/LauncherLayoutStyleConfig.ts index 9cf3fa4f..2a68cb66 100644 --- a/common/src/main/ets/default/layoutconfig/LauncherLayoutStyleConfig.ts +++ b/common/src/main/ets/default/layoutconfig/LauncherLayoutStyleConfig.ts @@ -104,6 +104,11 @@ export default class LauncherLayoutStyleConfig extends ILayoutConfig { */ mFolderOpenMargin: number = PresetStyleConstants.DEFAULT_OPEN_FOLDER_MARGIN_TOP; + /** + * margin top of open folder + */ + mFolderOpenTitle: number = PresetStyleConstants.DEFAULT_OPEN_FOLDER_TITLE_TOP; + /** * gutter of add app */ diff --git a/common/src/main/ets/default/viewmodel/LayoutViewModel.ts b/common/src/main/ets/default/viewmodel/LayoutViewModel.ts index 15af7b2a..ac726da8 100644 --- a/common/src/main/ets/default/viewmodel/LayoutViewModel.ts +++ b/common/src/main/ets/default/viewmodel/LayoutViewModel.ts @@ -289,6 +289,7 @@ export default class LayoutViewModel { let gutter = this.mLauncherLayoutStyleConfig.mFolderOpenGutter; let padding = this.mLauncherLayoutStyleConfig.mFolderOpenPADDING; let margin = this.mLauncherLayoutStyleConfig.mFolderOpenMargin; + let title = this.mLauncherLayoutStyleConfig.mFolderOpenTitle; let itemSize = this.mDesktopItemSize; let layoutWidth = column * itemSize + (column - 1) * gutter + 2 * padding; let layoutHeight = row * itemSize + (row - 1) * gutter + 2 * padding; @@ -305,6 +306,7 @@ export default class LayoutViewModel { mOpenFolderGridGap: gutter, mOpenFolderGridPadding: padding, mFolderOpenMargin: margin, + mFolderOpenTitle: title, mOpenFolderGridIconTopPadding: this.mDesktopIconMarginTop }; return result; diff --git a/feature/bigfolder/src/main/ets/default/common/BigFolderStyleConfig.ts b/feature/bigfolder/src/main/ets/default/common/BigFolderStyleConfig.ts index 364e5d7f..01f2c2d0 100644 --- a/feature/bigfolder/src/main/ets/default/common/BigFolderStyleConfig.ts +++ b/feature/bigfolder/src/main/ets/default/common/BigFolderStyleConfig.ts @@ -50,6 +50,7 @@ export default class BigFolderStyleConfig extends AppListStyleConfig { * margin of folder open */ mFolderOpenMargin = StyleConstants.DEFAULT_OPEN_FOLDER_TITLE_HEIGHT; + mFolderOpenTitle = StyleConstants.DEFAULT_OPEN_FOLDER_TITLE_TOP; /** * open folder app size @@ -232,6 +233,7 @@ export default class BigFolderStyleConfig extends AppListStyleConfig { this.mOpenFolderGridGap = openResult.mOpenFolderGridGap; this.mOpenFolderGridPadding = openResult.mOpenFolderGridPadding; this.mFolderOpenMargin = openResult.mFolderOpenMargin; + this.mFolderOpenTitle = openResult.mFolderOpenTitle; this.mOpenFolderGridIconTopPadding = openResult.mOpenFolderGridIconTopPadding; this.mAddFolderGridWidth = addResult.mAddFolderGridWidth; diff --git a/feature/bigfolder/src/main/ets/default/common/constants/FolderStyleConstants.ts b/feature/bigfolder/src/main/ets/default/common/constants/FolderStyleConstants.ts index 83c688f1..ba254990 100644 --- a/feature/bigfolder/src/main/ets/default/common/constants/FolderStyleConstants.ts +++ b/feature/bigfolder/src/main/ets/default/common/constants/FolderStyleConstants.ts @@ -19,6 +19,7 @@ export default class FolderStyleConstants { static readonly DEFAULT_ICON: any = $r('app.media.icon'); static readonly DEFAULT_BACKGROUND_IMAGE = '$media:ic_wallpaper_folder'; static readonly DEFAULT_ADD_FOLDER_APP_IMAGE = '/common/pics/ic_public_add.svg'; + static readonly DEFAULT_CANCEL_APP_IMAGE = '/common/pics/ic_public_cancel.svg'; // font style resources static readonly DEFAULT_FONT_COLOR = '#ffffff'; @@ -36,13 +37,24 @@ export default class FolderStyleConstants { static readonly DEFAULT_APP_ITEM_HEIGHT = 95; static readonly DEFAULT_APP_ICON_SIZE_WIDTH = 70; static readonly DEFAULT_APP_NAME_HEIGHT = 25; - static readonly DEFAULT_ADD_APP_ICON_SIZE = 50; + static readonly DEFAULT_ADD_APP_ICON_SIZE = 28; static readonly DEFAULT_ADD_APP_SIZE = 54; static readonly DEFAULT_VP_30 = 30; static readonly DEFAULT_OPEN_FOLDER_NAME_SIZE = 30; static readonly DEFAULT_OPEN_FOLDER_TITLE_HEIGHT = 130; // Folder add app grid list + static readonly DEFAULT_OPEN_FOLDER_TEXTAREA_HEIGHT = 48; + static readonly DEFAULT_OPEN_FOLDER_CANCEL_SIZE = 24; + static readonly DEFAULT_OPEN_FOLDER_TITLE_TOP = 90; + static readonly DEFAULT_OPEN_FOLDER_NAVIGATION = 0; + static readonly DEFAULT_OPEN_FOLDER_PHONE_HEIGHT = 524; + static readonly DEFAULT_OPEN_FOLDER_PHONE_ICON = 85; + static readonly DEFAULT_OPEN_FOLDER_INDICATOR = 150; + static readonly DEFAULT_DIALOG_OPACITY = 0.95; + static readonly DEFAULT_OPEN_FOLDER_CANCEL_WIDTH = '85%'; + static readonly DEFAULT_OPEN_FOLDER_CANCEL_HEIGHT = '40%'; + static readonly DEFAULT_APP_GRID_TEXT_FONT_WEIGHT = 600; static readonly DEFAULT_FOLDER_APP_DIALOG_LIST = 536; static readonly DEFAULT_FOLDER_APP_GRID_LIST = 424; static readonly DEFAULT_FOLDER_APP_GRID_MARGIN = 10; @@ -59,6 +71,7 @@ export default class FolderStyleConstants { static readonly DEFAULT_APP_ADD_TITLE_SIZE = 56; static readonly DEFAULT_APP_ADD_DIALOG_WIDTH = 394; static readonly DEFAULT_APP_ADD_DIALOG_HEIGHT = 536; + static readonly DEFAULT_DIVIDER_HEIGHT = 24; static readonly DEFAULT_BUTTON_HEIGHT = 40; static readonly DEFAULT_BUTTON_WIDTH = 100; static readonly DEFAULT_DIALOG_BOTTOM_MARGIN = 16; diff --git a/feature/bigfolder/src/main/ets/default/common/uicomponents/FolderAppListDialog.ets b/feature/bigfolder/src/main/ets/default/common/uicomponents/FolderAppListDialog.ets index e65a280f..63f3fd06 100644 --- a/feature/bigfolder/src/main/ets/default/common/uicomponents/FolderAppListDialog.ets +++ b/feature/bigfolder/src/main/ets/default/common/uicomponents/FolderAppListDialog.ets @@ -31,6 +31,8 @@ let folderViewModel: FolderViewModel; @CustomDialog export default struct FolderAppListDialog { + @StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false; + @StorageLink('isPad') isPad: boolean = false; @StorageLink('allAppListForFolder') allAppInfoList: [] = []; @StorageLink('folderAppList') folderAppList: [] = []; @StorageLink('appListChecked') @Watch('onAppListChecked') appListChecked: any = []; @@ -78,122 +80,128 @@ export default struct FolderAppListDialog { } build() { - Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.End}) { - TitleDescriptionComponent({ - mTitleDescription: $titleDescription, - mTextSize: this.mFolderStyleConfig.mAddFolderTitleSize}) - Column() { - Grid() { - ForEach(this.allAppInfoList, (item) => { - GridItem() { - Stack() { - Column() { - AppBubble({ - iconSize: this.mFolderStyleConfig.mAddFolderIconSize, - nameSize: this.mFolderStyleConfig.mAddFolderTextSize, - nameFontColor: this.mNameFontColor, - nameHeight: this.mFolderStyleConfig.mAddFolderTextLines, - appName: item.appName, - bundleName: item.bundleName, - appIconId: item.appIconId, - appLabelId: item.appLabelId, - isSelect:false, - badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE, - nameLines: this.mFolderStyleConfig.mAddFolderTextLines, - mPaddingTop: this.mFolderStyleConfig.mAddFolderIconPaddingTop, - mIconNameMargin: this.mFolderStyleConfig.mIconNameMargin - }) - } - Toggle({ type: ToggleType.Checkbox, isOn: item.checked }) - .width(this.mFolderStyleConfig.mFolderToggleSize) - .height(this.mFolderStyleConfig.mFolderToggleSize) - .position({x:-this.mFolderStyleConfig.mFolderToggleSize + this.mFolderStyleConfig.mAddFolderIconMarginHorizontal, - y:-this.mFolderStyleConfig.mFolderToggleSize/2}) - .onChange((isOn: boolean) => { - Log.showInfo(TAG, `Toggle onChange this.isOn: ${isOn}`); - if (isOn) { - item.checked = true; - let appItem: any; - appItem = item; - appItem.area = [1, 1]; - appItem.type = CommonConstants.TYPE_APP; - this.appListChecked.push(appItem); - } else { - item.checked = false; - let index = this.appListChecked.indexOf(item); - this.appListChecked.splice(index, 1); + Column(){ + Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.End}) { + TitleDescriptionComponent({ + mTitleDescription: $titleDescription, + mTextSize: this.mFolderStyleConfig.mAddFolderTitleSize}) + Column() { + Grid() { + ForEach(this.allAppInfoList, (item) => { + GridItem() { + Stack() { + Column() { + AppBubble({ + iconSize: this.mFolderStyleConfig.mAddFolderIconSize, + nameSize: this.mFolderStyleConfig.mAddFolderTextSize, + nameFontColor: this.mNameFontColor, + nameHeight: this.mFolderStyleConfig.mAddFolderTextLines, + appName: item.appName, + bundleName: item.bundleName, + appIconId: item.appIconId, + appLabelId: item.appLabelId, + isSelect:false, + badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE, + nameLines: this.mFolderStyleConfig.mAddFolderTextLines, + mPaddingTop: FolderStyleConstants.DEFAULT_APP_TITLE_MARGIN, + mIconNameMargin: this.mFolderStyleConfig.mIconNameMargin + }) } - AppStorage.SetOrCreate('appListChecked', this.appListChecked); - }) + Toggle({ type: ToggleType.Checkbox, isOn: item.checked }) + .width(this.mFolderStyleConfig.mFolderToggleSize) + .height(this.mFolderStyleConfig.mFolderToggleSize) + .selectedColor(0x007DFF) + .position({x:-this.mFolderStyleConfig.mFolderToggleSize + this.mFolderStyleConfig.mAddFolderIconMarginHorizontal, + y:-this.mFolderStyleConfig.mFolderToggleSize/2}) + .onChange((isOn: boolean) => { + Log.showInfo(TAG, `Toggle onChange this.isOn: ${isOn}`); + if (isOn) { + item.checked = true; + let appItem: any; + appItem = item; + appItem.area = [1, 1]; + appItem.type = CommonConstants.TYPE_APP; + this.appListChecked.push(appItem); + } else { + item.checked = false; + let index = this.appListChecked.indexOf(item); + this.appListChecked.splice(index, 1); + } + AppStorage.SetOrCreate('appListChecked', this.appListChecked); + }) + } } - } - .width(this.mFolderStyleConfig.mAddFolderItemSize) - .height(this.mFolderStyleConfig.mAddFolderItemSize) - }, (item) => JSON.stringify(item)) - } - .columnsTemplate(this.getColumnsTemplate()) - .columnsGap(this.mFolderStyleConfig.mAddFolderGridGap) - .rowsGap(this.mFolderStyleConfig.mAddFolderGridGap) - .margin( this.mFolderStyleConfig.mAddFolderGridMargin ) - } - .width(this.mFolderStyleConfig.mAddFolderDialogWidth) - .height(this.mGridHeight) - - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Button() { - Text($r('app.string.cancel_dialog')) - .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize) - .fontColor(CommonStyleConstants.BUTTON_FONT_COLOR) - } - .flexGrow(1) - .backgroundColor(CommonStyleConstants.DEFAULT_BG_COLOR) - .width(FolderStyleConstants.DEFAULT_BUTTON_WIDTH) - .height(FolderStyleConstants.DEFAULT_BUTTON_HEIGHT) - .onClick(() => { - this.controller.close(); - this.cancel() - }) - - Divider() - .vertical(true) - .color(CommonStyleConstants.DEFAULT_DIVIDER_COLOR) - .height(FolderStyleConstants.DEFAULT_BUTTON_HEIGHT) - - Button() { - Text($r('app.string.confirm_dialog')) - .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize) - .fontColor(CommonStyleConstants.BUTTON_FONT_COLOR) - } - .flexGrow(1) - .backgroundColor(CommonStyleConstants.DEFAULT_BG_COLOR) - .height(FolderStyleConstants.DEFAULT_BUTTON_HEIGHT) - .width(FolderStyleConstants.DEFAULT_BUTTON_WIDTH) - .onClick(() => { - Log.showInfo(TAG, `Dialog confirm start`); - folderViewModel.updateFolderAppList(this.appListChecked, this.folderItem); - let isDestory = false; - if (this.folderItem.layoutInfo[0].length < 2) { - isDestory = true; - } else { - folderViewModel.refreshFolder(this.folderItem); + .width(this.mFolderStyleConfig.mAddFolderItemSize) + .height(this.mFolderStyleConfig.mAddFolderItemSize) + }, (item) => JSON.stringify(item)) } - this.controller.close(); - this.confirm(isDestory); - Log.showInfo(TAG, `Dialog confirm end`); - }) + .columnsTemplate(this.getColumnsTemplate()) + .columnsGap(this.mFolderStyleConfig.mAddFolderGridGap) + .rowsGap(this.mFolderStyleConfig.mAddFolderGridGap) + .margin( this.mFolderStyleConfig.mAddFolderGridMargin ) + } + .width(this.mFolderStyleConfig.mAddFolderDialogWidth) + .height(this.mGridHeight) + + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Button() { + Text($r('app.string.cancel_dialog')) + .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize) + .fontColor(CommonStyleConstants.BUTTON_FONT_COLOR) + } + .flexGrow(1) + .backgroundColor(CommonStyleConstants.DEFAULT_BG_COLOR) + .width(FolderStyleConstants.DEFAULT_BUTTON_WIDTH) + .height(FolderStyleConstants.DEFAULT_BUTTON_HEIGHT) + .onClick(() => { + this.controller.close(); + this.cancel() + }) + + Divider() + .vertical(true) + .color(CommonStyleConstants.DEFAULT_DIVIDER_COLOR) + .height(FolderStyleConstants.DEFAULT_DIVIDER_HEIGHT) + + Button() { + Text($r('app.string.confirm_dialog')) + .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize) + .fontColor(CommonStyleConstants.BUTTON_FONT_COLOR) + } + .flexGrow(1) + .backgroundColor(CommonStyleConstants.DEFAULT_BG_COLOR) + .height(FolderStyleConstants.DEFAULT_BUTTON_HEIGHT) + .width(FolderStyleConstants.DEFAULT_BUTTON_WIDTH) + .onClick(() => { + Log.showInfo(TAG, `Dialog confirm start`); + folderViewModel.updateFolderAppList(this.appListChecked, this.folderItem); + let isDestory = false; + if (this.folderItem.layoutInfo[0].length < 2) { + isDestory = true; + } else { + folderViewModel.refreshFolder(this.folderItem); + } + this.controller.close(); + this.confirm(isDestory); + Log.showInfo(TAG, `Dialog confirm end`); + }) + } } - } - .backgroundColor(Color.White) - .padding({ - bottom: FolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN - }) - .border({ - radius: CommonStyleConstants.DEFAULT_DIALOG_RADIUS - }) - .margin({ - bottom: FolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN - }) - .width(this.mFolderStyleConfig.mAddFolderDialogWidth) - .height(this.mDialogHeight) + .backgroundColor(Color.White) + .padding({ + bottom: FolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN + }) + .border({ + radius: CommonStyleConstants.DEFAULT_DIALOG_RADIUS + }) + .margin({ + bottom: FolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN + }) + .width(this.mFolderStyleConfig.mAddFolderDialogWidth) + .height(this.mDialogHeight) + if (!this.navigationBarStatusValue){ + Stack().width(this.mFolderStyleConfig.mAddFolderDialogWidth).height(FolderStyleConstants.DEFAULT_APP_GRID_TOGGLE_SIZE) + } + }.width('100%').height('100%').justifyContent(this.isPad ? FlexAlign.Center : FlexAlign.End) } } diff --git a/feature/bigfolder/src/main/ets/default/common/uicomponents/TitleDescriptionComponent.ets b/feature/bigfolder/src/main/ets/default/common/uicomponents/TitleDescriptionComponent.ets index be85c70a..59c20cb2 100644 --- a/feature/bigfolder/src/main/ets/default/common/uicomponents/TitleDescriptionComponent.ets +++ b/feature/bigfolder/src/main/ets/default/common/uicomponents/TitleDescriptionComponent.ets @@ -23,6 +23,7 @@ export default struct TitleDescriptionComponent { build() { Text(this.mTitleDescription) .fontSize(this.mTextSize) + .fontWeight(FolderStyleConstants.DEFAULT_APP_GRID_TEXT_FONT_WEIGHT) .margin({ top: FolderStyleConstants.DEFAULT_APP_TITLE_MARGIN, bottom: FolderStyleConstants.DEFAULT_APP_TITLE_MARGIN, diff --git a/feature/bigfolder/src/main/ets/default/view/FolderOpenComponent.ets b/feature/bigfolder/src/main/ets/default/view/FolderOpenComponent.ets index 90035ea0..34fa982a 100644 --- a/feature/bigfolder/src/main/ets/default/view/FolderOpenComponent.ets +++ b/feature/bigfolder/src/main/ets/default/view/FolderOpenComponent.ets @@ -57,6 +57,7 @@ let mGridWidth; let mGridHeight; let mGridPadding; let mGridMarginTop; +let mFolderOpenTitle; let mGridIconTopPadding; let isPad = false; @@ -103,6 +104,7 @@ export default struct FolderOpenComponent { mNameLines = mBigFolderStyleConfig.mNameLines; mIconNameMargin = mBigFolderStyleConfig.mIconNameMargin; mGridMarginTop = mBigFolderStyleConfig.mFolderOpenMargin; + mFolderOpenTitle = mBigFolderStyleConfig.mFolderOpenTitle; mGridIconTopPadding = mBigFolderStyleConfig.mOpenFolderGridIconTopPadding; } @@ -188,9 +190,14 @@ export default struct FolderOpenComponent { Log.showInfo(TAG, 'title click'); this.isRenaming = true; }) - TextInput({ placeholder: this.mFolderInfo.folderName, text: this.newFolderName }) - .maxLength(CommonConstants.FOLDER_NAME_MAX_LENGTH) + TextArea({ placeholder: this.mFolderInfo.folderName, text: this.newFolderName }) + .height(FolderStyleConstants.DEFAULT_OPEN_FOLDER_TEXTAREA_HEIGHT) + .textAlign(TextAlign.Center) .fontColor(Color.White) + .fontSize(FolderStyleConstants.DEFAULT_OPEN_FOLDER_NAME_SIZE) + .fontWeight(FontWeight.Normal) + .fontFamily("sans-serif") + .fontStyle(FontStyle.Normal) .placeholderColor(Color.White) .caretColor(Color.White) .placeholderFont({ @@ -198,25 +205,36 @@ export default struct FolderOpenComponent { weight: FontWeight.Normal, family: "sans-serif" }) + .backgroundColor('rgba(255,255,255,0.3)') + .clip(new Rect({ + width:FolderStyleConstants.PERCENTAGE_100, + height:FolderStyleConstants.DEFAULT_OPEN_FOLDER_TEXTAREA_HEIGHT, + radius:[[FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE,FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE], + [FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE,FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE], + [FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE,FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE], + [FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE,FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE]]})) .width(FolderStyleConstants.PERCENTAGE_100) .visibility(this.isRenaming ? Visibility.Visible : Visibility.Hidden) - .enterKeyType(EnterKeyType.Done) - .border({ - width: 1, - color: Color.White, - radius: 10, - style: BorderStyle.Solid - }) - .onSubmit((enterKey: EnterKeyType) => { - Log.showInfo(TAG, `textinput done: ${enterKey}`); + .onBlur(()=> { this.isRenaming = true; this.saveText(); }) .onChange((text: string) => { Log.showInfo(TAG, `textinput: ` + text); - this.newFolderName = text; + this.newFolderName = text; + }) + Image(FolderStyleConstants.DEFAULT_CANCEL_APP_IMAGE) + .width(FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE) + .height(FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_SIZE) + .position({ x: FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_WIDTH, + y: FolderStyleConstants.DEFAULT_OPEN_FOLDER_CANCEL_HEIGHT}) + .visibility(this.isRenaming ? Visibility.Visible : Visibility.Hidden) + .onClick(()=>{ + this.mFolderInfo.folderName = '' + this.newFolderName = '' }) } + .margin({ top: mFolderOpenTitle }) .width(mGridWidth) .height(mGridMarginTop) @@ -229,7 +247,8 @@ export default struct FolderOpenComponent { }, (item) => JSON.stringify(item)) } .indicatorStyle({ - selectedColor: StyleConstants.DEFAULT_FONT_COLOR + selectedColor: StyleConstants.DEFAULT_FONT_COLOR, + bottom: FolderStyleConstants.DEFAULT_OPEN_FOLDER_INDICATOR }) .onClick(() => { Log.showInfo(TAG, `Swiper click`); diff --git a/feature/form/src/main/ets/default/common/constants/StyleConstants.ts b/feature/form/src/main/ets/default/common/constants/StyleConstants.ts index 37a5dccb..3201d423 100644 --- a/feature/form/src/main/ets/default/common/constants/StyleConstants.ts +++ b/feature/form/src/main/ets/default/common/constants/StyleConstants.ts @@ -60,5 +60,5 @@ export default class StyleConstants { // the dpi of phone should be 480, but it is 320 currently. // so all dimensions have to be multiplied by 1.5 - static readonly DPI_RATIO = 1.5; + static readonly DPI_RATIO = 1; } \ No newline at end of file diff --git a/feature/form/src/main/ets/default/view/FormManagerComponent.ets b/feature/form/src/main/ets/default/view/FormManagerComponent.ets index 35d1e0f0..30cbfd5d 100644 --- a/feature/form/src/main/ets/default/view/FormManagerComponent.ets +++ b/feature/form/src/main/ets/default/view/FormManagerComponent.ets @@ -175,10 +175,10 @@ export default struct FormManagerComponent { } } .height('80%') - } + }.width('100%') }, (dimensionItem) => JSON.stringify(dimensionItem)) }, (formItem) => JSON.stringify(formItem)) - } + }.width('100%') .height('100%') .loop(false) .index(0) @@ -188,7 +188,7 @@ export default struct FormManagerComponent { .onChange((index: number) => { this.mSwiperIndex = index; }) - } + }.alignItems(HorizontalAlign.Center) .height('60%') Blank() Button({type: ButtonType.Capsule}) { diff --git a/product/pad/src/main/ets/common/PadLauncherLayoutStyleConfig.ts b/product/pad/src/main/ets/common/PadLauncherLayoutStyleConfig.ts index 44699e13..979548c8 100644 --- a/product/pad/src/main/ets/common/PadLauncherLayoutStyleConfig.ts +++ b/product/pad/src/main/ets/common/PadLauncherLayoutStyleConfig.ts @@ -107,6 +107,11 @@ export default class PadLauncherLayoutStyleConfig extends LauncherLayoutStyleCon */ mFolderOpenMargin: number = PadPresetStyleConstants.DEFAULT_OPEN_FOLDER_MARGIN_TOP; + /** + * margin top of open folder + */ + mFolderOpenTitle: number = PadPresetStyleConstants.DEFAULT_OPEN_FOLDER_TITLE_TOP; + /** * gutter of add app */ diff --git a/product/pad/src/main/ets/common/constants/PadPresentConstants.ts b/product/pad/src/main/ets/common/constants/PadPresentConstants.ts index 63f14b30..b80343f7 100644 --- a/product/pad/src/main/ets/common/constants/PadPresentConstants.ts +++ b/product/pad/src/main/ets/common/constants/PadPresentConstants.ts @@ -93,6 +93,11 @@ export default class PadPresetStyleConstants { */ static readonly DEFAULT_OPEN_FOLDER_MARGIN_TOP = 166; + /** + * margin top of open folder top + */ + static readonly DEFAULT_OPEN_FOLDER_TITLE_TOP = 40; + //----------- folder add list ------------------ /** * max height of container diff --git a/product/pad/src/main/ets/common/pics/ic_public_cancel.svg b/product/pad/src/main/ets/common/pics/ic_public_cancel.svg new file mode 100644 index 00000000..35e5bff5 --- /dev/null +++ b/product/pad/src/main/ets/common/pics/ic_public_cancel.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_cancel + + + + + + + + + + \ No newline at end of file diff --git a/product/phone/src/main/ets/common/PhoneLauncherLayoutStyleConfig.ts b/product/phone/src/main/ets/common/PhoneLauncherLayoutStyleConfig.ts index 8008c0c9..65f16e58 100644 --- a/product/phone/src/main/ets/common/PhoneLauncherLayoutStyleConfig.ts +++ b/product/phone/src/main/ets/common/PhoneLauncherLayoutStyleConfig.ts @@ -109,6 +109,11 @@ export default class PhoneLauncherLayoutStyleConfig extends LauncherLayoutStyleC */ mFolderOpenMargin: number = PhonePresetStyleConstants.DEFAULT_OPEN_FOLDER_MARGIN_TOP; + /** + * margin top of open folder + */ + mFolderOpenTitle: number = PhonePresetStyleConstants.DEFAULT_OPEN_FOLDER_TITLE_TOP; + /** * gutter of add app */ diff --git a/product/phone/src/main/ets/common/PhoneSmartDockStyleConfig.ts b/product/phone/src/main/ets/common/PhoneSmartDockStyleConfig.ts index c5cf2a93..53a3f8ab 100644 --- a/product/phone/src/main/ets/common/PhoneSmartDockStyleConfig.ts +++ b/product/phone/src/main/ets/common/PhoneSmartDockStyleConfig.ts @@ -24,7 +24,7 @@ export default class PhoneSmartDockStyleConfig extends SmartDockStyleConfig { /** * dock list height */ - mDockHeight = 94; + mDockHeight = 78; /** * dock list backgroundcolor @@ -54,27 +54,27 @@ export default class PhoneSmartDockStyleConfig extends SmartDockStyleConfig { /** * list item width */ - mListItemWidth = 70; + mListItemWidth = 54; /** * list item height */ - mListItemHeight = 70; + mListItemHeight = 54; /** * list item gap */ - mListItemGap = 60; + mListItemGap = 33; /** * list icon size */ - mIconSize = 70; + mIconSize = 54; /** * max display item count in dock list */ - mMaxDockNum = 5; + mMaxDockNum = 4; protected constructor() { super(); diff --git a/product/phone/src/main/ets/common/constants/PhonePresetStyleConstants.ts b/product/phone/src/main/ets/common/constants/PhonePresetStyleConstants.ts index c80fad9f..9779b3cb 100644 --- a/product/phone/src/main/ets/common/constants/PhonePresetStyleConstants.ts +++ b/product/phone/src/main/ets/common/constants/PhonePresetStyleConstants.ts @@ -28,23 +28,23 @@ export default class PhonePresetStyleConstants { /** * desktop item size */ - static readonly DEFAULT_APP_LAYOUT_SIZE = 120; + static readonly DEFAULT_APP_LAYOUT_SIZE = 80; /** * desktop container margin */ - static readonly DEFAULT_LAYOUT_MARGIN = 19.5; + static readonly DEFAULT_LAYOUT_MARGIN = 12; /** * desktop container minimum gutter */ - static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 7; + static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 5; //----------- desktop icon------------- /** * desktop item padding top */ - static readonly DEFAULT_APP_TOP_RATIO = 0.01; + static readonly DEFAULT_APP_TOP_RATIO = 0.0375; /** * desktop item name lines @@ -54,17 +54,17 @@ export default class PhonePresetStyleConstants { /** * desktop item name size */ - static readonly DEFAULT_APP_NAME_TEXT_SIZE = 18; + static readonly DEFAULT_APP_NAME_TEXT_SIZE = 12; /** * desktop item icon and name gap */ - static readonly DEFAULT_ICON_NAME_GAP = 6; + static readonly DEFAULT_ICON_NAME_GAP = 4; /** * desktop icon name height */ - static readonly DEFAULT_DESKTOP_NAME_HEIGHT = 24; + static readonly DEFAULT_DESKTOP_NAME_HEIGHT = 16; //----------- desktop folder----------- /** @@ -91,7 +91,12 @@ export default class PhonePresetStyleConstants { /** * margin top of open folder */ - static readonly DEFAULT_OPEN_FOLDER_MARGIN_TOP = 214; + static readonly DEFAULT_OPEN_FOLDER_MARGIN_TOP = 100; + + /** + * margin top of open folder + */ + static readonly DEFAULT_OPEN_FOLDER_TITLE_TOP = 90; //----------- folder add list ------------------ /** @@ -112,22 +117,22 @@ export default class PhonePresetStyleConstants { /** * toggle of item */ - static readonly DEFAULT_APP_GRID_TOGGLE_SIZE = 24; + static readonly DEFAULT_APP_GRID_TOGGLE_SIZE = 20; /** * icon padding of item with item size */ - static readonly DEFAULT_FOLDER_ADD_ICON_TOP_RATIO = 0.075; + static readonly DEFAULT_FOLDER_ADD_ICON_TOP_RATIO = -0.03; /** * name size of container */ - static readonly DEFAULT_FOLDER_ADD_GRID_TEXT_SIZE = 18; + static readonly DEFAULT_FOLDER_ADD_GRID_TEXT_SIZE = 12; /** * title size of container */ - static readonly DEFAULT_FOLDER_ADD_TITLE_TEXT_SIZE = 30; + static readonly DEFAULT_FOLDER_ADD_TITLE_TEXT_SIZE = 20; /** * name lines of item @@ -137,7 +142,7 @@ export default class PhonePresetStyleConstants { /** * button size of container */ - static readonly DEFAULT_FOLDER_ADD_BUTTON_SIZE = 24; + static readonly DEFAULT_FOLDER_ADD_BUTTON_SIZE = 16; //----------- app center-------------- /** @@ -174,17 +179,17 @@ export default class PhonePresetStyleConstants { /** * icon size of dock */ - static readonly DEFAULT_DOCK_ICON_SIZE = 75; + static readonly DEFAULT_DOCK_ICON_SIZE = 54; /** * padding of dock */ - static readonly DEFAULT_DOCK_PADDING = 21; + static readonly DEFAULT_DOCK_PADDING = 12; /** * gap of dock container */ - static readonly DEFAULT_DOCK_ITEM_GAP = 55; + static readonly DEFAULT_DOCK_ITEM_GAP = 31.33; /** * gap with resident and recent @@ -194,17 +199,17 @@ export default class PhonePresetStyleConstants { /** * save margin of dock */ - static readonly DEFAULT_DOCK_SAVE_MARGIN = 16; + static readonly DEFAULT_DOCK_SAVE_MARGIN = 10; /** * margin bottom of dock */ - static readonly DEFAULT_DOCK_MARGIN_BOTTOM = 72; + static readonly DEFAULT_DOCK_MARGIN_BOTTOM = 9; /** * margin bottom of dock(Immersive navigation bar) */ - static readonly DEFAULT_DOCK_MARGIN_BOTTOM_HIDE_BAR = 20; + static readonly DEFAULT_DOCK_MARGIN_BOTTOM_HIDE_BAR = 18; /** * open folder grid height diff --git a/product/phone/src/main/ets/common/pics/ic_public_cancel.svg b/product/phone/src/main/ets/common/pics/ic_public_cancel.svg new file mode 100644 index 00000000..35e5bff5 --- /dev/null +++ b/product/phone/src/main/ets/common/pics/ic_public_cancel.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_cancel + + + + + + + + + + \ No newline at end of file