Skip to content

Commit

Permalink
feat: initial project-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
dylandepass committed Jan 5, 2024
1 parent 5f4a842 commit 37b53a1
Show file tree
Hide file tree
Showing 11 changed files with 354 additions and 138 deletions.
27 changes: 1 addition & 26 deletions custom-elements.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,7 @@
"kind": "class",
"description": "",
"name": "AEMSidekick",
"members": [
{
"kind": "method",
"name": "getTheme"
},
{
"kind": "field",
"name": "theme",
"privacy": "public",
"type": {
"text": "string"
},
"default": "'light'",
"attribute": "theme"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "string"
},
"default": "'light'",
"fieldName": "theme"
}
],
"members": [],
"superclass": {
"name": "MobxLitElement",
"package": "@adobe/lit-mobx"
Expand Down
2 changes: 1 addition & 1 deletion src/extension/app/aem-sidekick.css.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const style = css`
display: none;
}
action-bar {
plugin-action-bar {
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
Expand Down
43 changes: 6 additions & 37 deletions src/extension/app/aem-sidekick.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

/* eslint-disable wc/no-constructor-params, wc/guard-super-call */
/* eslint-disable wc/no-constructor-params */

import { html } from 'lit';
import { MobxLitElement } from '@adobe/lit-mobx';
Expand All @@ -20,17 +20,12 @@ import { appStore } from './store/app.js';

@customElement('aem-sidekick')
export class AEMSidekick extends MobxLitElement {
static properties = {
theme: { type: String },
};

static get styles() {
return [style];
}

constructor(config) {
super();
this.theme = 'light';
appStore.loadContext(this, config);

this.addEventListener('contextloaded', (data) => {
Expand All @@ -39,39 +34,13 @@ export class AEMSidekick extends MobxLitElement {
});
}

async connectedCallback() {
super.connectedCallback();
this.getTheme();

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
// istanbul ignore next
this.getTheme();
});
}

disconnectedCallback() {
super.disconnectedCallback();
}

getTheme() {
this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}

render() {
return html`
<sp-theme
theme="express"
color=${this.theme === 'dark' ? 'dark' : 'light'}
scale="medium"
>
<main>
<action-bar></action-bar>
<toast-container></toast-container>
<modal-container></modal-container>
</main>
</sp-theme>
<theme-wrapper>
<plugin-action-bar></plugin-action-bar>
<toast-container></toast-container>
<modal-container></modal-container>
</theme-wrapper>
`;
}
}
41 changes: 1 addition & 40 deletions src/extension/app/components/action-bar/action-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { appStore } from '../../store/app.js';

@customElement('action-bar')
export class ActionBar extends LitElement {
Expand All @@ -24,50 +23,12 @@ export class ActionBar extends LitElement {
background-color: var(--spectrum-global-color-gray-200);
border: 1px solid var(--spectrum-global-color-gray-300);
}
.action-bar sp-action-group {
padding: 8px;
}
`;

openModal() {
appStore.showWait('Previewing...');
}

closeModal() {
appStore.hideWait();
}

showToast() {
appStore.showToast('This is a toast message');
}

render() {
return html`
<div class="action-bar">
<sp-action-group>
<sp-action-button quiet @click=${this.openModal}>
<sp-icon-play slot="icon"></sp-icon-play>
</sp-action-button>
<sp-action-button quiet @click=${this.closeModal}>
<sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>
<sp-action-button quiet @click=${this.showToast}>
<sp-icon-refresh slot="icon"></sp-icon-refresh>
</sp-action-button>
</sp-action-group>
<sp-divider size="s" vertical></sp-divider>
<sp-action-group>
<sp-action-button quiet>
<sp-icon-share slot="icon"></sp-icon-share>
</sp-action-button>
</sp-action-group>
<sp-divider size="s" vertical></sp-divider>
<sp-action-group>
<sp-action-button quiet>
<sp-icon-real-time-customer-profile slot="icon"></sp-icon-real-time-customer-profile>
</sp-action-button>
</sp-action-group>
<slot></slot>
</div>
`;
}
Expand Down
53 changes: 53 additions & 0 deletions src/extension/app/components/plugin/plugin-action-bar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you 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 REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('plugin-action-bar')
export class PluginActionBar extends LitElement {
static styles = css`
sp-action-group {
padding: 8px;
}
`;

render() {
return html`
<action-bar>
<sp-action-group>
<sp-action-button quiet>
<sp-icon-play slot="icon"></sp-icon-play>
</sp-action-button>
<sp-action-button quiet>
<sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>
<sp-action-button quiet>
<sp-icon-refresh slot="icon"></sp-icon-refresh>
</sp-action-button>
</sp-action-group>
<sp-divider size="s" vertical></sp-divider>
<sp-action-group>
<sp-action-button quiet>
<sp-icon-share slot="icon"></sp-icon-share>
</sp-action-button>
</sp-action-group>
<sp-divider size="s" vertical></sp-divider>
<sp-action-group>
<sp-action-button quiet>
<sp-icon-real-time-customer-profile slot="icon"></sp-icon-real-time-customer-profile>
</sp-action-button>
</sp-action-group>
</action-bar>
`;
}
}
64 changes: 64 additions & 0 deletions src/extension/app/components/theme/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you 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 REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

/* eslint-disable wc/no-constructor-params, wc/guard-super-call */

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('theme-wrapper')
export class ThemeWrapper extends LitElement {
static properties = {
theme: { type: String },
};

constructor() {
super();
this.theme = 'light';
}

async connectedCallback() {
super.connectedCallback();

this.getTheme();

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.onChange);
}

onChange = () => {
this.getTheme();
};

disconnectedCallback() {
super.disconnectedCallback();

window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.onChange);
}

getTheme() {
this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}

render() {
return html`
<sp-theme
theme="express"
color=${this.theme === 'dark' ? 'dark' : 'light'}
scale="medium"
>
<slot></slot>
</sp-theme>
`;
}
}
51 changes: 51 additions & 0 deletions src/extension/app/config-picker.css.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you 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 REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

import { css } from 'lit';

export const style = css`
:host {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 9999;
}
:host([open='true']) {
display: block;
}
:host([open='false']) {
display: none;
}
action-bar {
position: absolute;
left: 50%;
transform: translate(-50%, 0px);
bottom: 150px;
pointer-events: auto;
}
action-bar sp-action-group {
padding: 8px;
}
action-bar sp-action-group span {
padding-bottom: 3px;
padding-left: 8px;
margin: 0;
display: flex;
align-items: center;
}
`;
Loading

0 comments on commit 37b53a1

Please sign in to comment.