• 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 recentMissionsSingleList: RecentMissionInfo[];
28  @Link isClickSubComponent: boolean;
29  @StorageLink('recentIdx') recentIdx: number = 0;
30  private mRecentMissionsViewModel?: RecentMissionsViewModel;
31
32  aboutToAppear(): void {
33    this.mRecentMissionsViewModel = RecentMissionsViewModel.getInstance();
34  }
35
36  build() {
37    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
38      // middle area, mission list
39      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
40        List({ space: RecentsStyleConstants.SINGLE_LIST_MIDDLE_AREA_SPACE, initialIndex: this.recentIdx}) {
41          ForEach(this.recentMissionsSingleList, (item: RecentMissionInfo) => {
42            ListItem() {
43              RecentMissionCard({
44                missionId: item.missionId,
45                appIconId: item.appIconId,
46                appLabelId: item.appLabelId,
47                appName: item.appName,
48                bundleName: item.bundleName,
49                moduleName: item.moduleName,
50                abilityName: item.abilityName,
51                lockedState: item.lockedState,
52                isClickSubComponent: $isClickSubComponent,
53                snapShotTime: item.snapShotTime
54              })
55            }
56          }, (item: RecentMissionInfo) => JSON.stringify(item))
57        }
58        .scrollBar(BarState.Off)
59        .listDirection(Axis.Horizontal)
60        .height(RecentsStyleConstants.SINGLE_LIST_MISSION_HEIGHT)
61      }
62      .padding({ top: RecentsStyleConstants.SINGLE_LIST_MIDDLE_AREA_TOP_MARGIN })
63      .width(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
64      .height(RecentsStyleConstants.SINGLE_LIST_MIDDLE_AERA_HEIGHT)
65
66      // bottom area, button for cleaning up running applications
67      Column() {
68        Stack() {
69          Column() {
70          }
71          .width(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE)
72          .height(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE)
73          .opacity(RecentsStyleConstants.DEFAULT_DELETE_IMAGE_OPACITY)
74          .backgroundColor(RecentsStyleConstants.DEFAULT_FONT_COLOR)
75          .borderRadius(RecentsStyleConstants.RECENT_DELETE_IMAGE_COLUMN_SIZE / 2)
76
77          Image(RecentsStyleConstants.DEFAULT_DELETE_IMAGE_FULL)
78            .width(RecentsStyleConstants.RECENT_DELETE_IMAGE_SIZE)
79            .height(RecentsStyleConstants.RECENT_DELETE_IMAGE_SIZE)
80        }
81        .onClick(() => {
82          this.isClickSubComponent = true;
83          Log.showDebug(TAG, 'onClick click delete button');
84          this.mRecentMissionsViewModel?.deleteRecentMission(true, -1);
85          this.mRecentMissionsViewModel?.backView();
86          this.mRecentMissionsViewModel?.getRecentMissionsList();
87        })
88      }
89      .margin({ bottom: RecentsStyleConstants.SINGLE_LIST_DELETE_IMAGE_FULL_BOTTOM_MARGIN })
90      .width(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
91    }
92    .height(RecentsStyleConstants.DEFAULT_LAYOUT_PERCENTAGE)
93
94  }
95}