|
|
@@ -10,16 +10,17 @@ import { fileIo, fileUri } from '@kit.CoreFileKit'
|
|
|
import { BusinessError, emitter } from '@kit.BasicServicesKit'
|
|
|
import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
|
|
|
import { resourceManager } from '@kit.LocalizationKit'
|
|
|
-import {
|
|
|
- IBestButton,
|
|
|
- IBestColorPicker,
|
|
|
- IBestField,
|
|
|
- IBestIcon,
|
|
|
- IBestPopup,
|
|
|
- IBestRadio,
|
|
|
- IBestRadioGroup
|
|
|
-} from '@ibestservices/ibest-ui'
|
|
|
+// import {
|
|
|
+// IBestButton,
|
|
|
+// IBestColorPicker,
|
|
|
+// IBestField,
|
|
|
+// IBestIcon,
|
|
|
+// IBestPopup,
|
|
|
+// IBestRadio,
|
|
|
+// IBestRadioGroup
|
|
|
+// } from '@ibestservices/ibest-ui'
|
|
|
import { Utility } from '../common/util/Utility'
|
|
|
+import { HSBColorPicker } from '@keke/color-picker'
|
|
|
|
|
|
@Preview
|
|
|
@Entry
|
|
|
@@ -243,31 +244,36 @@ export struct SettingPage {
|
|
|
@Builder
|
|
|
pickerBuilder() {
|
|
|
Column({ space: 20 }) {
|
|
|
- IBestColorPicker({
|
|
|
- value: this.customColor
|
|
|
+ HSBColorPicker({
|
|
|
+ color: this.customColor,
|
|
|
+ radius: 8,
|
|
|
+ onChange:(value: string) =>{
|
|
|
+ this.customColor = value
|
|
|
+
|
|
|
+ }
|
|
|
})
|
|
|
+ .layoutWeight(1)
|
|
|
+ .padding(25)
|
|
|
Row({ space: 20 }) {
|
|
|
- IBestButton({
|
|
|
- text: "取消",
|
|
|
- btnBorderRadius:10,
|
|
|
- onBtnClick: () => {
|
|
|
+ Button('取消')
|
|
|
+ .stateEffect(true)
|
|
|
+ .onClick(() => {
|
|
|
this.showColorPicker = false
|
|
|
- }
|
|
|
- })
|
|
|
- IBestButton({
|
|
|
- type: "primary",
|
|
|
- text: "确定",
|
|
|
- btnBorderRadius:10,
|
|
|
- onBtnClick: () => {
|
|
|
+ })
|
|
|
+ Button('确定')
|
|
|
+ .stateEffect(true)
|
|
|
+ .onClick(() => {
|
|
|
this.themeColor = this.customColor
|
|
|
PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, this.customColor)
|
|
|
AppStorage.setOrCreate('themeColor', this.customColor)
|
|
|
this.sendChangeEvent()
|
|
|
this.showColorPicker = false
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
}
|
|
|
- }.padding(20)
|
|
|
+ }
|
|
|
+ .padding(20)
|
|
|
+ .width('80%')
|
|
|
+ .height(300)
|
|
|
}
|
|
|
|
|
|
@Builder
|
|
|
@@ -277,30 +283,34 @@ export struct SettingPage {
|
|
|
Column() {
|
|
|
Row() {
|
|
|
Row(){
|
|
|
- IBestIcon({ name: 'brush-o', color: this.themeColor , iconSize: 20 })
|
|
|
- .margin({ right: 8 })
|
|
|
+ Image($r('app.media.theme'))
|
|
|
+ .width(20)
|
|
|
+ .height(20)
|
|
|
+ .fillColor(this.themeColor)
|
|
|
Text('颜色模式')
|
|
|
.fontSize(15)
|
|
|
+ .margin({left:8})
|
|
|
.fontWeight(500)
|
|
|
}
|
|
|
.layoutWeight(1)
|
|
|
Blank()
|
|
|
Row(){
|
|
|
- IBestRadioGroup({ group: this.colorGroup, active: $themeMode, placeDirection: Axis.Horizontal }) {
|
|
|
ForEach(['自动', '日间', '夜间'], (item: string, idx: number) => {
|
|
|
Column() {
|
|
|
- IBestRadio({
|
|
|
+ Radio({
|
|
|
+ value: idx+"",
|
|
|
group: this.colorGroup,
|
|
|
- checkedColor: this.themeColor,
|
|
|
- label: '',
|
|
|
- name: idx
|
|
|
})
|
|
|
+ .radioStyle({
|
|
|
+ checkedBackgroundColor: this.themeColor
|
|
|
+ })
|
|
|
.margin({ left: 3 })
|
|
|
Text(item)
|
|
|
.fontSize(15)
|
|
|
.fontColor($r('app.color.text_color'))
|
|
|
.margin({ top: 6 })
|
|
|
}
|
|
|
+ .margin({left:12})
|
|
|
.onClick(() => {
|
|
|
this.themeMode = idx
|
|
|
this.applyThemeMode(idx)
|
|
|
@@ -308,7 +318,6 @@ export struct SettingPage {
|
|
|
})
|
|
|
.alignItems(HorizontalAlign.Center)
|
|
|
})
|
|
|
- }
|
|
|
}
|
|
|
.margin({left:12,right:12})
|
|
|
}
|
|
|
@@ -415,14 +424,20 @@ export struct SettingPage {
|
|
|
bottom: 18
|
|
|
})
|
|
|
.padding({ top: 18, bottom: 18, left: 0, right: 0 })
|
|
|
-
|
|
|
- // 主题色自定义弹窗
|
|
|
- IBestPopup({
|
|
|
- visible: $showColorPicker,
|
|
|
- popupWidth: 320,
|
|
|
- contentBuilder: (): void => this.pickerBuilder(),
|
|
|
- cornerRadius:20,
|
|
|
+ .bindPopup(this.showColorPicker, {
|
|
|
+ builder: this.pickerBuilder(),
|
|
|
+ placement: Placement.Top,
|
|
|
+ mask: {color:'#33000000'},
|
|
|
+ enableArrow: false,//是否显示箭头
|
|
|
+ showInSubWindow: false,
|
|
|
+ onStateChange: (e) => {
|
|
|
+ if (!e.isVisible) {
|
|
|
+ this.showColorPicker = false
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
+ // 主题色自定义弹窗
|
|
|
+
|
|
|
}
|
|
|
.padding({ top: 8, bottom: 8, left: 18, right: 18 })
|
|
|
.width('100%')
|
|
|
@@ -449,8 +464,8 @@ export struct SettingPage {
|
|
|
// 左侧返回按钮
|
|
|
Row() {
|
|
|
Image($r('app.media.left_back_white'))
|
|
|
- .width(32)
|
|
|
- .height(32)
|
|
|
+ .width(29)
|
|
|
+ .height(29)
|
|
|
.margin({ left: 12, right: 8 })
|
|
|
.onClick(() => {
|
|
|
router.back();
|
