• 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 UpTitle from './UpTitle';
17import MyBrightness from '../../../../../../../brightnesscomponent/src/main/ets/default/pages/brightnessComponent';
18import Log from '../../../../../../../../common/src/main/ets/default/Log';
19import Constants, { ControlCenterConfig } from '../common/Constants';
20import StyleConfiguration, { ControlCenterComponentStyle, ControlCenterComplexToggleLayoutStyle,
21  ControlCenterSimpleToggleLayoutStyle } from '../common/StyleConfiguration';
22import ViewModel from '../viewmodel/ControlCenterVM';
23import ComplexToggleLoadComponent from './ComplexToggleLoadComponent';
24import SimpleToggleLoadComponent from './SimpleToggleLoadComponent';
25import SimpleToggleLayoutEditComponent from './SimpleToggleLayoutEditComponent';
26
27const TAG = 'Control-ControlCenter';
28const TAG_ControlCenterComplexToggleLayout = 'Control-ControlCenterComplexToggleLayout';
29const TAG_ControlCenterSimpleToggleLayout = 'Control-ControlCenterSimpleToggleLayout';
30
31interface IDirection {
32  direction: string
33}
34
35@Component
36export default struct ControlCenterComponent {
37  private touchMoveCallback: Function = () => {};
38  private modeChangeCallback: Function = () => {};
39  @State mSimpleToggleColumnCount: number = Constants.DEFAULT_SIMPLE_TOGGLE_COLUMN_COUNT;
40  private mControlCenterComponentConfig: ControlCenterConfig | undefined = undefined;
41  @State mIsEditSimpleToggleLayout: boolean = false;
42  @State style: ControlCenterComponentStyle = StyleConfiguration.getControlCenterComponentStyle();
43  private mWidthPx: number = 0;
44  private mDisplayingSimpleToggles: string[] = [];
45  private mHidingSimpleToggles: string[] = [];
46  private mDefaultDisplaySimpleToggles: string[] = [];
47  private titleDisplayInside: boolean = false;
48  private moduleName: string = ''
49
50  aboutToAppear() {
51    Log.showInfo(TAG, `aboutToAppear, mControlCenterComponentConfig: ${JSON.stringify(this.mControlCenterComponentConfig)}`);
52    ViewModel.initViewModel(this.mControlCenterComponentConfig, this.moduleName)
53  }
54
55  aboutToDisappear() {
56    Log.showInfo(TAG, 'aboutToDisappear');
57  }
58
59  onSimpleToggleLayoutEditStart() {
60    Log.showDebug(TAG, 'onSimpleToggleLayoutEditStart');
61    this.mDisplayingSimpleToggles = ViewModel.getDisplayingSimpleToggles();
62    this.mHidingSimpleToggles = ViewModel.getHidingSimpleToggles();
63    this.mDefaultDisplaySimpleToggles = ViewModel.getDefaultSimpleToggleLayout();
64    this.setIsEditSimpleToggleLayout(true);
65  }
66
67  onSimpleToggleLayoutEditEnd() {
68    Log.showDebug(TAG, 'onSimpleToggleLayoutEditEnd');
69    this.setIsEditSimpleToggleLayout(false);
70  }
71
72  setIsEditSimpleToggleLayout(isEdit: boolean): void {
73    Log.showDebug(TAG, `setIsEditSimpleToggleLayout, isEdit: ${isEdit}`);
74    animateTo({
75      duration: 300,
76      tempo: 1.0,
77      curve: Curve.Friction,
78      delay: 0,
79      iterations: 1,
80      playMode: PlayMode.Normal,
81      onFinish: () => {
82        Log.showInfo(TAG, `setIsEditSimpleToggleLayout, show anim finish.`)
83      }
84    }, () => {
85      Log.showInfo(TAG, `setIsEditSimpleToggleLayout, animateTo`);
86      this.mIsEditSimpleToggleLayout = isEdit;
87    });
88    Log.showDebug(TAG, `this.modeChangeCallback: ${this.modeChangeCallback}`);
89    if (this.modeChangeCallback) {
90      this.modeChangeCallback(isEdit);
91    }
92  }
93
94  onSaveDisplayingToggles(toggles: string[]): void {
95    Log.showDebug(TAG, `onSaveDisplayingToggles, toggles: ${JSON.stringify(toggles)}`);
96    ViewModel.saveSimpleToggleLayout(toggles);
97  }
98
99  build() {
100    Column() {
101      if (!this.mIsEditSimpleToggleLayout) {
102        Column() {
103          Column() {
104            UpTitle({
105              touchMoveCallback: (data: IDirection) => {
106                if (this.touchMoveCallback) {
107                  this.touchMoveCallback(data)
108                }
109              },
110              simpleToggleLayoutEditStartCallback: ():void => this.onSimpleToggleLayoutEditStart()
111            })
112          }
113          .width('100%')
114          .height(this.style.upTitleHeight)
115          .margin({top:5})
116
117          Row() {
118            Column() {
119              ControlCenterComplexToggleLayout()
120
121              Column() {
122                ControlCenterSimpleToggleLayout({
123                  mColumnCount: this.mSimpleToggleColumnCount
124                })
125                Column().width('100%').height(this.style.simpleToggleLayoutMarginBottom)
126                MyBrightness()
127              }
128              .width('100%')
129              .margin({top: this.style.toggleAreaGap})
130              .padding({top: this.style.simpleToggleLayoutMarginTop, bottom: this.style.brightnessMarginBottom})
131              .borderRadius(this.style.componentBorderRadius)
132              .clip(true)
133              .backgroundColor(this.style.componentBackgroundColor)
134            }
135            .padding({left: this.style.marginLeft, right: this.style.marginRight})
136          }
137          .width('100%')
138        }
139        .width('100%')
140        .transition({ type: TransitionType.Insert, opacity: 0, translate: { x: (-this.mWidthPx * 0.8) + 'px' } })
141        .transition({ type: TransitionType.Delete, opacity: 0 })
142      } else {
143        Column() {
144          SimpleToggleLayoutEditComponent({
145            mDisplayingToggles: this.mDisplayingSimpleToggles,
146            mHidingToggles: this.mHidingSimpleToggles,
147            mDefaultDisplayToggles: this.mDefaultDisplaySimpleToggles,
148            simpleToggleLayoutEditEndCallback: (): void => this.onSimpleToggleLayoutEditEnd(),
149            onSaveDisplayingToggles: (toggles: string[]) => this.onSaveDisplayingToggles(toggles),
150            mColumnCount: this.mSimpleToggleColumnCount,
151            titleDisplayInside: this.titleDisplayInside
152          })
153        }
154        .width('100%')
155        .transition({ type: TransitionType.Insert, opacity: 0, translate: { x: this.mWidthPx * 0.8 + 'px' } })
156        .transition({ type: TransitionType.Delete, opacity: 0 })
157      }
158    }
159    .height('100%')
160    .width('100%')
161    .onAreaChange((e, e2) => {
162      Log.showInfo(TAG, `onAreaChange, e: ${JSON.stringify(e)} e2: ${JSON.stringify(e2)}`);
163      this.mWidthPx = vp2px(Number(e2.width))
164    })
165  }
166}
167
168@Component
169struct ControlCenterComplexToggleLayout {
170  @StorageLink('ControlCenterComplexToggleLayout') mComplexToggleLayout: string[] = [];
171  @State style: ControlCenterComplexToggleLayoutStyle = StyleConfiguration.getControlCenterComplexToggleLayoutStyle();
172
173  aboutToAppear() {
174    Log.showInfo(TAG_ControlCenterComplexToggleLayout, `aboutToAppear, mComplexToggleLayout: ${this.mComplexToggleLayout} `)
175  }
176
177  aboutToDisappear() {
178    Log.showInfo(TAG_ControlCenterComplexToggleLayout, `aboutToDisAppear`);
179  }
180
181  build() {
182    Grid() {
183      ForEach(this.mComplexToggleLayout, (componentName: string) => {
184        GridItem() {
185          ComplexToggleLoadComponent({
186            keyId: componentName
187          })
188        }
189        .width('100%')
190        .height('100%')
191      }, (componentName: string) => componentName)
192    }
193    .width('100%')
194    .height(this.calcGridHeight(
195      Math.ceil(this.mComplexToggleLayout.length / 2),
196      this.style.rowHeight as number,
197      this.style.rowGap as number))
198    .columnsTemplate('1fr 1fr')
199    .rowsTemplate(this.generateRowsTemplate(Math.ceil(this.mComplexToggleLayout.length / 2)))
200    .rowsGap(this.style.rowGap + 'px')
201    .columnsGap(this.style.columnGap)
202  }
203
204  calcGridHeight(rowCount: number, rowHeight: number, rowGap: number) {
205    Log.showDebug(TAG_ControlCenterComplexToggleLayout, `calcGridHeight, rowCount: ${rowCount} rowHeight: ${rowHeight} rowGap: ${rowGap}`);
206    let height = rowCount * rowHeight + (rowCount - 1) * rowGap;
207    if (height < 0) {
208      height = 0
209    };
210    Log.showDebug(TAG_ControlCenterComplexToggleLayout, `calcGridHeight, height: ${height}`);
211    return height + 'px';
212  }
213
214  generateRowsTemplate(rowCount: number) {
215    Log.showDebug(TAG_ControlCenterComplexToggleLayout, `generateRowsTemplate, rowCount: ${rowCount}`);
216    let rowsTemplate = '1fr';
217    for (let i = 1;i < rowCount; i++) {
218      rowsTemplate += ' 1fr'
219    };
220    return rowsTemplate;
221  }
222}
223
224@Component
225struct ControlCenterSimpleToggleLayout {
226  @Prop mColumnCount: number;
227  @StorageLink('ControlCenterSimpleToggleLayout') mSimpleToggleLayout: string[] = [];
228  @State style: ControlCenterSimpleToggleLayoutStyle = StyleConfiguration.getControlCenterSimpleToggleLayoutStyle();
229
230  aboutToAppear() {
231    Log.showInfo(TAG_ControlCenterSimpleToggleLayout, `aboutToAppear, mSimpleToggleLayout: ${this.mSimpleToggleLayout} `);
232  }
233
234  aboutToDisappear() {
235    Log.showInfo(TAG_ControlCenterSimpleToggleLayout, `aboutToDisAppear`);
236  }
237
238  build() {
239    Grid() {
240      ForEach(this.mSimpleToggleLayout, (componentName: string) => {
241        GridItem() {
242          SimpleToggleLoadComponent({
243            keyId: componentName
244          })
245        }.width('100%')
246        .height('100%')
247      }, (componentName: string) => componentName)
248    }
249    .width('100%')
250    .height(this.calcGridHeight(
251      Math.ceil(
252        this.mSimpleToggleLayout.length / this.mColumnCount),
253        this.style.rowHeight as number,
254        this.style.rowGap as number))
255    .margin({left: this.style.marginLeft, right: this.style.marginRight})
256    .columnsTemplate(this.generateColumnsTemplate(this.mColumnCount))
257    .rowsTemplate(this.generateRowsTemplate(Math.ceil(this.mSimpleToggleLayout.length / this.mColumnCount)))
258    .rowsGap(this.style.rowGap + 'px')
259    .columnsGap(this.style.columnGap)
260  }
261
262  calcGridHeight(rowCount: number, rowHeight: number, rowGap: number) {
263    Log.showDebug(TAG_ControlCenterSimpleToggleLayout, `calcGridHeight, rowCount: ${rowCount} rowHeight: ${rowHeight} rowGap: ${rowGap}`);
264    let height = rowCount * rowHeight + (rowCount - 1) * rowGap;
265    if (height < 0) {
266      height = 0;
267    }
268    Log.showDebug(TAG_ControlCenterSimpleToggleLayout, `calcGridHeight, height: ${height}`);
269    return height + 'px';
270  }
271
272  generateColumnsTemplate(columnCount: number) {
273    Log.showDebug(TAG_ControlCenterSimpleToggleLayout, `generateColumnsTemplate, columnCount: ${columnCount}`);
274    let columnsTemplate = '1fr';
275    for (let i = 1;i < columnCount; i++) {
276      columnsTemplate += ' 1fr';
277    }
278    return columnsTemplate;
279  }
280
281  generateRowsTemplate(rowCount: number) {
282    Log.showDebug(TAG_ControlCenterSimpleToggleLayout, `generateRowsTemplate, rowCount: ${rowCount}`);
283    let rowsTemplate = '1fr';
284    for (let i = 1;i < rowCount; i++) {
285      rowsTemplate += ' 1fr';
286    }
287    return rowsTemplate;
288  }
289}