mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
Luke Pulverenti
parent
fb269362ff
commit
71811cb9e3
221 changed files with 32936 additions and 101 deletions
667
dashboard-ui/bower_components/material-design-lite/src/layout/_layout.scss
vendored
Normal file
667
dashboard-ui/bower_components/material-design-lite/src/layout/_layout.scss
vendored
Normal file
|
|
@ -0,0 +1,667 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
// Navigation classes. Only used here for now, but we may at some point move
|
||||
// this to its own component.
|
||||
.mdl-navigation {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-navigation__link {
|
||||
color: $layout-text-color;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
@include typo-body-1(true);
|
||||
|
||||
// Align icons inside link with text
|
||||
& .material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Main layout class.
|
||||
.mdl-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
// Utility classes for screen sizes.
|
||||
.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout__container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Optional utility classes for formatting special blocks in this component.
|
||||
.mdl-layout__title,
|
||||
.mdl-layout-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@include typo-title();
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-layout-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
// Drawer.
|
||||
.mdl-layout__drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
width: $layout-drawer-width;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@include shadow-2dp();
|
||||
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid $layout-drawer-border-color;
|
||||
background: $layout-drawer-bg-color;
|
||||
|
||||
// Transform offscreen.
|
||||
transform: translateX(-$layout-drawer-width - 10px);
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
|
||||
@include material-animation-default();
|
||||
transition-property: transform;
|
||||
|
||||
color: $layout-text-color;
|
||||
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
|
||||
z-index: 5;
|
||||
|
||||
&.is-visible {
|
||||
transform: translateX(0);
|
||||
& ~ .mdl-layout__content.mdl-layout__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > .mdl-layout__title,
|
||||
& > .mdl-layout-title {
|
||||
line-height: $layout-desktop-header-height;
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
line-height: $layout-mobile-header-height;
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-navigation {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-top: 16px;
|
||||
|
||||
& .mdl-navigation__link {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
padding: 16px $layout-header-desktop-indent;
|
||||
margin: 0;
|
||||
color: $layout-drawer-navigation-color;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
padding: 16px $layout-header-mobile-indent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $layout-nav-color;
|
||||
}
|
||||
|
||||
&--current {
|
||||
background-color: $layout-drawer-navigation-link-active-background;
|
||||
color: $layout-drawer-navigation-link-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Drawer button.
|
||||
// TODO(sgomes): Replace with an icon button when we have that component.
|
||||
.mdl-layout__drawer-button {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
height: $layout-drawer-button-desktop-size;
|
||||
width: $layout-drawer-button-desktop-size;
|
||||
border: 0;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
line-height: $layout-drawer-button-desktop-size + 2;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 10px 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: $layout-header-text-color;
|
||||
|
||||
z-index: 4;
|
||||
|
||||
.mdl-layout__header & {
|
||||
position: absolute;
|
||||
color: $layout-header-text-color;
|
||||
background-color: inherit;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin: 4px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout--no-desktop-drawer-button & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout--no-drawer-button & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-height: $layout-desktop-header-height;
|
||||
max-height: 1000px;
|
||||
z-index: 3;
|
||||
|
||||
background-color: $layout-header-bg-color;
|
||||
color: $layout-header-text-color;
|
||||
|
||||
@include shadow-2dp();
|
||||
@include material-animation-default();
|
||||
transition-property: max-height, box-shadow;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: $layout-mobile-header-height;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
width: calc(100% - #{$layout-drawer-width});
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
.mdl-layout__header-row {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .mdl-layout-icon {
|
||||
position: absolute;
|
||||
left: $layout-header-desktop-indent;
|
||||
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
left: $layout-header-mobile-indent;
|
||||
top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout.has-drawer & > .mdl-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-compact {
|
||||
max-height: $layout-desktop-header-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
max-height: $layout-mobile-header-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-compact.has-tabs {
|
||||
height: $layout-desktop-header-height + $layout-tab-bar-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: $layout-mobile-header-height + $layout-tab-bar-height;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-header > & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header--transparent.mdl-layout__header--transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-layout__header--seamed {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-layout__header--scroll {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-layout__header--waterfall {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-casting-shadow {
|
||||
@include shadow-2dp();
|
||||
}
|
||||
|
||||
&.mdl-layout__header--waterfall-hide-top {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
height: $layout-header-desktop-row-height;
|
||||
margin: 0;
|
||||
padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
|
||||
|
||||
.mdl-layout--no-drawer-button & {
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--no-desktop-drawer-button & {
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
height: $layout-header-mobile-row-height;
|
||||
padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
|
||||
|
||||
.mdl-layout--no-drawer-button & {
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__header--scroll & {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .mdl-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: $layout-header-desktop-row-height;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
height: $layout-header-mobile-row-height;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-navigation__link {
|
||||
display: block;
|
||||
color: $layout-header-text-color;
|
||||
line-height: $layout-header-desktop-row-height;
|
||||
padding: 0 24px;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
line-height: $layout-header-mobile-row-height;
|
||||
padding: 0 $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Obfuscator.
|
||||
.mdl-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
transition-property: background-color;
|
||||
@include material-animation-default();
|
||||
|
||||
&.is-visible {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@supports (pointer-events: auto) {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
visibility: visible;
|
||||
pointer-events: none;
|
||||
&.is-visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Content.
|
||||
.mdl-layout__content {
|
||||
// Fix IE10 bug.
|
||||
-ms-flex: 0 1 auto;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
}
|
||||
|
||||
.mdl-layout__container.has-scrolling-header & {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__container.has-scrolling-header & {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs.
|
||||
.mdl-layout__tab-bar {
|
||||
height: $layout-tab-bar-height * 2;
|
||||
margin: 0;
|
||||
width: calc(100% -
|
||||
#{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
|
||||
padding: 0 0 0
|
||||
($layout-header-desktop-baseline - $layout-tab-desktop-padding);
|
||||
display: flex;
|
||||
background-color: $layout-header-bg-color;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout--no-drawer-button & {
|
||||
padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
||||
width: calc(100% -
|
||||
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--no-desktop-drawer-button & {
|
||||
padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
||||
width: calc(100% -
|
||||
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
width: calc(100% -
|
||||
#{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
|
||||
padding: 0 0 0
|
||||
($layout-header-mobile-baseline - $layout-tab-mobile-padding);
|
||||
|
||||
.mdl-layout--no-drawer-button & {
|
||||
width: calc(100% -
|
||||
#{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
|
||||
padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs & {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__tab-bar-container {
|
||||
position: relative;
|
||||
height: $layout-tab-bar-height;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.mdl-layout__container > & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__tab-bar-button {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $layout-tab-bar-height;
|
||||
width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
background-color: $layout-header-bg-color;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
.mdl-layout--no-desktop-drawer-button &,
|
||||
.mdl-layout--no-drawer-button & {
|
||||
width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
||||
|
||||
& .material-icons {
|
||||
position: relative;
|
||||
left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
display: none;
|
||||
width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .material-icons {
|
||||
line-height: $layout-tab-bar-height;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: $layout-header-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__tab-bar-left-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__tab-bar-right-button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__tab {
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
text-decoration: none;
|
||||
height: $layout-tab-bar-height;
|
||||
line-height: $layout-tab-bar-height;
|
||||
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: $layout-tab-font-size;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $layout-header-tab-text-color;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs & {
|
||||
float: none;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-layout.is-upgraded &.is-active {
|
||||
color: $layout-header-text-color;
|
||||
}
|
||||
|
||||
.mdl-layout.is-upgraded &.is-active::after {
|
||||
height: $layout-tab-highlight-thickness;
|
||||
width: 100%;
|
||||
display: block;
|
||||
content: " ";
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: $layout-header-tab-highlight;
|
||||
animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
|
||||
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
& .mdl-layout__tab-ripple-container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
& .mdl-ripple {
|
||||
background-color: $layout-header-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__tab-panel {
|
||||
display: block;
|
||||
|
||||
.mdl-layout.is-upgraded & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout.is-upgraded &.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
580
dashboard-ui/bower_components/material-design-lite/src/layout/layout.js
vendored
Normal file
580
dashboard-ui/bower_components/material-design-lite/src/layout/layout.js
vendored
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Class constructor for Layout MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialLayout = function MaterialLayout(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialLayout'] = MaterialLayout;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.Constant_ = {
|
||||
MAX_WIDTH: '(max-width: 1024px)',
|
||||
TAB_SCROLL_PIXELS: 100,
|
||||
RESIZE_TIMEOUT: 100,
|
||||
|
||||
MENU_ICON: '',
|
||||
CHEVRON_LEFT: 'chevron_left',
|
||||
CHEVRON_RIGHT: 'chevron_right'
|
||||
};
|
||||
|
||||
/**
|
||||
* Keycodes, for code readability.
|
||||
*
|
||||
* @enum {number}
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.Keycodes_ = {
|
||||
ENTER: 13,
|
||||
ESCAPE: 27,
|
||||
SPACE: 32
|
||||
};
|
||||
|
||||
/**
|
||||
* Modes.
|
||||
*
|
||||
* @enum {number}
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.Mode_ = {
|
||||
STANDARD: 0,
|
||||
SEAMED: 1,
|
||||
WATERFALL: 2,
|
||||
SCROLL: 3
|
||||
};
|
||||
|
||||
/**
|
||||
* Store strings for class names defined by this component that are used in
|
||||
* JavaScript. This allows us to simply change it in one place should we
|
||||
* decide to modify at a later date.
|
||||
*
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.CssClasses_ = {
|
||||
CONTAINER: 'mdl-layout__container',
|
||||
HEADER: 'mdl-layout__header',
|
||||
DRAWER: 'mdl-layout__drawer',
|
||||
CONTENT: 'mdl-layout__content',
|
||||
DRAWER_BTN: 'mdl-layout__drawer-button',
|
||||
|
||||
ICON: 'material-icons',
|
||||
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
|
||||
HEADER_SEAMED: 'mdl-layout__header--seamed',
|
||||
HEADER_WATERFALL: 'mdl-layout__header--waterfall',
|
||||
HEADER_SCROLL: 'mdl-layout__header--scroll',
|
||||
|
||||
FIXED_HEADER: 'mdl-layout--fixed-header',
|
||||
OBFUSCATOR: 'mdl-layout__obfuscator',
|
||||
|
||||
TAB_BAR: 'mdl-layout__tab-bar',
|
||||
TAB_CONTAINER: 'mdl-layout__tab-bar-container',
|
||||
TAB: 'mdl-layout__tab',
|
||||
TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
|
||||
TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
|
||||
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
|
||||
PANEL: 'mdl-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER: 'has-drawer',
|
||||
HAS_TABS: 'has-tabs',
|
||||
HAS_SCROLLING_HEADER: 'has-scrolling-header',
|
||||
CASTING_SHADOW: 'is-casting-shadow',
|
||||
IS_COMPACT: 'is-compact',
|
||||
IS_SMALL_SCREEN: 'is-small-screen',
|
||||
IS_DRAWER_OPEN: 'is-visible',
|
||||
IS_ACTIVE: 'is-active',
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
IS_ANIMATING: 'is-animating',
|
||||
|
||||
ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
|
||||
ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles scrolling on the content.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.contentScrollHandler_ = function() {
|
||||
if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var headerVisible =
|
||||
!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) ||
|
||||
this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
|
||||
|
||||
if (this.content_.scrollTop > 0 &&
|
||||
!this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
this.header_.classList.add(this.CssClasses_.IS_COMPACT);
|
||||
if (headerVisible) {
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
}
|
||||
} else if (this.content_.scrollTop <= 0 &&
|
||||
this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
||||
if (headerVisible) {
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles a keyboard event on the drawer.
|
||||
*
|
||||
* @param {Event} evt The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.keyboardEventHandler_ = function(evt) {
|
||||
// Only react when the drawer is open.
|
||||
if (evt.keyCode === this.Keycodes_.ESCAPE &&
|
||||
this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
|
||||
this.toggleDrawer();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles changes in screen size.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.screenSizeHandler_ = function() {
|
||||
if (this.screenSizeMediaQuery_.matches) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
|
||||
// Collapse drawer (if any) when moving to a large screen size.
|
||||
if (this.drawer_) {
|
||||
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles events of drawer button.
|
||||
*
|
||||
* @param {Event} evt The event that fired.
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.drawerToggleHandler_ = function(evt) {
|
||||
if (evt && (evt.type === 'keydown')) {
|
||||
if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
|
||||
// prevent scrolling in drawer nav
|
||||
evt.preventDefault();
|
||||
} else {
|
||||
// prevent other keys
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.toggleDrawer();
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles (un)setting the `is-animating` class
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.headerTransitionEndHandler_ = function() {
|
||||
this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles expanding the header on click
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.headerClickHandler_ = function() {
|
||||
if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset tab state, dropping active classes
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.resetTabState_ = function(tabBar) {
|
||||
for (var k = 0; k < tabBar.length; k++) {
|
||||
tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset panel state, droping active classes
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.resetPanelState_ = function(panels) {
|
||||
for (var j = 0; j < panels.length; j++) {
|
||||
panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle drawer state
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialLayout.prototype.toggleDrawer = function() {
|
||||
var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
|
||||
this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
|
||||
// Set accessibility properties.
|
||||
if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
|
||||
this.drawer_.setAttribute('aria-hidden', 'false');
|
||||
drawerButton.setAttribute('aria-expanded', 'true');
|
||||
} else {
|
||||
this.drawer_.setAttribute('aria-hidden', 'true');
|
||||
drawerButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
};
|
||||
MaterialLayout.prototype['toggleDrawer'] =
|
||||
MaterialLayout.prototype.toggleDrawer;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialLayout.prototype.init = function() {
|
||||
if (this.element_) {
|
||||
var container = document.createElement('div');
|
||||
container.classList.add(this.CssClasses_.CONTAINER);
|
||||
|
||||
var focusedElement = this.element_.querySelector(':focus');
|
||||
|
||||
this.element_.parentElement.insertBefore(container, this.element_);
|
||||
this.element_.parentElement.removeChild(this.element_);
|
||||
container.appendChild(this.element_);
|
||||
|
||||
if (focusedElement) {
|
||||
focusedElement.focus();
|
||||
}
|
||||
|
||||
var directChildren = this.element_.childNodes;
|
||||
var numChildren = directChildren.length;
|
||||
for (var c = 0; c < numChildren; c++) {
|
||||
var child = directChildren[c];
|
||||
if (child.classList &&
|
||||
child.classList.contains(this.CssClasses_.HEADER)) {
|
||||
this.header_ = child;
|
||||
}
|
||||
|
||||
if (child.classList &&
|
||||
child.classList.contains(this.CssClasses_.DRAWER)) {
|
||||
this.drawer_ = child;
|
||||
}
|
||||
|
||||
if (child.classList &&
|
||||
child.classList.contains(this.CssClasses_.CONTENT)) {
|
||||
this.content_ = child;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('pageshow', function(e) {
|
||||
if (e.persisted) { // when page is loaded from back/forward cache
|
||||
// trigger repaint to let layout scroll in safari
|
||||
this.element_.style.overflowY = 'hidden';
|
||||
requestAnimationFrame(function() {
|
||||
this.element_.style.overflowY = '';
|
||||
}.bind(this));
|
||||
}
|
||||
}.bind(this), false);
|
||||
|
||||
if (this.header_) {
|
||||
this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
|
||||
}
|
||||
|
||||
var mode = this.Mode_.STANDARD;
|
||||
|
||||
if (this.header_) {
|
||||
if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
|
||||
mode = this.Mode_.SEAMED;
|
||||
} else if (this.header_.classList.contains(
|
||||
this.CssClasses_.HEADER_WATERFALL)) {
|
||||
mode = this.Mode_.WATERFALL;
|
||||
this.header_.addEventListener('transitionend',
|
||||
this.headerTransitionEndHandler_.bind(this));
|
||||
this.header_.addEventListener('click',
|
||||
this.headerClickHandler_.bind(this));
|
||||
} else if (this.header_.classList.contains(
|
||||
this.CssClasses_.HEADER_SCROLL)) {
|
||||
mode = this.Mode_.SCROLL;
|
||||
container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
|
||||
}
|
||||
|
||||
if (mode === this.Mode_.STANDARD) {
|
||||
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
if (this.tabBar_) {
|
||||
this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
}
|
||||
} else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
|
||||
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
if (this.tabBar_) {
|
||||
this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
}
|
||||
} else if (mode === this.Mode_.WATERFALL) {
|
||||
// Add and remove shadows depending on scroll position.
|
||||
// Also add/remove auxiliary class for styling of the compact version of
|
||||
// the header.
|
||||
this.content_.addEventListener('scroll',
|
||||
this.contentScrollHandler_.bind(this));
|
||||
this.contentScrollHandler_();
|
||||
}
|
||||
}
|
||||
|
||||
// Add drawer toggling button to our layout, if we have an openable drawer.
|
||||
if (this.drawer_) {
|
||||
var drawerButton = this.element_.querySelector('.' +
|
||||
this.CssClasses_.DRAWER_BTN);
|
||||
if (!drawerButton) {
|
||||
drawerButton = document.createElement('div');
|
||||
drawerButton.setAttribute('aria-expanded', 'false');
|
||||
drawerButton.setAttribute('role', 'button');
|
||||
drawerButton.setAttribute('tabindex', '0');
|
||||
drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
|
||||
|
||||
var drawerButtonIcon = document.createElement('i');
|
||||
drawerButtonIcon.classList.add(this.CssClasses_.ICON);
|
||||
drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
|
||||
drawerButton.appendChild(drawerButtonIcon);
|
||||
}
|
||||
|
||||
if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
|
||||
//If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
|
||||
drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
|
||||
} else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
|
||||
//If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
|
||||
drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
|
||||
}
|
||||
|
||||
drawerButton.addEventListener('click',
|
||||
this.drawerToggleHandler_.bind(this));
|
||||
|
||||
drawerButton.addEventListener('keydown',
|
||||
this.drawerToggleHandler_.bind(this));
|
||||
|
||||
// Add a class if the layout has a drawer, for altering the left padding.
|
||||
// Adds the HAS_DRAWER to the elements since this.header_ may or may
|
||||
// not be present.
|
||||
this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
|
||||
|
||||
// If we have a fixed header, add the button to the header rather than
|
||||
// the layout.
|
||||
if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
|
||||
this.header_.insertBefore(drawerButton, this.header_.firstChild);
|
||||
} else {
|
||||
this.element_.insertBefore(drawerButton, this.content_);
|
||||
}
|
||||
|
||||
var obfuscator = document.createElement('div');
|
||||
obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
|
||||
this.element_.appendChild(obfuscator);
|
||||
obfuscator.addEventListener('click',
|
||||
this.drawerToggleHandler_.bind(this));
|
||||
this.obfuscator_ = obfuscator;
|
||||
|
||||
this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
|
||||
this.drawer_.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
// Keep an eye on screen size, and add/remove auxiliary class for styling
|
||||
// of small screens.
|
||||
this.screenSizeMediaQuery_ = window.matchMedia(
|
||||
/** @type {string} */ (this.Constant_.MAX_WIDTH));
|
||||
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
|
||||
this.screenSizeHandler_();
|
||||
|
||||
// Initialize tabs, if any.
|
||||
if (this.header_ && this.tabBar_) {
|
||||
this.element_.classList.add(this.CssClasses_.HAS_TABS);
|
||||
|
||||
var tabContainer = document.createElement('div');
|
||||
tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
|
||||
this.header_.insertBefore(tabContainer, this.tabBar_);
|
||||
this.header_.removeChild(this.tabBar_);
|
||||
|
||||
var leftButton = document.createElement('div');
|
||||
leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
|
||||
leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
|
||||
var leftButtonIcon = document.createElement('i');
|
||||
leftButtonIcon.classList.add(this.CssClasses_.ICON);
|
||||
leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
|
||||
leftButton.appendChild(leftButtonIcon);
|
||||
leftButton.addEventListener('click', function() {
|
||||
this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
|
||||
}.bind(this));
|
||||
|
||||
var rightButton = document.createElement('div');
|
||||
rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
|
||||
rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
|
||||
var rightButtonIcon = document.createElement('i');
|
||||
rightButtonIcon.classList.add(this.CssClasses_.ICON);
|
||||
rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
|
||||
rightButton.appendChild(rightButtonIcon);
|
||||
rightButton.addEventListener('click', function() {
|
||||
this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
|
||||
}.bind(this));
|
||||
|
||||
tabContainer.appendChild(leftButton);
|
||||
tabContainer.appendChild(this.tabBar_);
|
||||
tabContainer.appendChild(rightButton);
|
||||
|
||||
// Add and remove tab buttons depending on scroll position and total
|
||||
// window size.
|
||||
var tabUpdateHandler = function() {
|
||||
if (this.tabBar_.scrollLeft > 0) {
|
||||
leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
|
||||
} else {
|
||||
leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
|
||||
if (this.tabBar_.scrollLeft <
|
||||
this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
|
||||
rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
|
||||
} else {
|
||||
rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.tabBar_.addEventListener('scroll', tabUpdateHandler);
|
||||
tabUpdateHandler();
|
||||
|
||||
// Update tabs when the window resizes.
|
||||
var windowResizeHandler = function() {
|
||||
// Use timeouts to make sure it doesn't happen too often.
|
||||
if (this.resizeTimeoutId_) {
|
||||
clearTimeout(this.resizeTimeoutId_);
|
||||
}
|
||||
this.resizeTimeoutId_ = setTimeout(function() {
|
||||
tabUpdateHandler();
|
||||
this.resizeTimeoutId_ = null;
|
||||
}.bind(this), /** @type {number} */ (this.Constant_.RESIZE_TIMEOUT));
|
||||
}.bind(this);
|
||||
|
||||
window.addEventListener('resize', windowResizeHandler);
|
||||
|
||||
if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
|
||||
this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
|
||||
}
|
||||
|
||||
// Select element tabs, document panels
|
||||
var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
|
||||
var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
|
||||
|
||||
// Create new tabs for each tab element
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
new MaterialLayoutTab(tabs[i], tabs, panels, this);
|
||||
}
|
||||
}
|
||||
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor for an individual tab.
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} tab The HTML element for the tab.
|
||||
* @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
|
||||
* @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
|
||||
* @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
|
||||
*/
|
||||
function MaterialLayoutTab(tab, tabs, panels, layout) {
|
||||
|
||||
/**
|
||||
* Auxiliary method to programmatically select a tab in the UI.
|
||||
*/
|
||||
function selectTab() {
|
||||
var href = tab.href.split('#')[1];
|
||||
var panel = layout.content_.querySelector('#' + href);
|
||||
layout.resetTabState_(tabs);
|
||||
layout.resetPanelState_(panels);
|
||||
tab.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
|
||||
if (layout.tabBar_.classList.contains(
|
||||
layout.CssClasses_.JS_RIPPLE_EFFECT)) {
|
||||
var rippleContainer = document.createElement('span');
|
||||
rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
|
||||
rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
|
||||
var ripple = document.createElement('span');
|
||||
ripple.classList.add(layout.CssClasses_.RIPPLE);
|
||||
rippleContainer.appendChild(ripple);
|
||||
tab.appendChild(rippleContainer);
|
||||
}
|
||||
|
||||
tab.addEventListener('click', function(e) {
|
||||
if (tab.getAttribute('href').charAt(0) === '#') {
|
||||
e.preventDefault();
|
||||
selectTab();
|
||||
}
|
||||
});
|
||||
|
||||
tab.show = selectTab;
|
||||
|
||||
tab.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
var href = tab.href.split('#')[1];
|
||||
var panel = layout.content_.querySelector('#' + href);
|
||||
layout.resetTabState_(tabs);
|
||||
layout.resetPanelState_(panels);
|
||||
tab.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
});
|
||||
}
|
||||
window['MaterialLayoutTab'] = MaterialLayoutTab;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialLayout,
|
||||
classAsString: 'MaterialLayout',
|
||||
cssClass: 'mdl-js-layout'
|
||||
});
|
||||
})();
|
||||
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-drawer-demo.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-drawer-demo.html
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__fixed-drawer {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__fixed-drawer .mdl-layout__content {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "fixed-drawer.html" %}
|
||||
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-drawer.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-drawer.html
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</main>
|
||||
</div>
|
||||
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header-demo.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header-demo.html
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__fixed-header {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__fixed-header .mdl-layout__content {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "fixed-header.html" %}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__fixed-header-drawer {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "fixed-header-drawer.html" %}
|
||||
33
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header-drawer.html
vendored
Normal file
33
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header-drawer.html
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!-- The drawer is always open in large screens. The header is always shown,
|
||||
even in small screens. -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
|
||||
mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
||||
mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon"
|
||||
for="fixed-header-drawer-exp">
|
||||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample"
|
||||
id="fixed-header-drawer-exp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</main>
|
||||
</div>
|
||||
30
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header.html
vendored
Normal file
30
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-header.html
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!-- Always shows a header, even in smaller screens. -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We hide it in small screens. -->
|
||||
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</main>
|
||||
</div>
|
||||
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-tabs-demo.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-tabs-demo.html
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__fixed-tabs {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__fixed-tabs .mdl-layout__content {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "fixed-tabs.html" %}
|
||||
30
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-tabs.html
vendored
Normal file
30
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/fixed-tabs.html
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!-- Simple header with fixed tabs. -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
|
||||
mdl-layout--fixed-tabs">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
|
||||
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
|
||||
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrollable-tabs-demo.html
vendored
Normal file
15
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrollable-tabs-demo.html
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__scrollable-tabs {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__scrollable-tabs .mdl-layout__content {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "scrollable-tabs.html" %}
|
||||
41
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrollable-tabs.html
vendored
Normal file
41
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrollable-tabs.html
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!-- Simple header with scrollable tabs. -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
|
||||
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
|
||||
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
|
||||
<a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
|
||||
<a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
|
||||
<a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__scrolling-header {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__scrolling-header .page-content {
|
||||
height: 600px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "scrolling-header.html" %}
|
||||
31
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrolling-header.html
vendored
Normal file
31
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/scrolling-header.html
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!-- Uses a header that scrolls with the text, rather than staying
|
||||
locked at the top -->
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</main>
|
||||
</div>
|
||||
12
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/transparent-demo.html
vendored
Normal file
12
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/transparent-demo.html
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__transparent {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "transparent.html" %}
|
||||
41
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/transparent.html
vendored
Normal file
41
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/transparent.html
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!-- Uses a transparent header that draws on top of the layout's background -->
|
||||
<style>
|
||||
.demo-layout-transparent {
|
||||
background: url('../assets/demos/transparent.jpg') center / cover;
|
||||
}
|
||||
.demo-layout-transparent .mdl-layout__header,
|
||||
.demo-layout-transparent .mdl-layout__drawer-button {
|
||||
/* This background is dark, so we set text to white. Use 87% black instead if
|
||||
your background is light. */
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<style>
|
||||
.demo-layout.demo-layout__waterfall-header {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.demo-layout.demo-layout__waterfall-header .page-content {
|
||||
height: 600px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "waterfall-header.html" %}
|
||||
51
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/waterfall-header.html
vendored
Normal file
51
dashboard-ui/bower_components/material-design-lite/src/layout/snippets/waterfall-header.html
vendored
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!-- Uses a header that contracts as the page scrolls down. -->
|
||||
<style>
|
||||
.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--waterfall">
|
||||
<!-- Top row, always visible -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
||||
mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon"
|
||||
for="waterfall-exp">
|
||||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample"
|
||||
id="waterfall-exp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom row, not visible on scroll -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Title</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
<a class="mdl-navigation__link" href="">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content"><!-- Your content goes here --></div>
|
||||
</main>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue