Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-06 14:50:21 -05:00
Code Issues Activity

feat: move modal css to an independent file

Browse source
This commit is contained in:
Juanfran 2024-05-21 14:04:00 +02:00
parent 3e9d116662
commit b800f20e55
5 changed files with 77 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
libs/plugins-runtime/src/index.ts
View file

@ -1,5 +1,5 @@
import 'ses';
import './lib/plugin-modal';
import './lib/modal/plugin-modal';
import { ɵloadPlugin, setContext } from './lib/load-plugin.js';
import * as api from './lib/api/index.js';

2
libs/plugins-runtime/src/lib/api/index.ts
View file

@ -17,7 +17,7 @@ import { Manifest, Permissions } from '../models/manifest.model.js';
import { OpenUIOptions } from '../models/open-ui-options.model.js';
import openUIApi from './openUI.api.js';
import { z } from 'zod';
import type { PluginModalElement } from '../plugin-modal.js';
import type { PluginModalElement } from '../modal/plugin-modal.js';
type Callback<T> = (message: T) => void;

2
libs/plugins-runtime/src/lib/create-modal.ts
View file

@ -1,6 +1,6 @@
import type { OpenUIOptions } from './models/open-ui-options.model.js';
import type { PenpotTheme } from '@penpot/plugin-types';
import type { PluginModalElement } from './plugin-modal.js';
import type { PluginModalElement } from './modal/plugin-modal.js';
export function createModal(
name: string,

79
libs/plugins-runtime/src/lib/plugin-modal.ts → libs/plugins-runtime/src/lib/modal/plugin-modal.ts
View file

@ -2,7 +2,8 @@ const closeSvg = `
<svg width="16" height="16"xmlns="http://www.w3.org/2000/svg" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" class="fills"/><g class="strokes"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>`;
import type { PenpotTheme } from '@penpot/plugin-types';
import { dragHandler } from './drag-handler.js';
import { dragHandler } from '../drag-handler.js';
import modalCss from './plugin.modal.css?inline';
export class PluginModalElement extends HTMLElement {
constructor() {
@ -39,6 +40,9 @@ export class PluginModalElement extends HTMLElement {
this.#wrapper = document.createElement('div');
this.#wrapper.classList.add('wrapper');
this.#wrapper.style.inlineSize = `${width}px`;
this.#wrapper.style.blockSize = `${height}px`;
this.#dragEvents = dragHandler(this.#wrapper);
const header = document.createElement('div');
@ -93,78 +97,7 @@ export class PluginModalElement extends HTMLElement {
this.#wrapper.appendChild(iframe);
const style = document.createElement('style');
style.textContent = `
:host {
--spacing-4: 0.25rem;
--spacing-8: calc(var(--spacing-4) * 2);
--spacing-12: calc(var(--spacing-4) * 3);
--spacing-16: calc(var(--spacing-4) * 4);
--spacing-20: calc(var(--spacing-4) * 5);
--spacing-24: calc(var(--spacing-4) * 6);
--spacing-28: calc(var(--spacing-4) * 7);
--spacing-32: calc(var(--spacing-4) * 8);
--spacing-36: calc(var(--spacing-4) * 9);
--spacing-40: calc(var(--spacing-4) * 10);
--font-weight-regular: 400;
--font-weight-bold: 500;
--font-line-height-s: 1.2;
--font-line-height-m: 1.4;
--font-line-height-l: 1.5;
--font-size-s: 12px;
--font-size-m: 14px;
--font-size-l: 16px;
}
[data-theme] {
background-color: var(--color-background-primary);
color: var(--color-foreground-secondary);
}
.wrapper {
display: flex;
flex-direction: column;
position: fixed;
inset-block-end: 10px;
inset-inline-start: 10px;
z-index: 1000;
padding: 25px;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
inline-size: ${width}px;
block-size: ${height}px;
}
.header {
align-items: center;
display: flex;
justify-content: space-between;
border-block-end: 2px solid var(--color-background-quaternary);
padding-block-end: var(--spacing-4);
margin-block-end: var(--spacing-20);
}
button {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
h1 {
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
margin: 0;
margin-inline-end: var(--spacing-4);
user-select: none;
}
iframe {
border: none;
inline-size: 100%;
block-size: 100%;
}
`;
style.textContent = modalCss;
this.shadowRoot.appendChild(style);
}

68
libs/plugins-runtime/src/lib/modal/plugin.modal.css Normal file
View file

@ -0,0 +1,68 @@
:host {
--spacing-4: 0.25rem;
--spacing-8: calc(var(--spacing-4) * 2);
--spacing-12: calc(var(--spacing-4) * 3);
--spacing-16: calc(var(--spacing-4) * 4);
--spacing-20: calc(var(--spacing-4) * 5);
--spacing-24: calc(var(--spacing-4) * 6);
--spacing-28: calc(var(--spacing-4) * 7);
--spacing-32: calc(var(--spacing-4) * 8);
--spacing-36: calc(var(--spacing-4) * 9);
--spacing-40: calc(var(--spacing-4) * 10);
--font-weight-regular: 400;
--font-weight-bold: 500;
--font-line-height-s: 1.2;
--font-line-height-m: 1.4;
--font-line-height-l: 1.5;
--font-size-s: 12px;
--font-size-m: 14px;
--font-size-l: 16px;
}
[data-theme] {
background-color: var(--color-background-primary);
color: var(--color-foreground-secondary);
}
.wrapper {
display: flex;
flex-direction: column;
position: fixed;
inset-block-end: 10px;
inset-inline-start: 10px;
z-index: 1000;
padding: 25px;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.header {
align-items: center;
display: flex;
justify-content: space-between;
border-block-end: 2px solid var(--color-background-quaternary);
padding-block-end: var(--spacing-4);
margin-block-end: var(--spacing-20);
}
button {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
h1 {
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
margin: 0;
margin-inline-end: var(--spacing-4);
user-select: none;
}
iframe {
border: none;
inline-size: 100%;
block-size: 100%;
}