• 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';
23
24let mSettingsPresenter: SettingsPresenter;
25const TAG = 'Settings';
26
27@Entry
28@Component
29struct Index {
30  private mSettingsStage = new SettingsStage();
31  private mDevice = SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PHONE;
32
33  onPageShow(): void { }
34
35  aboutToAppear(): void  {
36    this.getDeviceType();
37    this.mSettingsStage.onCreate();
38    mSettingsPresenter = SettingsPresenter.getInstance();
39  }
40
41  aboutToDisappear(): void  {
42    this.mSettingsStage.onDestroy();
43  }
44
45  async getDeviceType() {
46    try {
47      let sysWidth = await windowManager.getWindowWidth();
48      let sysHeigh = await windowManager.getWindowHeight();
49      if (sysWidth > sysHeigh) {
50        this.mDevice = SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PAD;
51      }
52    } catch (e) {
53      Log.showError(TAG, 'getWindowWidth or getWindowHeight error:' + e);
54    }
55  }
56
57  build() {
58    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
59      Column() {
60        Column() {
61          top_bar()
62        }
63        .alignItems(HorizontalAlign.Start)
64        .width(SettingsStyleConstants.PERCENTAGE_100)
65        .height(SettingsStyleConstants.DEFAULT_VP_56)
66
67        Column() {
68          Text($r('app.string.layout'))
69            .fontSize($r('app.float.layout_title_font_size'))
70            .fontColor(SettingsStyleConstants.DEFAULT_LAYOUT_FONT_COLOR)
71            .width(SettingsStyleConstants.PERCENTAGE_100)
72            .height(SettingsStyleConstants.PERCENTAGE_100)
73            .align(Alignment.BottomStart)
74        }
75        .padding({ left: 24, bottom: 10 })
76        .width(SettingsStyleConstants.PERCENTAGE_100)
77        .height(SettingsStyleConstants.DEFAULT_VP_48)
78
79        Column() {
80          SettingPage()
81        }
82        .alignItems(HorizontalAlign.Center)
83        .width(SettingsStyleConstants.PERCENTAGE_100)
84      }
85      .width(this.mDevice === SettingsStyleConstants.DEFAULT_DEVICE_TYPE_PHONE ? SettingsStyleConstants.PERCENTAGE_100 : 976)
86      .height(SettingsStyleConstants.PERCENTAGE_100)
87
88      if (this.traceBuildEnd()) { }
89    }
90    .backgroundColor(SettingsStyleConstants.DEFAULT_BACKGROUND_COLOR)
91    .width(SettingsStyleConstants.PERCENTAGE_100)
92    .height(SettingsStyleConstants.PERCENTAGE_100)
93  }
94
95  private traceBuildEnd(): boolean {
96    Trace.end(Trace.CORE_METHOD_START_SETTINGS)
97    return true;
98  }
99}
100
101@Component
102struct top_bar {
103  build() {
104    Row({ space: 16 }) {
105      Image($r('app.media.ic_back'))
106        .margin({ left: 24 })
107        .objectFit(ImageFit.Contain)
108        .width(SettingsStyleConstants.DEFAULT_VP_24)
109        .height(SettingsStyleConstants.DEFAULT_VP_24)
110        .onClick(() => {
111          mSettingsPresenter.backToTheDesktop();
112        })
113
114      Text($r('app.string.into_settings'))
115        .fontSize(SettingsStyleConstants.DEFAULT_VP_20)
116        .fontWeight(FontWeight.Medium)
117        .height(SettingsStyleConstants.DEFAULT_VP_28)
118        .width(SettingsStyleConstants.DEFAULT_VP_296)
119    }
120    .width(SettingsStyleConstants.PERCENTAGE_100)
121    .height(SettingsStyleConstants.PERCENTAGE_100)
122  }
123}
124
125@Component
126struct SettingPage {
127  @State SettingList: SettingItemInfo[] = [];
128
129  aboutToAppear(): void  {
130    this.SettingList = mSettingsPresenter.getSettingList();
131    Log.showInfo(TAG, `aboutToAppear SettingList length: ${this.SettingList.length}`);
132  }
133
134  onPageShow(): void {
135    this.SettingList = mSettingsPresenter.getSettingList();
136  }
137
138  build() {
139    Column() {
140      ForEach(this.SettingList, (item: any) => {
141        SettingItem({
142          ida: item.ida,
143          settingName: item.settingName,
144          settingValue: item.settingValue,
145          valueList: item.valueList,
146          settingType: item.settingType
147        })
148      }, (item: any) => JSON.stringify(item))
149    }
150    .width(SettingsStyleConstants.PERCENTAGE_100)
151    .height(SettingsStyleConstants.DEFAULT_VP_56)
152    .align(Alignment.Center)
153    .padding({ left: 12, right: 12 })
154  }
155}
156
157@Component
158struct SettingItem {
159  @State ida: number = 0;
160  @State settingValue: string = ' ';
161  @State settingName: string = ' ';
162  @StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false;
163  private settingType: number;
164  private valueList: SettingItemInfo[] = [];
165  dialogController: CustomDialogController = new CustomDialogController({
166    builder: SettingsDialog(),
167    cancel: this.cancelDialog,
168    autoCancel: true
169  });
170
171  cancelDialog() {
172    Log.showDebug(TAG, 'cancelDialog');
173  }
174
175  aboutToAppear(): void  {
176    mSettingsPresenter.initNavigationBarStatusValue();
177    if (this.settingType == 1) {
178      mSettingsPresenter.registerValueCallback(this.ida, this.callback.bind(this));
179    }
180  }
181
182  aboutToDisappear(): void {
183    delete this.dialogController;
184    this.dialogController = null;
185  }
186
187  callback(data) {
188    this.settingValue = data;
189  }
190
191  build() {
192    Flex({
193      direction: FlexDirection.Row,
194      alignItems: ItemAlign.Center,
195      justifyContent: FlexAlign.SpaceBetween
196    }) {
197      Column() {
198        Text(this.settingName)
199          .lineHeight(SettingsStyleConstants.DEFAULT_VP_22)
200          .height(SettingsStyleConstants.DEFAULT_VP_22)
201          .width(SettingsStyleConstants.DEFAULT_VP_230)
202          .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
203          .align(Alignment.Start)
204      }
205
206      if (this.settingType == 1) {
207        Column() {
208          Row() {
209            Text(this.settingValue)
210              .lineHeight(SettingsStyleConstants.DEFAULT_VP_48)
211              .height(SettingsStyleConstants.DEFAULT_VP_48)
212              .width(SettingsStyleConstants.DEFAULT_VP_60)
213              .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
214              .align(Alignment.End)
215            Image($r('app.media.ic_settings_arrow'))
216              .margin({ top: SettingsStyleConstants.DEFAULT_VP_16 })
217              .height(SettingsStyleConstants.DEFAULT_VP_16)
218              .width(SettingsStyleConstants.DEFAULT_VP_20)
219              .align(Alignment.End)
220          }
221        }
222        .onClick(() => {
223          AppStorage.SetOrCreate('ida', this.ida);
224          AppStorage.SetOrCreate('valueList', this.valueList);
225          AppStorage.SetOrCreate('settingValue', this.settingValue);
226          this.dialogController.open();
227        })
228      } else {
229        Toggle({ type: ToggleType.Switch, isOn: this.navigationBarStatusValue })
230          .width(50)
231          .height(40)
232          .onChange((isOn: boolean) => {
233            Log.showDebug(TAG, `SettingItemToggle onChange for GestureNavigation Enable: ${isOn}`);
234            mSettingsPresenter.sendLocalEvent(isOn ? '0' : '1');
235          })
236      }
237    }
238    .width(SettingsStyleConstants.PERCENTAGE_100)
239    .height(SettingsStyleConstants.PERCENTAGE_100)
240    .padding({ left: 12, right: 12 })
241    .borderRadius(SettingsStyleConstants.DEFAULT_VP_16)
242    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
243  }
244}
245
246@CustomDialog
247@Component
248struct SettingsDialog {
249  controller: CustomDialogController;
250  action: () => void;
251  cancel: () => void;
252  @StorageLink('valueList') valueList: SettingItemInfo[] = [];
253  @StorageLink('ida') ida: number = 0;
254  @StorageLink('settingValue') settingValue: String = '';
255
256  build() {
257    Column() {
258      ForEach(this.valueList, (item: any) => {
259        Row() {
260          Text(item.name)
261            .margin({ left: SettingsStyleConstants.DEFAULT_VP_10 })
262            .align(Alignment.Start)
263            .width(SettingsStyleConstants.PERCENTAGE_85)
264            .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
265            .fontColor(SettingsStyleConstants.DEFAULT_DIALOG_FONT_COLOR)
266          Radio({ value: item.value, group: ('' + this.ida) })
267            .enabled(false)
268            .checked(item.name === this.settingValue)
269            .width(SettingsStyleConstants.DEFAULT_VP_30)
270            .height(SettingsStyleConstants.DEFAULT_VP_30)
271            .onChange((isChecked) => {})
272        }.width(SettingsStyleConstants.PERCENTAGE_100)
273        .height(SettingsStyleConstants.DEFAULT_VP_80)
274        .onClick(() => {
275          mSettingsPresenter.changeSettingValue(this.ida, item.name);
276          mSettingsPresenter.setSettingsValue(this.ida, item.value);
277          this.controller.close();
278          this.action();
279        })
280      }, (item: any) => JSON.stringify(item))
281      Text($r('app.string.cancel'))
282        .textAlign(TextAlign.Center)
283        .height(SettingsStyleConstants.DEFAULT_VP_80)
284        .width(SettingsStyleConstants.PERCENTAGE_100)
285        .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
286        .fontColor(Color.Blue)
287        .onClick(() => {
288          this.controller.close();
289          this.action();
290        })
291    }.padding(SettingsStyleConstants.DEFAULT_VP_20)
292    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
293    .borderRadius(SettingsStyleConstants.DEFAULT_VP_30)
294  }
295}
296