• 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 '../../../../../../../../common/src/main/ets/default/Log';
17import Constants from '../common/Constants';
18import StyleConfiguration, { SimpleToggleLayoutEditComponentStyle, SimpleToggleLayoutEditUpTitleStyle,
19  SimpleToggleLayoutEditOptMsgStyle } from '../common/StyleConfiguration';
20import SimpleToggleLayoutEditGrid from './SimpleToggleLayoutEditGrid';
21import SimpleToggleLayoutEditDialogComponent from './SimpleToggleLayoutEditDialogComponent';
22
23const TAG = 'Control-SimpleToggleLayoutEditComponent';
24const TAG_SimpleToggleLayoutEditUpTitle = 'Control-SimpleToggleLayoutEditUpTitle';
25const TAG_SimpleToggleLayoutEditOptMsg = 'Control-SimpleToggleLayoutEditOptMsg';
26
27@Component
28export default struct SimpleToggleLayoutEditComponent {
29  private mDisplayingToggles: string[] = [];
30  private mHidingToggles: string[] = [];
31  private mDefaultDisplayToggles: string[] = [];
32  @Prop mColumnCount: number;
33  private simpleToggleLayoutEditEndCallback: () => void;
34  private onSaveDisplayingToggles: (toggles: string[]) => void;
35  @State mNewDisplayingToggles: string[] = [];
36  @State mNewHidingToggles: string[] = [];
37  @State style: SimpleToggleLayoutEditComponentStyle = StyleConfiguration.getSimpleToggleLayoutEditComponentStyle();
38  @State mOptMsg: Resource = $r('app.string.control_center_simple_toggle_layout_edit_opt_desc');
39  private mDisplayingTogglesMaxCount: number = Constants.SIMPLE_TOGGLE_LAYOUT_MAX_TOGGLE_COUNT;
40  private mDisplayingTogglesMinCount: number = Constants.SIMPLE_TOGGLE_LAYOUT_MIN_TOGGLE_COUNT;
41  private mHidingTogglesMaxCount: number = 0;
42  private mHidingTogglesMinCount: number = 0;
43  @State mCurrentDragToggleName: string = '';
44  private titleDisplayInside: boolean = false;
45  private backDialogController: CustomDialogController = new CustomDialogController({
46    builder: SimpleToggleLayoutEditDialogComponent({
47      title: $r("app.string.control_center_simple_toggle_layout_edit_back_confirm"),
48      leftButton: $r("app.string.control_center_simple_toggle_layout_edit_back_confirm_primary"),
49      rightButton: $r("app.string.control_center_simple_toggle_layout_edit_back_confirm_secondary"),
50      leftAction: () => this.callSimpleToggleLayoutEditEnd(),
51      rightAction: () => this.onFinishBtnClick(null),
52    }),
53    autoCancel: false,
54    offset: { dx: 0, dy: 0 },
55    customStyle: true
56  });
57  private resetDialogController: CustomDialogController = new CustomDialogController({
58    builder: SimpleToggleLayoutEditDialogComponent({
59      title: $r("app.string.control_center_simple_toggle_layout_edit_reset_confirm"),
60      leftButton: $r("app.string.control_center_simple_toggle_layout_edit_reset_confirm_primary"),
61      rightButton: $r("app.string.control_center_simple_toggle_layout_edit_reset_confirm_secondary"),
62      leftAction: () => {
63      },
64      rightAction: () => this.editResetConfirm(),
65    }),
66    autoCancel: false,
67    offset: { dx: 0, dy: 0 },
68    customStyle: true
69  });
70
71  aboutToAppear() {
72    Log.showInfo(TAG, 'aboutToAppear');
73    this.mNewDisplayingToggles = [...this.mDisplayingToggles];
74    this.mNewHidingToggles = [...this.mHidingToggles];
75    let allTogglesCount = this.mNewDisplayingToggles.length + this.mNewHidingToggles.length;
76    this.mHidingTogglesMaxCount = allTogglesCount - this.mDisplayingTogglesMinCount;
77    if (this.mHidingTogglesMaxCount < 0) {
78      this.mHidingTogglesMaxCount = 0;
79    };
80    this.mHidingTogglesMinCount = allTogglesCount - this.mDisplayingTogglesMaxCount;
81    if (this.mHidingTogglesMinCount < 0) {
82      this.mHidingTogglesMinCount = 0;
83    };
84  }
85
86  aboutToDisappear() {
87    Log.showInfo(TAG, 'aboutToDisappear ');
88  }
89
90  build() {
91    Column() {
92      if (!this.titleDisplayInside) {
93        Column() {
94          SimpleToggleLayoutEditUpTitle({
95            simpleToggleLayoutEditEndCallback: () => this.onSimpleToggleLayoutEditEnd()
96          })
97        }
98        .width('100%')
99        .height(this.style.titleHeight)
100        .margin({bottom: this.style.titleMarginBottom})
101      }
102
103      Column() {
104        if (this.titleDisplayInside) {
105          Column() {
106            SimpleToggleLayoutEditUpTitle({
107              simpleToggleLayoutEditEndCallback: () => this.onSimpleToggleLayoutEditEnd()
108            })
109          }
110          .width('100%')
111          .height(this.style.titleHeight)
112        }
113        Column() {
114          SimpleToggleLayoutEditGrid({
115            mToggles: $mNewDisplayingToggles,
116            mMaxCount: this.mDisplayingTogglesMaxCount,
117            mMinCount: this.mDisplayingTogglesMinCount,
118            mColumnCount: this.mColumnCount,
119            mGlobalDragToggleName: this.mCurrentDragToggleName,
120            gridTag: 'displaying',
121            onItemDragStart: (toggleName) => this.onDisplayingGridItemDragStart(toggleName),
122            onItemDrop: (status) => this.onDisplayingGridItemDrop(status)
123          })
124        }
125        .margin({top: this.style.upGridMarginTop, bottom: this.style.upGridMarginBottom, left: this.style.gridMarginLeft, right: this.style.gridMarginRight})
126
127        Column() {
128          Column() {
129            SimpleToggleLayoutEditOptMsg({
130              mOptMsg: $mOptMsg
131            })
132          }.margin({top: this.style.msgMarginTop})
133
134          Column() {
135            SimpleToggleLayoutEditGrid({
136              mToggles: $mNewHidingToggles,
137              mMaxCount: this.mHidingTogglesMaxCount,
138              mMinCount: this.mHidingTogglesMinCount,
139              mColumnCount: this.mColumnCount,
140              mGlobalDragToggleName: this.mCurrentDragToggleName,
141              gridTag: 'hiding',
142              onItemDragStart: (toggleName) => this.onHidingGridItemDragStart(toggleName),
143              onItemDrop: (status) => this.onHidingGridItemDrop(status)
144            })
145          }.margin({top: this.style.msgMarginBottom, bottom: this.style.btnMarginTop, left: this.style.gridMarginLeft, right: this.style.gridMarginRight})
146
147          Grid() {
148            GridItem() {
149              Button({ type: ButtonType.Capsule, stateEffect: true }) {
150                Text($r("app.string.control_center_simple_toggle_layout_edit_reset"))
151                  .fontColor(this.style.editBtnFontColor)
152                  .fontSize(this.style.editBtnFontSize)
153                  .fontWeight(FontWeight.Medium)
154              }
155              .backgroundColor(this.style.editBtnBgColor)
156              .width('100%')
157              .height('100%')
158              .onClick(this.onResetBtnClick.bind(this))
159            }
160
161            GridItem() {
162              Button({ type: ButtonType.Capsule, stateEffect: true }) {
163                Text($r("app.string.control_center_simple_toggle_layout_edit_finish"))
164                  .fontColor(this.style.editBtnFontColor)
165                  .fontSize(this.style.editBtnFontSize)
166                  .fontWeight(FontWeight.Medium)
167              }
168              .backgroundColor(this.style.editBtnBgColor)
169              .width('100%')
170              .height('100%')
171              .onClick(this.onFinishBtnClick.bind(this))
172            }
173          }
174          .height(this.style.editBtnHeight)
175          .margin({bottom: this.style.btnMarginBottom})
176          .padding({left: this.style.editBtnMarginLeft, right: this.style.editBtnMarginRight})
177          .columnsTemplate('1fr 1fr')
178          .rowsTemplate('1fr')
179          .columnsGap(this.style.editBtnSpace)
180        }
181        .width('100%')
182        .backgroundColor(this.style.downAreaBgColor)
183
184      }
185      .margin({left: this.style.marginLeft, right: this.style.marginRight})
186      .borderRadius(this.style.borderRadius)
187      .backgroundColor(this.style.upAreaBgColor)
188      .clip(true)
189
190    }
191    .width('100%')
192    .margin({top: this.style.marginTop})
193    .onTouch(this.onComponentTouch.bind(this))
194  }
195
196  onSimpleToggleLayoutEditEnd() {
197    Log.showDebug(TAG, `onSimpleToggleLayoutEditEnd`);
198    let changed = JSON.stringify(this.mDisplayingToggles) != JSON.stringify(this.mNewDisplayingToggles);
199    Log.showDebug(TAG, `onSimpleToggleLayoutEditEnd, changed: ${changed}`);
200    if (changed) {
201      this.backDialogController.open();
202    } else {
203      this.callSimpleToggleLayoutEditEnd();
204    };
205  }
206
207  callSimpleToggleLayoutEditEnd() {
208    Log.showDebug(TAG, `callSimpleToggleLayoutEditEnd`);
209    if (this.simpleToggleLayoutEditEndCallback) {
210      this.simpleToggleLayoutEditEndCallback();
211    };
212  }
213
214  onResetBtnClick(event: ClickEvent) {
215    Log.showDebug(TAG, `onResetBtnClick`);
216    let equalDefault = JSON.stringify(this.mDefaultDisplayToggles) == JSON.stringify(this.mNewDisplayingToggles);
217    Log.showDebug(TAG, `onResetBtnClick, equalDefault: ${equalDefault}`);
218    if (!equalDefault) {
219      this.resetDialogController.open();
220    };
221  }
222
223  editResetConfirm() {
224    Log.showDebug(TAG, `editResetConfirm`);
225    this.resetData();
226    this.callSaveDisplayingToggles();
227  }
228
229  resetData(): void{
230    Log.showDebug(TAG, `resetData`);
231    let tempDisplayingToggles: string[] = [...this.mDefaultDisplayToggles];
232    let tempHidingToggles: string[] = [];
233    this.mDisplayingToggles.forEach((toggleName) => {
234      if (tempDisplayingToggles.indexOf(toggleName) < 0) {
235        tempHidingToggles.push(toggleName);
236      };
237    })
238    this.mHidingToggles.forEach((toggleName) => {
239      if (tempDisplayingToggles.indexOf(toggleName) < 0) {
240        tempHidingToggles.push(toggleName);
241      };
242    })
243    this.mNewDisplayingToggles = tempDisplayingToggles;
244    this.mNewHidingToggles = tempHidingToggles;
245    this.mDisplayingToggles = [...tempDisplayingToggles];
246    this.mHidingToggles = [...tempHidingToggles];
247    Log.showDebug(TAG, `resetData, mNewDisplayingToggles: ${JSON.stringify(this.mNewDisplayingToggles)}`);
248    Log.showDebug(TAG, `resetData, mNewHidingToggles: ${JSON.stringify(this.mNewHidingToggles)}`);
249  }
250
251  onFinishBtnClick(event: ClickEvent) {
252    Log.showDebug(TAG, `onFinishBtnClick`);
253    let changed = JSON.stringify(this.mDisplayingToggles) != JSON.stringify(this.mNewDisplayingToggles);
254    Log.showDebug(TAG, `onFinishBtnClick, changed: ${changed}`);
255    if (changed) {
256      this.callSaveDisplayingToggles();
257    }
258    this.callSimpleToggleLayoutEditEnd();
259  }
260
261  callSaveDisplayingToggles(): void{
262    Log.showDebug(TAG, `callSaveDisplayingToggles`);
263    if (this.onSaveDisplayingToggles) {
264      this.onSaveDisplayingToggles(this.mNewDisplayingToggles);
265    };
266  }
267
268  async onDisplayingGridItemDragStart(toggleName: string): Promise<void> {
269    Log.showDebug(TAG, `onDisplayingGridItemDragStart, toggleName: ${toggleName}`);
270    this.mCurrentDragToggleName = toggleName;
271    this.setOptMsg(toggleName);
272  }
273
274  async onDisplayingGridItemDrop(status: string): Promise<void> {
275    Log.showDebug(TAG, `onDisplayingGridItemDrop, status: ${status}`);
276    this.setOptMsg(null);
277  }
278
279  async onHidingGridItemDragStart(toggleName: string): Promise<void> {
280    Log.showDebug(TAG, `onHidingGridItemDragStart, toggleName: ${toggleName}`);
281    this.mCurrentDragToggleName = toggleName;
282    this.setOptMsg(toggleName);
283  }
284
285  async onHidingGridItemDrop(status: string): Promise<void> {
286    Log.showDebug(TAG, `onHidingGridItemDrop, status: ${status}`);
287    this.setOptMsg(null);
288  }
289
290  setOptMsg(toggleName: string): void {
291    Log.showInfo(TAG, `setOptMsg, toggleName: ${toggleName}, toggleName.length: ${toggleName.length}`);
292    if (!toggleName || toggleName.length == 0) {
293      this.mOptMsg = $r('app.string.control_center_simple_toggle_layout_edit_opt_desc');
294      return;
295    }
296    if (this.mNewDisplayingToggles.indexOf(toggleName) >= 0) {
297      if (this.mNewDisplayingToggles.length <= this.mDisplayingTogglesMinCount) {
298        this.mOptMsg = $r('app.string.control_center_simple_toggle_layout_edit_opt_min', this.mDisplayingTogglesMinCount.toString());
299      } else {
300        this.mOptMsg = $r('app.string.control_center_simple_toggle_layout_edit_opt_drag');
301      }
302    } else if (this.mNewHidingToggles.indexOf(toggleName) >= 0) {
303      if (this.mNewDisplayingToggles.length >= this.mDisplayingTogglesMaxCount) {
304        this.mOptMsg = $r('app.string.control_center_simple_toggle_layout_edit_opt_max', this.mDisplayingTogglesMaxCount.toString());
305      } else {
306        this.mOptMsg = $r('app.string.control_center_simple_toggle_layout_edit_opt_drag');
307      }
308    };
309  }
310
311  onComponentTouch(event: TouchEvent) {
312    Log.showDebug(TAG, `onComponentTouch`);
313    event.stopPropagation();
314  }
315}
316
317@Component
318struct SimpleToggleLayoutEditUpTitle {
319  private simpleToggleLayoutEditEndCallback: Function;
320  @State style: SimpleToggleLayoutEditUpTitleStyle = StyleConfiguration.getSimpleToggleLayoutEditUpTitleStyle();
321
322  aboutToAppear() {
323    Log.showInfo(TAG_SimpleToggleLayoutEditUpTitle, 'aboutToAppear');
324  }
325
326  aboutToDisappear() {
327    Log.showInfo(TAG_SimpleToggleLayoutEditUpTitle, 'aboutToDisappear ');
328  }
329
330  build() {
331    Row() {
332      Image($r('app.media.ic_public_back'))
333        .margin({left: this.style.marginLeft, right: this.style.editTitleSpace})
334        .objectFit(ImageFit.Contain)
335        .size({ width: this.style.imageWidth,
336          height: this.style.imageHeight })
337        .fillColor(this.style.fontColor)
338        .onClick(this.backClick.bind(this))
339      Text($r('app.string.control_center_simple_toggle_layout_edit'))
340        .fontColor(this.style.fontColor)
341        .fontSize(this.style.titleFontSize)
342        .fontWeight(FontWeight.Medium)
343    }.width('100%')
344    .height('100%')
345  }
346
347  backClick(event: ClickEvent) {
348    Log.showDebug(TAG_SimpleToggleLayoutEditUpTitle, `backClick, event: ${JSON.stringify(event)}`);
349    this.simpleToggleLayoutEditEndCallback();
350  }
351}
352
353@Component
354struct SimpleToggleLayoutEditOptMsg {
355  @Link mOptMsg: Resource;
356  @State style: SimpleToggleLayoutEditOptMsgStyle = StyleConfiguration.getSimpleToggleLayoutEditOptMsgStyle();
357
358  aboutToAppear() {
359    Log.showInfo(TAG_SimpleToggleLayoutEditOptMsg, 'aboutToAppear');
360  }
361
362  aboutToDisappear() {
363    Log.showInfo(TAG_SimpleToggleLayoutEditOptMsg, 'aboutToDisappear ');
364  }
365
366  build() {
367    Column() {
368      Text(this.mOptMsg)
369        .fontSize(this.style.fontSize)
370        .fontColor(this.style.fontColor)
371    }
372    .height(this.style.height)
373    .margin({left: this.style.marginLeftRight, right: this.style.marginLeftRight})
374    .justifyContent(FlexAlign.Center)
375  }
376}