squash commits
This commit is contained in:
MrPlatnum committed
commit
0f545c5e4d
611 files changed
+272565
No files matched your search
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2020 Google LLC. 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 {css, CSSResult} from 'lit';
|
||||
export const styles: CSSResult = css`:host {
|
||||
font-family: Roboto;
|
||||
/* MATERIAL_COLOR_GOOGLE_GREY_300 */
|
||||
color: #dadce0;
|
||||
--me-theme-focused-color: #4285f4;
|
||||
/* MATERIAL_COLOR_GOOGLE_GREY_800 */
|
||||
--me-theme-tab-background-color: #3c4043;
|
||||
/* MATERIAL_COLOR_GOOGLE_GREY_300 */
|
||||
--me-theme-tab-default-color: #dadce0;
|
||||
/* MATERIAL_COLOR_GOOGLE_BLUE_500 */
|
||||
--me-theme-tab-selected-color: #4285f4;
|
||||
/* MATERIAL_COLOR_GOOGLE_GREY_900 */
|
||||
--me-theme-container-background-color: #202124;
|
||||
--mdc-theme-primary: var(--me-theme-tab-selected-color);
|
||||
--mdc-text-transform: none;
|
||||
--mdc-tab-color-default: var(--me-theme-tab-default-color);
|
||||
--mdc-tab-text-label-color-default: var(--me-theme-tab-default-color);
|
||||
--mdc-tab-stacked-height: 100px;
|
||||
--mdc-tab-min-width: 48px;
|
||||
background: var(--me-theme-container-background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host .exportTab.isFocused {
|
||||
background-color: var(--me-theme-tab-background-color);
|
||||
outline: var(--me-theme-focused-color) solid 1px;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.TabHeader {
|
||||
background-color: var(--me-theme-tab-background-color);
|
||||
font-family: 'Google Sans';
|
||||
font-size: 14px;
|
||||
letter-spacing: .25px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.TabPanel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.TabPanel[selected] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::slotted(span) {
|
||||
display: contents;
|
||||
}
|
||||
`;
|
||||
|
||||
export const tabStyles: CSSResult = css`
|
||||
.mdc-tab {
|
||||
min-width: var(--mdc-tab-min-width, 48px);
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC. 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 {TabBase} from '@material/mwc-tab/mwc-tab-base';
|
||||
import {styles as baseStyles} from '@material/mwc-tab/mwc-tab.css';
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {tabStyles} from './styles.css';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'me-tab': Tab;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('me-tab')
|
||||
export class Tab extends TabBase {
|
||||
// MWC tab did not allow us to modify min-width, so we have to override the
|
||||
// styles ourselves. M2 MWC has sent out its final release as they are now
|
||||
// focusing on M3 making this safe to override according to:
|
||||
// https://lit-and-friends.slack.com/archives/CC0Q3PRCL/p1651599492903519
|
||||
static override styles: any = [
|
||||
baseStyles,
|
||||
tabStyles,
|
||||
|
||||
// This cast is needed because MWC uses Lit 2, while we've updated to Lit 3.
|
||||
// The code is mutually compatible though.
|
||||
] as typeof TabBase.styles;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2020 Google LLC. 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 '@material/mwc-tab-bar';
|
||||
|
||||
import {html, LitElement} from 'lit';
|
||||
import {customElement, property} from 'lit/decorators.js';
|
||||
|
||||
import {styles} from './styles.css.js';
|
||||
import './tab';
|
||||
|
||||
/**
|
||||
* A tabbed panel.
|
||||
*/
|
||||
@customElement('me-tabs')
|
||||
export class Tabs extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
get panels() {
|
||||
const slot = this.shadowRoot!.querySelector('slot');
|
||||
return slot &&
|
||||
slot.assignedElements().filter(e => e instanceof TabbedPanel) ||
|
||||
[];
|
||||
}
|
||||
|
||||
renderPanelIcon(panel: Element) {
|
||||
if (panel instanceof TabbedPanel) {
|
||||
return html`
|
||||
<me-tab
|
||||
icon='${panel.icon}'
|
||||
label='${panel.label}'
|
||||
></me-tab>`;
|
||||
}
|
||||
return html``;
|
||||
}
|
||||
|
||||
// Mystery.. But this is required for mwc-tab-bar to correctly select the
|
||||
// initial panel.
|
||||
firstUpdated() {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="TabHeader">
|
||||
<mv-link></mv-link>
|
||||
<mwc-tab-bar
|
||||
@MDCTabBar:activated=${this.tabActivated}>
|
||||
${this.panels.map(this.renderPanelIcon)}
|
||||
</mwc-tab-bar>
|
||||
</div>
|
||||
<div class="TabPanelContainer">
|
||||
<slot @slotchange=${() => {
|
||||
this.requestUpdate();
|
||||
}}></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
tabActivated(event: CustomEvent<{index: number}>) {
|
||||
const targetIndex = event.detail.index;
|
||||
this.panels.forEach((panel, index) => {
|
||||
(panel as TabbedPanel).selected = index === targetIndex;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A panel of content, plus an icon and label to display in the tab bar.
|
||||
*/
|
||||
@customElement('me-tabbed-panel')
|
||||
export class TabbedPanel extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
@property({type: String, reflect: true}) icon = '';
|
||||
@property({type: String}) label = '';
|
||||
@property({type: Boolean}) selected = false;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<slot class="TabPanel" ?selected=${this.selected}></slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'me-tabbed-panel': TabbedPanel;
|
||||
'me-tabs': Tabs;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user