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