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 { ScreenModeModel } from '../model/displayAndBrightnessImpl/display/ScreenMode';
17import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
18import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
19import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
20import { SubHeader } from '../../../../../../common/component/src/main/ets/default/textComponent';
21import { BrightnessSettingModel } from '../model/displayAndBrightnessImpl/brightness/BrightnessSettingModel';
22
23const BRIGHTNESS_STEP_VALUE = 1;
24
25/**
26 * brightness setting
27 */
28@Entry
29@Component
30struct BrightnessSettings {
31  @State brightnessSettingModel: BrightnessSettingModel = new BrightnessSettingModel();
32  @StorageLink('BrightnessValue') brightnessValue: number = 0;
33  private TAG = ConfigData.TAG + 'BrightnessSettings ';
34
35  build() {
36    Column() {
37      GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
38        Column() {
39          HeadComponent({ headName: $r('app.string.brightnessTab'), isActive: true });
40
41          SubHeader({ titleContent: $r('app.string.brightness') });
42
43          Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
44            Image($r('app.media.ic_settings_brightness_maximum'))
45              .padding("3vp")
46              .width($r('app.float.wh_value_24'))
47              .height($r('app.float.wh_value_24'))
48              .objectFit(ImageFit.Contain)
49              .fillColor($r("sys.color.ohos_id_color_primary"))
50              .opacity($r("sys.float.ohos_fa_alpha_content_secondary"))
51
52            Slider({
53              value: this.brightnessValue,
54              min: this.brightnessSettingModel.getMinBrightness(),
55              max: this.brightnessSettingModel.getMaxBrightness(),
56              step: BRIGHTNESS_STEP_VALUE,
57              style: SliderStyle.InSet
58            })
59              .selectedColor($r('app.color.font_color_007DFF'))
60              .blockColor(Color.White)
61              .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
62              .padding({ left: $r('app.float.distance_12'), right: $r('app.float.distance_12') })
63              .onChange((number, mode: SliderChangeMode) => {
64                this.brightnessSettingModel.setValue(number, mode);
65              });
66
67            Image($r('app.media.ic_settings_brightness_maximum'))
68              .width($r('app.float.wh_value_24'))
69              .height($r('app.float.wh_value_24'))
70              .objectFit(ImageFit.Contain)
71              .fillColor($r("sys.color.ohos_id_color_primary"))
72              .opacity($r("sys.float.ohos_fa_alpha_content_secondary"))
73          }
74          .padding({
75            left: $r('sys.float.ohos_id_card_margin_start'),
76            right: $r("sys.float.ohos_id_card_margin_end")
77          })
78          .height($r('app.float.distance_64'))
79          .width(ConfigData.WH_100_100)
80          .borderRadius($r('app.float.radius_24'))
81          .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
82
83          SubHeader({ titleContent: $r('app.string.screen') })
84
85          ScreenModelComponent()
86        }
87        .useSizeType({
88          sm: { span: 4, offset: 0 },
89          md: { span: 6, offset: 1 },
90          lg: { span: 8, offset: 2 }
91        })
92      }
93      .width(ConfigData.WH_100_100)
94      .height(ConfigData.WH_100_100)
95    }
96    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
97    .width(ConfigData.WH_100_100)
98    .height(ConfigData.WH_100_100)
99  }
100
101  aboutToAppear(): void {
102    LogUtil.info(this.TAG + 'aboutToAppear in');
103    this.brightnessSettingModel.registerObserver();
104    LogUtil.info(this.TAG + 'aboutToAppear out');
105  }
106
107  aboutToDisappear(): void {
108    LogUtil.info(this.TAG + 'aboutToDisappear in');
109    this.brightnessSettingModel?.unregisterObserver();
110    LogUtil.info(this.TAG + 'aboutToDisappear out');
111  }
112}
113
114/**
115 * Sub-Page Entry Component with EndText
116 */
117@Component
118export struct ScreenModelComponent {
119  @State isTouched: boolean = false;
120  @StorageLink('sysScreenModeText') sysScreenModeText: string = '';
121  @State screenModeModel: ScreenModeModel = new ScreenModeModel();
122
123  build() {
124    Navigator({ target: "pages/screenMode" }) {
125      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
126        Text($r("app.string.screenResolution"))
127          .fontSize($r('app.float.font_16'))
128          .lineHeight($r('app.float.wh_value_22'))
129          .fontWeight(FontWeight.Medium)
130          .fontColor($r("sys.color.ohos_id_color_text_primary"))
131          .margin({ left: $r('app.float.distance_8') })
132          .textAlign(TextAlign.Start);
133
134        Row() {
135          Text(this.sysScreenModeText)
136            .fontSize($r('app.float.font_14'))
137            .lineHeight($r('app.float.wh_value_19'))
138            .fontWeight(FontWeight.Regular)
139            .fontColor($r('sys.color.ohos_id_color_text_primary'))
140            .opacity($r("sys.float.ohos_fa_alpha_content_secondary"))
141            .margin({ right: $r('app.float.distance_4') })
142            .textAlign(TextAlign.End);
143
144          Image('/res/image/ic_settings_arrow.svg')
145            .width($r('app.float.wh_value_12'))
146            .height($r('app.float.wh_value_24'))
147            .margin({ right: $r('app.float.distance_8') })
148            .fillColor($r("sys.color.ohos_id_color_primary"))
149            .opacity($r("sys.float.ohos_fa_alpha_content_fourth"))
150        }
151      }
152      .height(ConfigData.WH_100_100)
153      .width(ConfigData.WH_100_100)
154      .borderRadius($r('app.float.radius_20'))
155      .linearGradient(this.isTouched ? {
156        angle: 90,
157        direction: GradientDirection.Right,
158        colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
159      } : {
160        angle: 90,
161        direction: GradientDirection.Right,
162        colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
163      })
164      .onTouch((event?: TouchEvent | undefined) => {
165        if (event?.type === TouchType.Down) {
166          this.isTouched = true;
167        }
168
169        if (event?.type === TouchType.Up) {
170          this.isTouched = false;
171        }
172      });
173    }
174    .padding($r('app.float.distance_4'))
175    .height($r('app.float.wh_value_56'))
176    .borderRadius($r('app.float.radius_24'))
177    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
178  }
179}