Commit fd17ee66 authored by Cecilia Ni's avatar Cecilia Ni Committed by Commit Bot

[App Management] Refactor permission-view-header to a new element

This CL extracts permission view header from chrome app permission view and pwa permission view to avoid duplicate code.

Bug: 906508
Change-Id: If4335bf7fcf70ec2b5d429f1b632c66839ec6853
Reviewed-on: https://chromium-review.googlesource.com/c/1393127Reviewed-by: default avatarcalamity <calamity@chromium.org>
Commit-Queue: Cecilia Ni <ceciliani@google.com>
Cr-Commit-Position: refs/heads/master@{#619891}
parent ce2553ca
......@@ -247,6 +247,8 @@
<include name="IDR_APP_MANAGEMENT_ITEM_JS" file="resources\app_management\item.js" type="BINDATA" />
<include name="IDR_APP_MANAGEMENT_MAIN_VIEW_HTML" file="resources\app_management\main_view.html" type="BINDATA" />
<include name="IDR_APP_MANAGEMENT_MAIN_VIEW_JS" file="resources\app_management\main_view.js" type="BINDATA" />
<include name="IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_HTML" file="resources\app_management\permission_view_header.html" type="BINDATA"/>
<include name="IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_JS" file="resources\app_management\permission_view_header.js" type="BINDATA"/>
<include name="IDR_APP_MANAGEMENT_METADATA_VIEW_HTML" file="resources\app_management\metadata_view.html" type="BINDATA" />
<include name="IDR_APP_MANAGEMENT_METADATA_VIEW_JS" file="resources\app_management\metadata_view.js" type="BINDATA" />
<include name="IDR_APP_MANAGEMENT_PERMISSION_ITEM_HTML" file="resources\app_management\permission_item.html" type="BINDATA"/>
......
......@@ -69,6 +69,8 @@ if (!is_android) {
js_library("chrome_app_permission_view") {
deps = [
":fake_page_handler",
":metadata_view",
":permission_view_header",
]
}
......@@ -107,6 +109,9 @@ if (!is_android) {
]
}
js_library("permission_view_header") {
}
js_library("permission_item") {
deps = [
":constants",
......@@ -120,6 +125,7 @@ if (!is_android) {
":fake_page_handler",
":metadata_view",
":permission_item",
":permission_view_header",
":store_client",
]
}
......
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="browser_proxy.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<dom-module id="app-management-chrome-app-permission-view">
......@@ -11,15 +9,8 @@
<style include="app-management-shared-css">
</style>
<div class="permission-view-header">
<paper-icon-button-light class="icon-arrow-back">
<button>
<paper-ripple class="circle"></paper-ripple>
</button>
</paper-icon-button-light>
<img class="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
<div class="app-title">[[app_.title]]</div>
</div>
<app-management-permission-view-header app="[[app_]]">
</app-management-permission-view-header>
<app-management-metadata-view app="[[app_]]"></app-management-metadata-view>
</template>
<script src="chrome_app_permission_view.js"></script>
......
......@@ -17,13 +17,4 @@ Polymer({
},
},
},
/**
* @param {appManagement.mojom.App} app
* @return {string}
* @private
*/
iconUrlFromId_: function(app) {
return app_management.util.getAppIcon(app);
},
});
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="shared_vars.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<dom-module id="app-management-permission-view-header">
<template>
<style include="app-management-shared-css paper-button-style">
:host {
align-items: center;
border-top: var(--card-separator);
display: flex;
}
#permission-view-header-icon {
height: 26px;
margin-inline-end: 8px;
margin-inline-start: 24px;
width: 26px;
}
#app-title {
flex: 1;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<paper-icon-button-light class="icon-arrow-back">
<button><paper-ripple class="circle"></paper-ripple></button>
</paper-icon-button-light>
<img id="permission-view-header-icon" src="[[iconUrlFromId_(app)]]">
<div id="app-title">[[app.title]]</div>
<slot name="extra-right-buttons"></slot>
<paper-button>
$i18n{uninstall}
</paper-button>
</template>
<script src="permission_view_header.js"></script>
</dom-module>
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
Polymer({
is: 'app-management-permission-view-header',
properties: {
/** @type {App} */
app: {
type: Object,
},
},
/**
* @param {App} app
* @return {string}
* @private
*/
iconUrlFromId_: function(app) {
return app_management.util.getAppIcon(app);
},
});
......@@ -6,6 +6,7 @@
<link rel="import" href="permission_item.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="shared_vars.html">
<link rel="import" href="permission_view_header.html">
<link rel="import" href="store_client.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
......@@ -19,16 +20,6 @@
<dom-module id="app-management-pwa-permission-view">
<template>
<style include="app-management-shared-css cr-icons paper-button-style">
#site-settings-button {
color: var(--secondary-text-color);
font-size: 12px;
}
#site-settings-icon {
display: flex;
margin-inline-end: 24px;
}
#permission-list {
display: flex;
flex-direction: column;
......@@ -40,26 +31,34 @@
margin: 0 24px;
width: 1px;
}
#site-settings-button {
--paper-button-ink-color: none;
border: none;
color: var(--secondary-text-color);
display: flex;
font-size: 12px;
font-weight: var(--secondary-font-weight);
}
#site-settings-icon {
display: flex;
margin-inline-end: 24px;
margin-inline-start: 0;
}
</style>
<div class="permission-view-header">
<paper-icon-button-light class="icon-arrow-back">
<button id="closeButton" on-click="onClickBackButton_"
aria-label="$i18n{back}">
<paper-ripple class="circle"></paper-ripple>
</button>
</paper-icon-button-light>
<img class="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
<div class="app-title">[[app_.title]]</div>
<div id="site-settings-button">$i18n{openSiteSettings}</div>
<paper-icon-button-light id="site-settings-icon" class="icon-external">
<button aria-label="$i18n{openSiteSettings}"></button>
</paper-icon-button-light>
<paper-button class="secondary-button" on-click="onClickUninstallButton_"
role="button"
tabindex="0" aria-disabled="false" elevation="0">
$i18n{uninstall}
</paper-button>
</div>
<app-management-permission-view-header app="[[app_]]">
<div slot="extra-right-buttons">
<paper-button id="site-settings-button">
$i18n{openSiteSettings}
<paper-icon-button-light id="site-settings-icon"
class="icon-external">
<button></button>
</paper-icon-button-light>
</paper-button>
</div>
</app-management-permission-view-header>
<div id="permission-list" class="card-container">
<app-management-permission-item app="[[app_]]"
......
......@@ -13,19 +13,6 @@
width: var(--card-width);
}
.permission-view-header {
align-items: center;
border-top: var(--card-separator);
display: flex;
}
.permission-view-header-icon {
height: 26px;
margin-inline-end: 8px;
margin-inline-start: 24px;
width: 26px;
}
.permission-row {
align-items: center;
border-top: var(--card-separator);
......@@ -45,26 +32,6 @@
font-weight: var(--secondary-font-weight);
}
.app-title {
flex: 1;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.permission-row {
align-items: center;
border-top: var(--card-separator);
display: inline-flex;
height: 62px;
justify-content: space-between;
padding: 0 24px;
}
.permission-row:first-child {
border-style: none;
}
.permission-row-controls {
align-items: center;
display: inline-flex;
......
......@@ -84,6 +84,10 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
source->AddResourcePath("item.js", IDR_APP_MANAGEMENT_ITEM_JS);
source->AddResourcePath("main_view.html", IDR_APP_MANAGEMENT_MAIN_VIEW_HTML);
source->AddResourcePath("main_view.js", IDR_APP_MANAGEMENT_MAIN_VIEW_JS);
source->AddResourcePath("permission_view_header.html",
IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_HTML);
source->AddResourcePath("permission_view_header.js",
IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_JS);
source->AddResourcePath("metadata_view.html",
IDR_APP_MANAGEMENT_METADATA_VIEW_HTML);
source->AddResourcePath("metadata_view.js",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment