Change gr-styled-table to be css template
Previously, gr-styled-table was include in the list view only, which handled styling the content passed to the list view (which were always tables of varying content). Because Polymer2 does not allow for reaching into <slot> to style content as was done before, the styles have to be imported to the element that originally creates the content. Change-Id: I7136f8ccbea00e532d2a8e1a63f6874eb418906e
This commit is contained in:
@@ -18,6 +18,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
||||||
<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
|
<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../../../styles/gr-table-styles.html">
|
||||||
<link rel="import" href="../../../styles/shared-styles.html">
|
<link rel="import" href="../../../styles/shared-styles.html">
|
||||||
<link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
|
<link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
|
||||||
<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
|
<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
|
||||||
@@ -28,6 +29,7 @@ limitations under the License.
|
|||||||
<dom-module id="gr-admin-group-list">
|
<dom-module id="gr-admin-group-list">
|
||||||
<template>
|
<template>
|
||||||
<style include="shared-styles"></style>
|
<style include="shared-styles"></style>
|
||||||
|
<style include="gr-table-styles"></style>
|
||||||
<gr-list-view
|
<gr-list-view
|
||||||
create-new="[[_createNewCapability]]"
|
create-new="[[_createNewCapability]]"
|
||||||
filter="[[_filter]]"
|
filter="[[_filter]]"
|
||||||
@@ -37,7 +39,7 @@ limitations under the License.
|
|||||||
offset="[[_offset]]"
|
offset="[[_offset]]"
|
||||||
on-create-clicked="_handleCreateClicked"
|
on-create-clicked="_handleCreateClicked"
|
||||||
path="[[_path]]">
|
path="[[_path]]">
|
||||||
<table id="list">
|
<table id="list" class="genericList">
|
||||||
<tr class="headerRow">
|
<tr class="headerRow">
|
||||||
<th class="name topHeader">Group Name</th>
|
<th class="name topHeader">Group Name</th>
|
||||||
<th class="description topHeader">Group Description</th>
|
<th class="description topHeader">Group Description</th>
|
||||||
|
@@ -13,19 +13,18 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
-->
|
-->
|
||||||
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
||||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../../styles/gr-table-styles.html">
|
||||||
<link rel="import" href="../../shared/gr-list-view/gr-styled-table.html">
|
|
||||||
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
|
||||||
|
|
||||||
<link rel="import" href="../../../styles/shared-styles.html">
|
<link rel="import" href="../../../styles/shared-styles.html">
|
||||||
|
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
||||||
|
|
||||||
<dom-module id="gr-admin-plugin-list">
|
<dom-module id="gr-admin-plugin-list">
|
||||||
<template>
|
<template>
|
||||||
<style include="shared-styles"></style>
|
<style include="shared-styles"></style>
|
||||||
<gr-styled-table>
|
<style include="gr-table-styles"></style>
|
||||||
<table id="list">
|
<table id="list" class="genericList">
|
||||||
<tr class="headerRow">
|
<tr class="headerRow">
|
||||||
<th class="name topHeader">Plugin Name</th>
|
<th class="name topHeader">Plugin Name</th>
|
||||||
<th class="version topHeader">Version</th>
|
<th class="version topHeader">Version</th>
|
||||||
@@ -46,7 +45,6 @@ limitations under the License.
|
|||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</gr-styled-table>
|
|
||||||
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
||||||
</template>
|
</template>
|
||||||
<script src="gr-admin-plugin-list.js"></script>
|
<script src="gr-admin-plugin-list.js"></script>
|
||||||
|
@@ -17,6 +17,7 @@ limitations under the License.
|
|||||||
|
|
||||||
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
<link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
|
||||||
<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
|
<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../../../styles/gr-table-styles.html">
|
||||||
<link rel="import" href="../../../styles/shared-styles.html">
|
<link rel="import" href="../../../styles/shared-styles.html">
|
||||||
<link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
|
<link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
|
||||||
<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
|
<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
|
||||||
@@ -28,6 +29,7 @@ limitations under the License.
|
|||||||
<dom-module id="gr-admin-project-list">
|
<dom-module id="gr-admin-project-list">
|
||||||
<template>
|
<template>
|
||||||
<style include="shared-styles"></style>
|
<style include="shared-styles"></style>
|
||||||
|
<style include="gr-table-styles"></style>
|
||||||
<gr-list-view
|
<gr-list-view
|
||||||
create-new=[[_createNewCapability]]
|
create-new=[[_createNewCapability]]
|
||||||
filter="[[_filter]]"
|
filter="[[_filter]]"
|
||||||
@@ -37,7 +39,7 @@ limitations under the License.
|
|||||||
offset="[[_offset]]"
|
offset="[[_offset]]"
|
||||||
on-create-clicked="_handleCreateClicked"
|
on-create-clicked="_handleCreateClicked"
|
||||||
path="[[_path]]">
|
path="[[_path]]">
|
||||||
<table id="list">
|
<table id="list" class="genericList">
|
||||||
<tr class="headerRow">
|
<tr class="headerRow">
|
||||||
<th class="name topHeader">Project Name</th>
|
<th class="name topHeader">Project Name</th>
|
||||||
<th class="description topHeader">Project Description</th>
|
<th class="description topHeader">Project Description</th>
|
||||||
|
@@ -19,7 +19,6 @@ limitations under the License.
|
|||||||
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
|
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
|
||||||
<link rel="import" href="../../../styles/shared-styles.html">
|
<link rel="import" href="../../../styles/shared-styles.html">
|
||||||
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
||||||
<link rel="import" href="gr-styled-table.html">
|
|
||||||
|
|
||||||
<dom-module id="gr-list-view">
|
<dom-module id="gr-list-view">
|
||||||
<template>
|
<template>
|
||||||
@@ -69,9 +68,7 @@ limitations under the License.
|
|||||||
</gr-button>
|
</gr-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<gr-styled-table>
|
|
||||||
<content></content>
|
<content></content>
|
||||||
</gr-styled-table>
|
|
||||||
<nav>
|
<nav>
|
||||||
<a id="prevArrow"
|
<a id="prevArrow"
|
||||||
href$="[[_computeNavLink(offset, -1, itemsPerPage, filter)]]"
|
href$="[[_computeNavLink(offset, -1, itemsPerPage, filter)]]"
|
||||||
|
@@ -14,64 +14,48 @@ See the License for the specific language governing permissions and
|
|||||||
limitations under the License.
|
limitations under the License.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
<dom-module id="gr-table-styles">
|
||||||
<link rel="import" href="../../../styles/shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="gr-styled-table">
|
|
||||||
<template>
|
<template>
|
||||||
<style include="shared-styles">
|
<style>
|
||||||
::content {
|
.genericList .loading {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
::content .loading {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
::content #list {
|
.genericList {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
::content #list tr.table {
|
.genericList tr.table {
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
::content #list td {
|
.genericList td {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: .3em .5em;
|
padding: .3em .5em;
|
||||||
}
|
}
|
||||||
::content #list th {
|
.genericList th {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: .3em .5em;
|
padding: .3em .5em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
::content #list a {
|
.genericList a {
|
||||||
color: var(--default-text-color);
|
color: var(--default-text-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
::content #list a:hover {
|
.genericList a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
::content #list .description {
|
.genericList .description {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
::content #list .loadingMsg {
|
.genericList .loadingMsg {
|
||||||
color: #666;
|
color: #666;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 1em var(--default-horizontal-margin);
|
padding: 1em var(--default-horizontal-margin);
|
||||||
}
|
}
|
||||||
::content #list .loadingMsg:not(.loading) {
|
.genericList .loadingMsg:not(.loading) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<content></content>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
Polymer({
|
|
||||||
is: 'gr-styled-table',
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</dom-module>
|
</dom-module>
|
Reference in New Issue
Block a user