• 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 */
15import { Log, RecentMissionInfo } from '@ohos/common';
16import RecentMissionCard from '../common/uicomponents/RecentMissionCard';
17import { RecentsStyleConstants } from '../common/constants/RecentsStyleConstants';
18import { RecentMissionsViewModel } from '../viewmodel/RecentMissionsViewModel';
19
20const TAG = 'RecentMissionsSingleLayout';
21
22/**
23 * Single-line display of recent task list (phone adaptation).
24 */
25@Component
26export struct RecentMissionsSingleLayout {
27  @Link @Watch('refreshList') recentMissionsSingleList: RecentMissionInfo[];
28  @Link isClickSubComponent: boolean;
29  @StorageLink('recentIdx') recentIdx: number = 0;
30  private mRecentMissionsViewModel?: RecentMissionsViewModel;
31  scroller: Scroller = new Scroller()
32
33  refreshList() {
34    this.scroller.scrollEdge(Edge.Start)
35  }
36
37  aboutToAppear(): void {
38    this.mRecentMissionsViewModel = RecentMissionsViewModel.getInstance();
39  }
40
41  build() {
42    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
43      // middle area, mission list
44      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
45        List({
46          space: RecentsStyleConstants.SINGLE_LIST_MIDDLE_AREA_SPACE,
47          initialIndex: this.recentIdx,
48          scroller: this.scroller
49        }) {
50          ForEach(this.recentMissionsSingleList, (item: RecentMissionInfo) => {
51            ListItem() {
52              RecentMissionCard({
53                missionId: item.missionId,
54                appIconId: item.appIconId,
55                appLabelId: item.appLabelId,
56                appName: item.appName,
57                bundleName: item.bundleName,
58                moduleName: item.moduleName,
59                abilityName: item.abilityName,
60                lockedState: item.lockedState,
61                isClickSubComponent: $isClickSubComponent,
62                snapShotTime: item.snapShotTime
63              })
64            }
65          }, (item: RecentMissionInfo) => JSON.stringify(item))
66        }
67        .scrollBar(BarState.Off)
68        .listDirection(Axis.Horizontal)
69        .height(RecentsStyleConstants.SINGLE_LIST_MISSION_HEIGHT)
70      }
71      .padding({ top: RecentsStyleConstants.SINGLE_LIST_MIDDLE_AREA_TOP_MARGIN })
72      .width(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
73      .height(RecentsStyleConstants.SINGLE_LIST_MIDDLE_AERA_HEIGHT)
74
75      // bottom area, button for cleaning up running applications
76      Column() {
77        Stack() {
78          Column() {
79          }
80          .width(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE)
81          .height(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE)
82          .opacity(RecentsStyleConstants.DEFAULT_DELETE_IMAGE_OPACITY)
83          .backgroundColor(RecentsStyleConstants.DEFAULT_FONT_COLOR)
84          .borderRadius(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE / 2)
85
86          Image(RecentsStyleConstants.DEFAULT_DELETE_IMAGE_FULL)
87            .width(RecentsStyleConstants.RECENT_DELETE_IMAGE_SIZE)
88            .height(RecentsStyleConstants.RECENT_DELETE_IMAGE_SIZE)
89        }
90        .onClick(() => {
91          this.isClickSubComponent = true;
92          Log.showDebug(TAG, 'onClick click delete button');
93          this.mRecentMissionsViewModel?.deleteRecentMission(true, -1);
94          this.mRecentMissionsViewModel?.backView();
95          this.mRecentMissionsViewModel?.getRecentMissionsList();
96        })
97      }
98      .margin({ bottom: RecentsStyleConstants.SINGLE_LIST_DELETE_IMAGE_FULL_BOTTOM_MARGIN })
99      .width(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
100    }
101    .height(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
102
103  }
104}