• 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  callback(data) {
183    this.settingValue = data;
184  }
185
186  build() {
187    Flex({
188      direction: FlexDirection.Row,
189      alignItems: ItemAlign.Center,
190      justifyContent: FlexAlign.SpaceBetween
191    }) {
192      Column() {
193        Text(this.settingName)
194          .lineHeight(SettingsStyleConstants.DEFAULT_VP_22)
195          .height(SettingsStyleConstants.DEFAULT_VP_22)
196          .width(SettingsStyleConstants.DEFAULT_VP_230)
197          .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
198          .align(Alignment.Start)
199      }
200
201      if (this.settingType == 1) {
202        Column() {
203          Row() {
204            Text(this.settingValue)
205              .lineHeight(SettingsStyleConstants.DEFAULT_VP_48)
206              .height(SettingsStyleConstants.DEFAULT_VP_48)
207              .width(SettingsStyleConstants.DEFAULT_VP_60)
208              .fontSize(SettingsStyleConstants.DEFAULT_VP_16)
209              .align(Alignment.End)
210            Image($r('app.media.ic_settings_arrow'))
211              .margin({ top: SettingsStyleConstants.DEFAULT_VP_16 })
212              .height(SettingsStyleConstants.DEFAULT_VP_16)
213              .width(SettingsStyleConstants.DEFAULT_VP_20)
214              .align(Alignment.End)
215          }
216        }
217        .onClick(() => {
218          AppStorage.SetOrCreate('ida', this.ida);
219          AppStorage.SetOrCreate('valueList', this.valueList);
220          AppStorage.SetOrCreate('settingValue', this.settingValue);
221          this.dialogController.open();
222        })
223      } else {
224        Toggle({ type: ToggleType.Switch, isOn: this.navigationBarStatusValue })
225          .width(50)
226          .height(40)
227          .onChange((isOn: boolean) => {
228            Log.showDebug(TAG, `SettingItemToggle onChange for GestureNavigation Enable: ${isOn}`);
229            mSettingsPresenter.sendLocalEvent(isOn ? '0' : '1');
230          })
231      }
232    }
233    .width(SettingsStyleConstants.PERCENTAGE_100)
234    .height(SettingsStyleConstants.PERCENTAGE_100)
235    .padding({ left: 12, right: 12 })
236    .borderRadius(SettingsStyleConstants.DEFAULT_VP_16)
237    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
238  }
239}
240
241@CustomDialog
242@Component
243struct SettingsDialog {
244  controller: CustomDialogController;
245  action: () => void;
246  cancel: () => void;
247  @StorageLink('valueList') valueList: SettingItemInfo[] = [];
248  @StorageLink('ida') ida: number = 0;
249  @StorageLink('settingValue') settingValue: String = '';
250
251  build() {
252    Column() {
253      ForEach(this.valueList, (item: any) => {
254        Row() {
255          Text(item.name)
256            .margin({ left: SettingsStyleConstants.DEFAULT_VP_10 })
257            .align(Alignment.Start)
258            .width(SettingsStyleConstants.PERCENTAGE_85)
259            .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
260            .fontColor(SettingsStyleConstants.DEFAULT_DIALOG_FONT_COLOR)
261          Radio({ value: item.value, group: ('' + this.ida) })
262            .enabled(false)
263            .checked(item.name === this.settingValue)
264            .width(SettingsStyleConstants.DEFAULT_VP_30)
265            .height(SettingsStyleConstants.DEFAULT_VP_30)
266            .onChange((isChecked) => {})
267        }.width(SettingsStyleConstants.PERCENTAGE_100)
268        .height(SettingsStyleConstants.DEFAULT_VP_80)
269        .onClick(() => {
270          mSettingsPresenter.changeSettingValue(this.ida, item.name);
271          mSettingsPresenter.setSettingsValue(this.ida, item.value);
272          this.controller.close();
273          this.action();
274        })
275      }, (item: any) => JSON.stringify(item))
276      Text($r('app.string.cancel'))
277        .textAlign(TextAlign.Center)
278        .height(SettingsStyleConstants.DEFAULT_VP_80)
279        .width(SettingsStyleConstants.PERCENTAGE_100)
280        .fontSize(SettingsStyleConstants.DEFAULT_VP_30)
281        .fontColor(Color.Blue)
282        .onClick(() => {
283          this.controller.close();
284          this.action();
285        })
286    }.padding(SettingsStyleConstants.DEFAULT_VP_20)
287    .backgroundColor(SettingsStyleConstants.DEFAULT_SETTING_PAGE_COLOR)
288    .borderRadius(SettingsStyleConstants.DEFAULT_VP_30)
289  }
290}
291