• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { Log } from '@ohos/common';
17import { Trace } from '@ohos/common';
18import { windowManager } from '@ohos/common';
19import { SettingItemInfo } from '@ohos/common';
20import SettingsStage from '../common/SettingsStage';
21import SettingsStyleConstants from '../common/constants/SettingsStyleConstants';
22import SettingsPresenter from '../common/presenter/SettingsPresenter';
23import SettingItemOption from '@ohos/common/src/main/ets/default/bean/SettingItemOption';
24
25let mSettingsPresenter: SettingsPresenter;
26const TAG = 'Settings';
27
28@Entry
29@Component
30struct Index {
31  private mSettingsStage: SettingsStage = new SettingsStage();
32  private mDevice = SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PHONE;
33  @State mSettingsPresenter: SettingsPresenter | null = null;
34
35  onPageShow(): void { }
36
37  aboutToAppear(): void  {
38    this.getDeviceType();
39    this.mSettingsStage.onCreate();
40    this.mSettingsPresenter = SettingsPresenter.getInstance();
41  }
42
43  aboutToDisappear(): void  {
44    this.mSettingsStage.onDestroy();
45  }
46
47  async getDeviceType() {
48    try {
49      let sysWidth = px2vp(windowManager.getWindowWidth());
50      let sysHeight = px2vp(windowManager.getWindowHeight());
51      if (sysWidth > sysHeight) {
52        this.mDevice = SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PAD;
53      }
54    } catch (e) {
55      Log.showError(TAG, `getWindowWidth or getWindowHeight error: ${JSON.stringify(e)}`);
56    }
57  }
58
59  build() {
60    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
61      Column() {
62        Column() {
63          top_bar()
64        }
65        .alignItems(HorizontalAlign.Start)
66        .width(SettingsStyleConstants.PERCENTAGE_100)
67        .height(SettingsStyleConstants.DEFAULT_VP_56)
68
69        Column() {
70          Text($r('app.string.layout'))
71            .fontSize($r('app.float.layout_title_font_size'))
72            .fontColor(SettingsStyleConstants.DEFAULT_LAYOUT_FONT_COLOR)
73            .width(SettingsStyleConstants.PERCENTAGE_100)
74            .height(SettingsStyleConstants.PERCENTAGE_100)
75            .align(Alignment.BottomStart)
76        }
77        .padding({ left: 24, bottom: 10 })
78        .width(SettingsStyleConstants.PERCENTAGE_100)
79        .height(SettingsStyleConstants.DEFAULT_VP_48)
80
81        Column() {
82          SettingPage()
83        }
84        .alignItems(HorizontalAlign.Center)
85        .width(SettingsStyleConstants.PERCENTAGE_100)
86      }
87      .width(this.mDevice === SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PHONE ? SettingsStyleConstants.PERCENTAGE_100 : 976)
88      .height(SettingsStyleConstants.PERCENTAGE_100)
89
90      if (this.traceBuildEnd()) { }
91    }
92    .backgroundColor(SettingsStyleConstants.DEFAULT_BACKGROUND_COLOR)
93    .width(SettingsStyleConstants.PERCENTAGE_100)
94    .height(SettingsStyleConstants.PERCENTAGE_100)
95  }
96
97  private traceBuildEnd(): boolean {
98    Trace.end(Trace.CORE_METHOD_START_SETTINGS)
99    return true;
100  }
101}
102
103@Component
104struct top_bar {
105  build() {
106    Row({ space: 16 }) {
107      Image($r('app.media.ic_back'))
108        .margin({ left: 24 })
109        .objectFit(ImageFit.Contain)
110        .width(SettingsStyleConstants.DEFAULT_VP_24)
111        .height(SettingsStyleConstants.DEFAULT_VP_24)
112        .onClick(() => {
113          SettingsPresenter.getInstance().backToTheDesktop();
114        })
115
116      Text($r('app.string.into_settings'))
117        .fontSize(SettingsStyleConstants.DEFAULT_VP_20)
118        .fontWeight(FontWeight.Medium)
119        .height(SettingsStyleConstants.DEFAULT_VP_28)
120        .width(SettingsStyleConstants.DEFAULT_VP_296)
121    }
122    .width(SettingsStyleConstants.PERCENTAGE_100)
123    .height(SettingsStyleConstants.PERCENTAGE_100)
124  }
125}
126
127@Component
128struct SettingPage {
129  @State SettingList: SettingItemInfo[] = [];
130
131  aboutToAppear(): void  {
132    this.SettingList = SettingsPresenter.getInstance().getSettingList();
133    Log.showInfo(TAG, `aboutToAppear SettingList length: ${this.SettingList.length}`);
134  }
135
136  build() {
137    Column() {
138      ForEach(this.SettingList, (item: SettingItemInfo) => {
139        SettingItem({
140          ida: item.ida,
141          settingName: item.settingName,
142          settingValue: item.settingValue,
143          valueList: item.valueList,
144          settingType: item.settingType
145        })
146      }, (item: SettingItemInfo) => JSON.stringify(item))
147    }
148    .width(SettingsStyleConstants.PERCENTAGE_100)
149    .height(SettingsStyleConstants.DEFAULT_VP_56)
150    .align(Alignment.Center)
151    .padding({ left: 12, right: 12 })
152  }
153}
154
155@Component
156struct SettingItem {
157  @State ida: number = 0;
158  @State settingValue: string = ' ';
159  @State settingName: string = ' ';
160  @StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false;
161  private settingType?: number;
162  private valueList: SettingItemOption[] = [];
163  dialogController: CustomDialogController | null = new CustomDialogController({
164    builder: SettingsDialog(),
165    cancel: this.cancelDialog,
166    autoCancel: true
167  });
168  callback = (data: string) => {
169    this.settingValue = data;
170  }
171
172  cancelDialog() {
173    Log.showDebug(TAG, 'cancelDialog');
174  }
175
176  aboutToAppear(): void  {
177    SettingsPresenter.getInstance().initNavigationBarStatusValue();
178    if (this.settingType == 1) {
179      SettingsPresenter.getInstance().registerValueCallback(this.ida, this.callback);
180    }
181  }
182
183  aboutToDisappear(): void {
184    this.dialogController = null;
185  }
186
187  build() {
188    Flex({
189      direction: FlexDirection.Row,
190      alignItems: ItemAlign.Center,
191      justifyContent: FlexAlign.SpaceBetween
192    }) {
193      Column() {
194        Text(this.settingName)
195          .lineHeight(SettingsStyleConstants.DEFAULT_VP_22)
196          .height(SettingsStyleConstants.DEFAULT_VP_22)
197          .width(SettingsStyleConstants.DEFAULT_VP_230)
198          .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
199          .align(Alignment.Start)
200      }
201
202      if (this.settingType == 1) {
203        Column() {
204          Row() {
205            Text(this.settingValue)
206              .lineHeight(SettingsStyleConstants.DEFAULT_VP_48)
207              .height(SettingsStyleConstants.DEFAULT_VP_48)
208              .width(SettingsStyleConstants.DEFAULT_VP_60)
209              .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
210              .align(Alignment.End)
211            Image($r('app.media.ic_settings_arrow'))
212              .margin({ top: SettingsStyleConstants.DEFAULT_VP_16 })
213              .height(SettingsStyleConstants.DEFAULT_VP_16)
214              .width(SettingsStyleConstants.DEFAULT_VP_20)
215              .align(Alignment.End)
216          }
217        }
218        .onClick(() => {
219          AppStorage.setOrCreate('ida', this.ida);
220          AppStorage.setOrCreate('valueList', this.valueList);
221          AppStorage.setOrCreate('settingValue', this.settingValue);
222          if (this.dialogController) {
223            this.dialogController.open();
224          }
225        })
226      } else {
227        Toggle({ type: ToggleType.Switch, isOn: this.navigationBarStatusValue })
228          .width(50)
229          .height(40)
230          .onChange((isOn: boolean) => {
231            Log.showDebug(TAG, `SettingItemToggle onChange for GestureNavigation Enable: ${isOn}`);
232            SettingsPresenter.getInstance().sendLocalEvent(isOn ? '0' : '1');
233          })
234      }
235    }
236    .width(SettingsStyleConstants.PERCENTAGE_100)
237    .height(SettingsStyleConstants.PERCENTAGE_100)
238    .padding({ left: 12, right: 12 })
239    .borderRadius(SettingsStyleConstants.DEFAULT_VP_16)
240    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
241  }
242}
243
244@CustomDialog
245@Component
246struct SettingsDialog {
247  controller?: CustomDialogController;
248  action: () => void = () => {
249  };
250  cancel: () => void = () => {
251  };
252  @StorageLink('valueList') valueList: SettingItemOption[] = [];
253  @StorageLink('ida') ida: number = 0;
254  @StorageLink('settingValue') settingValue: String = '';
255
256  aboutToDisappear(): void {
257  }
258
259  build() {
260    Column() {
261      ForEach(this.valueList, (item: SettingItemOption) => {
262        Row() {
263          Text(item.name)
264            .margin({ left: SettingsStyleConstants.DEFAULT_VP_10 })
265            .align(Alignment.Start)
266            .width(SettingsStyleConstants.PERCENTAGE_85)
267            .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
268            .fontColor(SettingsStyleConstants.DEFAULT_DIALOG_FONT_COLOR)
269          Radio({ value: item.value, group: ('' + this.ida) })
270            .enabled(false)
271            .checked(item.name === this.settingValue)
272            .width(SettingsStyleConstants.DEFAULT_VP_30)
273            .height(SettingsStyleConstants.DEFAULT_VP_30)
274            .onChange((isChecked: boolean) => {})
275        }.width(SettingsStyleConstants.PERCENTAGE_100)
276        .height(SettingsStyleConstants.DEFAULT_VP_80)
277        .onClick(() => {
278          SettingsPresenter.getInstance().changeSettingValue(this.ida, item.name);
279          SettingsPresenter.getInstance().setSettingsValue(this.ida, item.value);
280          if (this.controller) {
281            this.controller.close();
282          }
283          this.action();
284        })
285      }, (item: SettingItemOption) => JSON.stringify(item))
286      Text($r('app.string.cancel'))
287        .textAlign(TextAlign.Center)
288        .height(SettingsStyleConstants.DEFAULT_VP_80)
289        .width(SettingsStyleConstants.PERCENTAGE_100)
290        .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
291        .fontColor(Color.Blue)
292        .onClick(() => {
293          if (this.controller) {
294            this.controller.close();
295          }
296          this.action();
297        })
298    }.padding(SettingsStyleConstants.DEFAULT_VP_20)
299    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
300    .borderRadius(SettingsStyleConstants.DEFAULT_VP_30)
301  }
302}
303