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

fix: u#7717 t#8012 ux-ui review table plugin

Browse source
This commit is contained in:
Marina López 2024-06-04 12:48:59 +02:00
parent c474fa2df6
commit 64016f8255
4 changed files with 152 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
apps/table-plugin/src/app/app.component.css
View file

@ -40,7 +40,7 @@
}
hr {
border-block-end: 2px solid var(--db-quaternary);
border-block-end: 2px solid var(--background-quaternary);
margin-block: var(--spacing-24);
}
@ -94,9 +94,9 @@ hr {
}
.tag {
border: 1px solid var(--da-primary);
border: 1px solid var(--accent-primary);
border-radius: var(--spacing-4);
color: var(--da-primary);
color: var(--accent-primary);
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
line-height: var(--font-line-height-s);
@ -121,3 +121,35 @@ hr {
margin-inline-start: var(--spacing-8);
}
}
:host[data-theme='light'] {
& .input-container {
background-color: var(--la-primary);
color: var(--lb-primary);
}
& .table-grid {
background-color: var(--lb-quaternary);
}
& .square {
border: 1px solid var(--df-secondary);
&.active {
background-color: var(--la-tertiary);
}
&:hover {
background-color: var(--la-primary);
}
}
& .error {
background-color: var(--error-200);
border: 1px solid var(--error-500);
& .message {
color: var(--db-primary);
}
}
}

12
apps/table-plugin/src/plugin.ts
View file

@ -1,6 +1,6 @@
import { PluginMessageEvent } from './app/model';
penpot.ui.open('Plugin table', `?theme=${penpot.getTheme()}`, {
penpot.ui.open('TABLE PLUGIN', `?theme=${penpot.getTheme()}`, {
width: 235,
height: 564,
});
@ -29,6 +29,8 @@ penpot.ui.onMessage<PluginMessageEvent>((message) => {
frame.y = viewport.center.y - 200;
frame.resize(numCols * 160, numRows * 50);
frame.borderRadius = 8;
frame.horizontalSizing = 'fix';
frame.verticalSizing = 'auto';
// create grid
const grid = frame.addGridLayout();
@ -65,7 +67,7 @@ penpot.ui.onMessage<PluginMessageEvent>((message) => {
if (board.layoutChild) {
board.layoutChild.horizontalSizing = 'fill';
board.layoutChild.verticalSizing = 'fill';
board.layoutChild.verticalSizing = 'auto';
}
if (message.content.options.alternateRows && !(row % 2)) {
@ -105,13 +107,17 @@ penpot.ui.onMessage<PluginMessageEvent>((message) => {
}
if (text) {
text.growType = 'auto-width';
text.growType = 'auto-height';
text.fontFamily = 'Work Sans';
text.fontId = 'gfont-work-sans';
text.fontVariantId = row === 0 ? '500' : 'regular';
text.fontSize = '12';
text.fontWeight = row === 0 ? '500' : '400';
board.appendChild(text);
if (text.layoutChild) {
text.layoutChild.horizontalSizing = 'fill';
text.layoutChild.verticalSizing = 'fix';
}
}
}
}

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

@ -36,6 +36,11 @@
padding: 25px;
border-radius: 15px;
border: 2px solid var(--color-background-quaternary);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
&[data-theme='light'] {
border: none;
}
}
.header {

208
libs/plugins-styles/src/lib/components/checkbox.css
View file

@ -1,122 +1,120 @@
.checkbox-container {
align-items: center;
color: var(--df-secondary);
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center;
color: var(--foreground-secondary);
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
& .checkbox-input[type="checkbox"] {
appearance: none;
block-size: var(--spacing-16);
border-radius: var(--spacing-4);
box-sizing: border-box;
cursor: pointer;
inline-size: var(--spacing-16);
margin: 0;
position: relative;
transition: 120ms all ease-in-out;
& .checkbox-input[type='checkbox'] {
appearance: none;
block-size: var(--spacing-16);
border-radius: var(--spacing-4);
box-sizing: border-box;
cursor: pointer;
inline-size: var(--spacing-16);
margin: 0;
position: relative;
transition: 120ms all ease-in-out;
&::after {
block-size: 8px;
border-style: solid;
border-width: 0;
content: "";
display: flex;
inline-size: 5px;
margin-block-start: 2px;
margin-inline-start: 5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
&:focus-visible, &:focus-within {
outline: none;
}
&::after {
block-size: 8px;
border-style: solid;
border-width: 0;
content: '';
display: flex;
inline-size: 5px;
margin-block-start: 2px;
margin-inline-start: 5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
& label {
cursor: pointer;
margin-inline-start: var(--spacing-8);
&:focus-visible,
&:focus-within {
outline: none;
}
}
& label {
cursor: pointer;
margin-inline-start: var(--spacing-8);
}
}
.checkbox-hidden {
block-size: 1px;
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
inline-size: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
block-size: 1px;
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
inline-size: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
[data-theme="dark"] {
.checkbox-input[type="checkbox"] {
background-color: var(--db-quaternary);
border: 1px solid var(--df-secondary);
[data-theme='dark'] {
.checkbox-input[type='checkbox'] {
background-color: var(--db-quaternary);
border: 1px solid var(--df-secondary);
&::after {
border-color: var(--db-primary);
}
&:hover {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary-muted);
}
&:focus {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary);
}
&:checked {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
}
&:checked::after{
border-color: var(--db-primary);
border-width: 0 2px 2px 0;
}
&::after {
border-color: var(--db-primary);
}
&:hover {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary-muted);
}
&:focus {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary);
}
&:checked {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
}
&:checked::after {
border-color: var(--db-primary);
border-width: 0 2px 2px 0;
}
}
}
[data-theme="light"] {
.checkbox-input[type="checkbox"] {
background-color: var(--lb-quaternary);
border: 1px solid var(--la-primary);
[data-theme='light'] {
.checkbox-input[type='checkbox'] {
background-color: var(--lb-quaternary);
border: 1px solid var(--la-primary);
&::after {
border-color: var(--db-primary);
}
&:hover {
background-color: var(--lf-secondary);
border: 1px solid var(--lf-secondary);
}
&:focus {
border: 1px solid var(--lf-secondary);
}
&:checked {
background-color: var(--la-primary);
border: 1px solid var(--la-primary);
}
&:checked::after{
border-color: var(--lb-primary);
border-width: 0 2px 2px 0;
}
&::after {
border-color: var(--db-primary);
}
}
&:hover {
background-color: var(--lf-secondary);
border: 1px solid var(--lf-secondary);
}
&:focus {
border: 1px solid var(--lf-secondary);
}
&:checked {
background-color: var(--la-primary);
border: 1px solid var(--la-primary);
}
&:checked::after {
border-color: var(--lb-primary);
border-width: 0 2px 2px 0;
}
}
}