openharmony/applications_notes
1
0
Fork 0
mirror of https://github.com/openharmony/applications_notes.git synced 2026-07-21 00:26:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

侧边栏特效和恢复默认文字大小

Browse Source 
Signed-off-by: @two-thousand-or-three-thousand <lisiquan1@huawei.com>
This commit is contained in:
@two-thousand-or-three-thousand
2022-12-20 15:44:11 +08:00
parent aa90b93c1e
commit cdcaf0c47a
8 changed files with 55 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/resources/src/main/resources/rawfile/editor_style.css
-1
View File
@@ -37,7 +37,6 @@ body {
background-size: cover;
color: #182431;
opacity: 0.9;
font-size: 24px;
overflow: scroll;
user-select: none;
}
common/resources/src/main/resources/rawfile/rich_editor.js
-3
View File
@@ -448,7 +448,6 @@ document.getElementById('openAlbum').addEventListener('click', () => {
})
function changeSizeToRk() {
document.getElementById('editorjs').style.fontSize = '24px';
document.getElementById('img1').style.width = '40px';
document.getElementById('img1').style.height = '40px';
document.getElementById('img2').style.width = '40px';
@@ -461,7 +460,6 @@ function changeSizeToRk() {
}
function changeSizeToPhone() {
document.getElementById('editorjs').style.fontSize = '16px';
document.getElementById('img1').style.width = '24px';
document.getElementById('img1').style.height = '24px';
document.getElementById('img2').style.width = '24px';
@@ -474,7 +472,6 @@ function changeSizeToPhone() {
}
function changeSizeToTablet() {
document.getElementById('editorjs').style.fontSize = '16px';
document.getElementById('img1').style.width = '28px';
document.getElementById('img1').style.height = '28px';
document.getElementById('img2').style.width = '28px';
features/src/main/ets/components/FolderListComp.ets
+10 -15
View File
@@ -40,6 +40,7 @@ export struct FolderListComp {
@StorageLink('breakPoint') breakPoints: string = 'lg'
controllerShow: WebController
TAG = "FolderListComp"
@Consume('AsideWidth') asideWidth: number
build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {
@@ -51,8 +52,11 @@ export struct FolderListComp {
.responseRegion({ x: -15.0, y: -15.0, width: 54, height: 54 })
.onClick(() => {
if (this.breakPoints == 'sm' || this.breakPoints == 'md') {
this.expandStatus = !this.expandStatus
animateTo({ duration: 200 }, () => {
this.expandStatus = !this.expandStatus
})
} else {
this.asideWidth = 0
this.sectionStatus = (this.sectionStatus == 3 ? 2 : 3)
// save continue data
AppStorage.SetOrCreate<number>('ContinueSection', this.sectionStatus)
@@ -76,7 +80,9 @@ export struct FolderListComp {
}
}
}, folderItem => folderItem.name.toString())
}.width('100%').height(500)
}
.width('100%')
.height(500)
.margin({ bottom: 120 })
.padding({ left: 12, right: 12 })
.flexGrow(1)
@@ -99,6 +105,8 @@ export struct FolderListComp {
.padding({ left: 12, right: 12, bottom: 24 })
}
.height("100%")
.backgroundColor($r('app.color.folder_color_d6d6d6'))
.backgroundBlurStyle(BlurStyle.Thick)
}
aboutToAppear(): void {
@@ -504,17 +512,4 @@ struct FolderItemComp {
)
)
}
}
@Component
export struct FolderListBackGround {
build() {
Column() {
}
.width("100%")
.height("100%")
.backgroundColor($r('app.color.folder_color_d6d6d6'))
.backgroundBlurStyle(BlurStyle.Thick)
}
}
features/src/main/ets/components/NoteContentComp.ets
+5
View File
@@ -62,6 +62,7 @@ export struct NoteContentComp {
@StorageLink('ScrollTopPercent') scrollTopPercent: number = 0.0
@StorageLink('isUpdate') isUpdate: boolean = false
@StorageLink('refreshCurrentNote') @Watch('isDataChange') refreshCurrentNote: boolean = false
@Consume('AsideWidth') asideWidth: number
isDataChange() {
if (!this.refreshCurrentNote) {
@@ -278,6 +279,7 @@ export struct NoteContentComp {
LogUtil.info(TAG, "isContinue : " + isContinue)
// 点击第三屏进入全屏编辑模式
if (this.sectionStatus != 1 || isContinue) {
this.asideWidth = 0
this.lastSectionStatus = this.sectionStatus
this.sectionStatus = 1
this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(true)" })
@@ -475,6 +477,7 @@ export struct ToolBarComp {
autoCancel: false,
customStyle: true,
})
@Consume('AsideWidth') asideWidth: number
onDeleteConfirm() {
if (this.selectedFolderData.uuid != SysDefFolderUuid.RecentDeletes) {
@@ -523,9 +526,11 @@ export struct ToolBarComp {
if (this.sectionStatus != 1) {
this.lastSectionStatus = this.sectionStatus
this.sectionStatus = 1
this.asideWidth = 0
this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(true)" })
} else {
if (this.lastSectionStatus != undefined) {
this.asideWidth = 200
// 切换为小屏预览模式
this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(false)" })
this.sectionStatus = this.lastSectionStatus
features/src/main/ets/components/NoteListComp.ets
+6 -2
View File
@@ -57,10 +57,10 @@ export struct NoteListComp {
@Consume('SelectedFolderData') selectedFolderData: FolderData
@Consume('Search') search: boolean
controllerShow: WebController
@Consume('AsideWidth') asideWidth: number
build() {
Flex({ direction: FlexDirection.Column }) {
Flex({ direction: FlexDirection.Column }) {
NoteOverViewComp({ controllerShow: this.controllerShow })
Column() {
@@ -106,6 +106,7 @@ struct NoteOverViewComp {
controllerShow: WebController
@State noteNumber: any = undefined
@StorageLink('isUpdate') isUpdate: boolean = false
@Consume('AsideWidth') asideWidth: number
build() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
@@ -124,8 +125,11 @@ struct NoteOverViewComp {
.visibility(this.breakPoints == 'lg' && this.sectionStatus == 3 ? Visibility.None : Visibility.Visible)
.onClick(() => {
if (this.breakPoints == 'sm' || this.breakPoints == 'md') {
this.expandStatus = !this.expandStatus
animateTo({ duration: 200 }, () => {
this.expandStatus = !this.expandStatus
})
} else {
this.asideWidth = 200
this.sectionStatus = (this.sectionStatus == 3 ? 2 : 3)
// save continue data
AppStorage.SetOrCreate<number>('ContinueSection', this.sectionStatus)
product/default/src/main/ets/pages/NoteHome.ets
+16 -8
View File
@@ -13,7 +13,7 @@
* limitations under the License.
*/
import { FolderListComp, FolderListBackGround } from '@ohos/component/src/main/ets/components/FolderListComp'
import { FolderListComp } from '@ohos/component/src/main/ets/components/FolderListComp'
import { NoteListComp } from '@ohos/component/src/main/ets/components/NoteListComp'
import { NoteContentComp } from '@ohos/component/src/main/ets/components/NoteContentComp'
import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants'
@@ -47,6 +47,7 @@ export struct NoteHomeComp {
@StorageLink('breakPoint') breakPoints: string = 'lg'
controllerShow: WebController
TAG = "NoteHomeComp_Tablet"
@Provide('AsideWidth') asideWidth: number = 200
build() {
Flex({ justifyContent: FlexAlign.Start }) {
@@ -57,11 +58,9 @@ export struct NoteHomeComp {
}
.flexShrink(0)
.backgroundColor($r("app.color.folderlist_bgcolor_f1f3f5"))
.width(200)
.width(this.asideWidth)
.height(StyleConstants.PERCENTAGE_100)
.visibility(
LayoutUtil.getWidthWeightMessage(this.sectionStatus)
.folderListVisibility == 0 ? Visibility.None : Visibility.Visible)
.animation({ duration: 200 })
.enabled(this.search ? false : true)
// Note list display area
@@ -133,14 +132,23 @@ export struct NoteHomeComp {
.enabled(this.longpress || this.search && this.inputKeyword.length == 0 ? false : true)
}
// 蒙层
if (this.expandStatus) {
Column()
.width('100%')
.height('100%')
.position({ x: 0, y: 0 })
.backgroundColor(Color.Black)
.opacity(0.2)
.transition({ opacity: 0 })
}
//Folder list display area
Stack() {
FolderListBackGround()
Column() {
FolderListComp()
}
.width(200)
.height(StyleConstants.PERCENTAGE_100)
.visibility(this.expandStatus == false ? Visibility.None : Visibility.Visible)
.translate({ x: this.expandStatus ? 0 : '-200', y: 0 })
}
.width(StyleConstants.PERCENTAGE_100).height(StyleConstants.PERCENTAGE_100)
}
product/default/src/main/ets/pages/NoteHomePortrait.ets
+15 -5
View File
@@ -13,7 +13,7 @@
* limitations under the License.
*/
import { FolderListComp, FolderListBackGround } from '@ohos/component/src/main/ets/components/FolderListComp'
import { FolderListComp } from '@ohos/component/src/main/ets/components/FolderListComp'
import { NoteListComp } from '@ohos/component/src/main/ets/components/NoteListComp'
import { NoteContentCompPortrait } from '@ohos/component/src/main/ets/components/NoteContentCompPortrait'
import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants'
@@ -46,10 +46,10 @@ export struct NoteHomePortraitComp {
@Provide('SelectedAll') selectedAll: boolean = false;
@Provide('EditModel') editModel: boolean = false
TAG = "NoteHomePortraitComp_Phone"
@Provide('AsideWidth') asideWidth: number = 200
build() {
Stack({ alignContent: Alignment.Start }) {
// Note list display area
Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
NoteListComp()
@@ -59,14 +59,24 @@ export struct NoteHomePortraitComp {
.enabled(this.expandStatus ? false : true)
.backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
// 蒙层
if (this.expandStatus) {
Column()
.width('100%')
.height('100%')
.position({ x: 0, y: 0 })
.backgroundColor(Color.Black)
.opacity(0.2)
.transition({ opacity: 0 })
}
//Folder list display area
Stack() {
FolderListBackGround()
Column() {
FolderListComp()
}
.width(200)
.height(StyleConstants.PERCENTAGE_100)
.visibility(this.expandStatus == false ? Visibility.None : Visibility.Visible)
.position({ x: 0, y: 0 })
.translate({ x: this.expandStatus ? 0 : '-200', y: 0 })
}
.width(StyleConstants.PERCENTAGE_100).height(StyleConstants.PERCENTAGE_100)
}
product/default/src/main/module.json5
+3
View File
@@ -45,6 +45,9 @@
"name": "ohos.permission.DISTRIBUTED_DATASYNC",
"reason": "$string:distributed_dataSync_permission"
},
{
"name": "ohos.permission.START_ABILITIES_FROM_BACKGROUND"
}
],
"deliveryWithInstall": true,
"installationFree": false,