Summary: Custom widgets are now shown in a gallery. The gallery is automatically opened when a new custom widget is added to a page. Descriptions, authors, and update times are pulled from the widget manifest. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D4309pull/1150/head
George Gevoian
1 month ago
parent
a16d76d25d
commit
e70c294e3d
@ -0,0 +1,661 @@
|
|||||||
|
import {GristDoc} from 'app/client/components/GristDoc';
|
||||||
|
import {makeT} from 'app/client/lib/localization';
|
||||||
|
import {ViewSectionRec} from 'app/client/models/DocModel';
|
||||||
|
import {textInput} from 'app/client/ui/inputs';
|
||||||
|
import {shadowScroll} from 'app/client/ui/shadowScroll';
|
||||||
|
import {withInfoTooltip} from 'app/client/ui/tooltips';
|
||||||
|
import {bigBasicButton, bigPrimaryButton} from 'app/client/ui2018/buttons';
|
||||||
|
import {theme} from 'app/client/ui2018/cssVars';
|
||||||
|
import {icon} from 'app/client/ui2018/icons';
|
||||||
|
import {cssLink} from 'app/client/ui2018/links';
|
||||||
|
import {loadingSpinner} from 'app/client/ui2018/loaders';
|
||||||
|
import {IModalControl, modal} from 'app/client/ui2018/modals';
|
||||||
|
import {AccessLevel, ICustomWidget, matchWidget, WidgetAuthor} from 'app/common/CustomWidget';
|
||||||
|
import {commonUrls} from 'app/common/gristUrls';
|
||||||
|
import {bundleChanges, Computed, Disposable, dom, makeTestId, Observable, styled} from 'grainjs';
|
||||||
|
import escapeRegExp from 'lodash/escapeRegExp';
|
||||||
|
|
||||||
|
const testId = makeTestId('test-custom-widget-gallery-');
|
||||||
|
|
||||||
|
const t = makeT('CustomWidgetGallery');
|
||||||
|
|
||||||
|
export const CUSTOM_URL_WIDGET_ID = 'custom';
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
sectionRef?: number;
|
||||||
|
addWidget?(): Promise<{viewRef: number, sectionRef: number}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showCustomWidgetGallery(gristDoc: GristDoc, options: Options = {}) {
|
||||||
|
modal((ctl) => [
|
||||||
|
dom.create(CustomWidgetGallery, ctl, gristDoc, options),
|
||||||
|
cssModal.cls(''),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WidgetInfo {
|
||||||
|
variant: WidgetVariant;
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
developer?: WidgetAuthor;
|
||||||
|
lastUpdated?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomWidgetACItem extends ICustomWidget {
|
||||||
|
cleanText: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type WidgetVariant = 'custom' | 'grist' | 'community';
|
||||||
|
|
||||||
|
class CustomWidgetGallery extends Disposable {
|
||||||
|
private readonly _customUrl: Observable<string>;
|
||||||
|
private readonly _filteredWidgets = Observable.create<ICustomWidget[] | null>(this, null);
|
||||||
|
private readonly _section: ViewSectionRec | null = null;
|
||||||
|
private readonly _searchText = Observable.create(this, '');
|
||||||
|
private readonly _saveDisabled: Computed<boolean>;
|
||||||
|
private readonly _savedWidgetId: Computed<string | null>;
|
||||||
|
private readonly _selectedWidgetId = Observable.create<string | null>(this, null);
|
||||||
|
private readonly _widgets = Observable.create<CustomWidgetACItem[] | null>(this, null);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private _ctl: IModalControl,
|
||||||
|
private _gristDoc: GristDoc,
|
||||||
|
private _options: Options = {}
|
||||||
|
) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
const {sectionRef} = _options;
|
||||||
|
if (sectionRef) {
|
||||||
|
const section = this._gristDoc.docModel.viewSections.getRowModel(sectionRef);
|
||||||
|
if (!section.id.peek()) {
|
||||||
|
throw new Error(`Section ${sectionRef} does not exist`);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._section = section;
|
||||||
|
this.autoDispose(section._isDeleted.subscribe((isDeleted) => {
|
||||||
|
if (isDeleted) { this._ctl.close(); }
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
let customUrl = '';
|
||||||
|
if (this._section) {
|
||||||
|
customUrl = this._section.customDef.url() ?? '';
|
||||||
|
}
|
||||||
|
this._customUrl = Observable.create(this, customUrl);
|
||||||
|
|
||||||
|
this._savedWidgetId = Computed.create(this, (use) => {
|
||||||
|
if (!this._section) { return null; }
|
||||||
|
|
||||||
|
const {customDef} = this._section;
|
||||||
|
// May be stored in one of two places, depending on age of document.
|
||||||
|
const widgetId = use(customDef.widgetId) || use(customDef.widgetDef)?.widgetId;
|
||||||
|
if (widgetId) {
|
||||||
|
const pluginId = use(customDef.pluginId);
|
||||||
|
const widget = matchWidget(use(this._widgets) ?? [], {
|
||||||
|
widgetId,
|
||||||
|
pluginId,
|
||||||
|
});
|
||||||
|
return widget ? `${pluginId}:${widgetId}` : null;
|
||||||
|
} else {
|
||||||
|
return CUSTOM_URL_WIDGET_ID;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this._saveDisabled = Computed.create(this, use => {
|
||||||
|
const selectedWidgetId = use(this._selectedWidgetId);
|
||||||
|
if (!selectedWidgetId) { return true; }
|
||||||
|
if (!this._section) { return false; }
|
||||||
|
|
||||||
|
const savedWidgetId = use(this._savedWidgetId);
|
||||||
|
if (selectedWidgetId === CUSTOM_URL_WIDGET_ID) {
|
||||||
|
return (
|
||||||
|
use(this._savedWidgetId) === CUSTOM_URL_WIDGET_ID &&
|
||||||
|
use(this._customUrl) === use(this._section.customDef.url)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return selectedWidgetId === savedWidgetId;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this._initializeWidgets().catch(reportError);
|
||||||
|
|
||||||
|
this.autoDispose(this._searchText.addListener(() => {
|
||||||
|
this._filterWidgets();
|
||||||
|
this._selectedWidgetId.set(null);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
public buildDom() {
|
||||||
|
return cssCustomWidgetGallery(
|
||||||
|
cssHeader(
|
||||||
|
cssTitle(t('Choose Custom Widget')),
|
||||||
|
cssSearchInputWrapper(
|
||||||
|
cssSearchIcon('Search'),
|
||||||
|
cssSearchInput(
|
||||||
|
this._searchText,
|
||||||
|
{placeholder: t('Search')},
|
||||||
|
(el) => { setTimeout(() => el.focus(), 10); },
|
||||||
|
testId('search'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
shadowScroll(
|
||||||
|
this._buildWidgets(),
|
||||||
|
cssShadowScroll.cls(''),
|
||||||
|
),
|
||||||
|
cssFooter(
|
||||||
|
dom('div',
|
||||||
|
cssHelpLink(
|
||||||
|
{href: commonUrls.helpCustomWidgets, target: '_blank'},
|
||||||
|
cssHelpIcon('Question'),
|
||||||
|
t('Learn more about Custom Widgets'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
cssFooterButtons(
|
||||||
|
bigBasicButton(
|
||||||
|
t('Cancel'),
|
||||||
|
dom.on('click', () => this._ctl.close()),
|
||||||
|
testId('cancel'),
|
||||||
|
),
|
||||||
|
bigPrimaryButton(
|
||||||
|
this._options.addWidget ? t('Add Widget') : t('Change Widget'),
|
||||||
|
dom.on('click', () => this._save()),
|
||||||
|
dom.boolAttr('disabled', this._saveDisabled),
|
||||||
|
testId('save'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
dom.onKeyDown({
|
||||||
|
Enter: () => this._save(),
|
||||||
|
Escape: () => this._deselectOrClose(),
|
||||||
|
}),
|
||||||
|
dom.on('click', (ev) => this._maybeClearSelection(ev)),
|
||||||
|
testId('container'),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _initializeWidgets() {
|
||||||
|
const widgets: ICustomWidget[] = [
|
||||||
|
{
|
||||||
|
widgetId: 'custom',
|
||||||
|
name: t('Custom URL'),
|
||||||
|
description: t('Add a widget from outside this gallery.'),
|
||||||
|
url: '',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
try {
|
||||||
|
const remoteWidgets = await this._gristDoc.appModel.topAppModel.getWidgets();
|
||||||
|
if (this.isDisposed()) { return; }
|
||||||
|
|
||||||
|
widgets.push(...remoteWidgets
|
||||||
|
.filter(({published}) => published !== false)
|
||||||
|
.sort((a, b) => a.name.localeCompare(b.name)));
|
||||||
|
} catch (e) {
|
||||||
|
reportError(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._widgets.set(widgets.map(w => ({...w, cleanText: getWidgetCleanText(w)})));
|
||||||
|
this._selectedWidgetId.set(this._savedWidgetId.get());
|
||||||
|
this._filterWidgets();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _filterWidgets() {
|
||||||
|
const widgets = this._widgets.get();
|
||||||
|
if (!widgets) { return; }
|
||||||
|
|
||||||
|
const searchText = this._searchText.get();
|
||||||
|
if (!searchText) {
|
||||||
|
this._filteredWidgets.set(widgets);
|
||||||
|
} else {
|
||||||
|
const searchTerms = searchText.trim().split(/\s+/);
|
||||||
|
const searchPatterns = searchTerms.map(term =>
|
||||||
|
new RegExp(`\\b${escapeRegExp(term)}`, 'i'));
|
||||||
|
const filteredWidgets = widgets.filter(({cleanText}) =>
|
||||||
|
searchPatterns.some(pattern => pattern.test(cleanText))
|
||||||
|
);
|
||||||
|
this._filteredWidgets.set(filteredWidgets);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _buildWidgets() {
|
||||||
|
return dom.domComputed(this._filteredWidgets, (widgets) => {
|
||||||
|
if (widgets === null) {
|
||||||
|
return cssLoadingSpinner(loadingSpinner());
|
||||||
|
} else if (widgets.length === 0) {
|
||||||
|
return cssNoMatchingWidgets(t('No matching widgets'));
|
||||||
|
} else {
|
||||||
|
return cssWidgets(
|
||||||
|
widgets.map(widget => {
|
||||||
|
const {description, authors = [], lastUpdatedAt} = widget;
|
||||||
|
|
||||||
|
return this._buildWidget({
|
||||||
|
variant: getWidgetVariant(widget),
|
||||||
|
id: getWidgetId(widget),
|
||||||
|
name: getWidgetName(widget),
|
||||||
|
description,
|
||||||
|
developer: authors[0],
|
||||||
|
lastUpdated: lastUpdatedAt,
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _buildWidget(info: WidgetInfo) {
|
||||||
|
const {variant, id, name, description, developer, lastUpdated} = info;
|
||||||
|
|
||||||
|
return cssWidget(
|
||||||
|
dom.cls('custom-widget'),
|
||||||
|
cssWidgetHeader(
|
||||||
|
variant === 'custom' ? t('Add Your Own Widget') :
|
||||||
|
variant === 'grist' ? t('Grist Widget') :
|
||||||
|
withInfoTooltip(
|
||||||
|
t('Community Widget'),
|
||||||
|
'communityWidgets',
|
||||||
|
{
|
||||||
|
variant: 'hover',
|
||||||
|
iconDomArgs: [cssTooltipIcon.cls('')],
|
||||||
|
}
|
||||||
|
),
|
||||||
|
cssWidgetHeader.cls('-secondary', ['custom', 'community'].includes(variant)),
|
||||||
|
),
|
||||||
|
cssWidgetBody(
|
||||||
|
cssWidgetName(
|
||||||
|
name,
|
||||||
|
testId('widget-name'),
|
||||||
|
),
|
||||||
|
cssWidgetDescription(
|
||||||
|
description ?? t('(Missing info)'),
|
||||||
|
cssWidgetDescription.cls('-missing', !description),
|
||||||
|
testId('widget-description'),
|
||||||
|
),
|
||||||
|
variant === 'custom' ? null : cssWidgetMetadata(
|
||||||
|
variant === 'grist' ? null : cssWidgetMetadataRow(
|
||||||
|
cssWidgetMetadataName(t('Developer:')),
|
||||||
|
cssWidgetMetadataValue(
|
||||||
|
developer?.url
|
||||||
|
? cssDeveloperLink(
|
||||||
|
developer.name,
|
||||||
|
{href: developer.url, target: '_blank'},
|
||||||
|
dom.on('click', (ev) => ev.stopPropagation()),
|
||||||
|
testId('widget-developer'),
|
||||||
|
)
|
||||||
|
: dom('span',
|
||||||
|
developer?.name ?? t('(Missing info)'),
|
||||||
|
testId('widget-developer'),
|
||||||
|
),
|
||||||
|
cssWidgetMetadataValue.cls('-missing', !developer?.name),
|
||||||
|
testId('widget-developer'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
cssWidgetMetadataRow(
|
||||||
|
cssWidgetMetadataName(t('Last updated:')),
|
||||||
|
cssWidgetMetadataValue(
|
||||||
|
lastUpdated ?
|
||||||
|
new Date(lastUpdated).toLocaleDateString('default', {
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
})
|
||||||
|
: t('(Missing info)'),
|
||||||
|
cssWidgetMetadataValue.cls('-missing', !lastUpdated),
|
||||||
|
testId('widget-last-updated'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
testId('widget-metadata'),
|
||||||
|
),
|
||||||
|
variant !== 'custom' ? null : cssCustomUrlInput(
|
||||||
|
this._customUrl,
|
||||||
|
{placeholder: t('Widget URL')},
|
||||||
|
testId('custom-url'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
cssWidget.cls('-selected', use => id === use(this._selectedWidgetId)),
|
||||||
|
dom.on('click', () => this._selectedWidgetId.set(id)),
|
||||||
|
testId('widget'),
|
||||||
|
testId(`widget-${variant}`),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _save() {
|
||||||
|
if (this._saveDisabled.get()) { return; }
|
||||||
|
|
||||||
|
await this._saveSelectedWidget();
|
||||||
|
this._ctl.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _deselectOrClose() {
|
||||||
|
if (this._selectedWidgetId.get()) {
|
||||||
|
this._selectedWidgetId.set(null);
|
||||||
|
} else {
|
||||||
|
this._ctl.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _saveSelectedWidget() {
|
||||||
|
await this._gristDoc.docData.bundleActions(
|
||||||
|
'Save selected custom widget',
|
||||||
|
async () => {
|
||||||
|
let section = this._section;
|
||||||
|
if (!section) {
|
||||||
|
const {addWidget} = this._options;
|
||||||
|
if (!addWidget) {
|
||||||
|
throw new Error('Cannot add custom widget: missing `addWidget` implementation');
|
||||||
|
}
|
||||||
|
|
||||||
|
const {sectionRef} = await addWidget();
|
||||||
|
const newSection = this._gristDoc.docModel.viewSections.getRowModel(sectionRef);
|
||||||
|
if (!newSection.id.peek()) {
|
||||||
|
throw new Error(`Section ${sectionRef} does not exist`);
|
||||||
|
}
|
||||||
|
section = newSection;
|
||||||
|
}
|
||||||
|
const selectedWidgetId = this._selectedWidgetId.get();
|
||||||
|
if (selectedWidgetId === CUSTOM_URL_WIDGET_ID) {
|
||||||
|
return this._saveCustomUrlWidget(section);
|
||||||
|
} else {
|
||||||
|
return this._saveRemoteWidget(section);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _saveCustomUrlWidget(section: ViewSectionRec) {
|
||||||
|
bundleChanges(() => {
|
||||||
|
section.customDef.renderAfterReady(false);
|
||||||
|
section.customDef.url(this._customUrl.get());
|
||||||
|
section.customDef.widgetId(null);
|
||||||
|
section.customDef.widgetDef(null);
|
||||||
|
section.customDef.pluginId('');
|
||||||
|
section.customDef.access(AccessLevel.none);
|
||||||
|
section.customDef.widgetOptions(null);
|
||||||
|
section.hasCustomOptions(false);
|
||||||
|
section.customDef.columnsMapping(null);
|
||||||
|
section.columnsToMap(null);
|
||||||
|
section.desiredAccessLevel(AccessLevel.none);
|
||||||
|
});
|
||||||
|
await section.saveCustomDef();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _saveRemoteWidget(section: ViewSectionRec) {
|
||||||
|
const [pluginId, widgetId] = this._selectedWidgetId.get()!.split(':');
|
||||||
|
const {customDef} = section;
|
||||||
|
if (customDef.pluginId.peek() === pluginId && customDef.widgetId.peek() === widgetId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedWidget = matchWidget(this._widgets.get() ?? [], {widgetId, pluginId});
|
||||||
|
if (!selectedWidget) {
|
||||||
|
throw new Error(`Widget ${this._selectedWidgetId.get()} not found`);
|
||||||
|
}
|
||||||
|
|
||||||
|
bundleChanges(() => {
|
||||||
|
section.customDef.renderAfterReady(selectedWidget.renderAfterReady ?? false);
|
||||||
|
section.customDef.access(AccessLevel.none);
|
||||||
|
section.desiredAccessLevel(selectedWidget.accessLevel ?? AccessLevel.none);
|
||||||
|
// Keep a record of the original widget definition.
|
||||||
|
// Don't rely on this much, since the document could
|
||||||
|
// have moved installation since, and widgets could be
|
||||||
|
// served from elsewhere.
|
||||||
|
section.customDef.widgetDef(selectedWidget);
|
||||||
|
section.customDef.widgetId(selectedWidget.widgetId);
|
||||||
|
section.customDef.pluginId(selectedWidget.source?.pluginId ?? '');
|
||||||
|
section.customDef.url(null);
|
||||||
|
section.customDef.widgetOptions(null);
|
||||||
|
section.hasCustomOptions(false);
|
||||||
|
section.customDef.columnsMapping(null);
|
||||||
|
section.columnsToMap(null);
|
||||||
|
});
|
||||||
|
await section.saveCustomDef();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _maybeClearSelection(event: MouseEvent) {
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (
|
||||||
|
!target.closest('.custom-widget') &&
|
||||||
|
!target.closest('button') &&
|
||||||
|
!target.closest('a') &&
|
||||||
|
!target.closest('input')
|
||||||
|
) {
|
||||||
|
this._selectedWidgetId.set(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWidgetName({name, source}: ICustomWidget) {
|
||||||
|
return source?.name ? `${name} (${source.name})` : name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWidgetVariant({isGristLabsMaintained = false, widgetId}: ICustomWidget): WidgetVariant {
|
||||||
|
if (widgetId === CUSTOM_URL_WIDGET_ID) {
|
||||||
|
return 'custom';
|
||||||
|
} else if (isGristLabsMaintained) {
|
||||||
|
return 'grist';
|
||||||
|
} else {
|
||||||
|
return 'community';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWidgetId({source, widgetId}: ICustomWidget) {
|
||||||
|
if (widgetId === CUSTOM_URL_WIDGET_ID) {
|
||||||
|
return CUSTOM_URL_WIDGET_ID;
|
||||||
|
} else {
|
||||||
|
return `${source?.pluginId ?? ''}:${widgetId}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWidgetCleanText({name, description, authors = []}: ICustomWidget) {
|
||||||
|
let cleanText = name;
|
||||||
|
if (description) { cleanText += ` ${description}`; }
|
||||||
|
if (authors[0]) { cleanText += ` ${authors[0].name}`; }
|
||||||
|
return cleanText;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cssWidgetMetadata = styled('div', `
|
||||||
|
margin-top: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 4px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
export const cssWidgetMetadataRow = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
column-gap: 4px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
export const cssWidgetMetadataName = styled('span', `
|
||||||
|
color: ${theme.lightText};
|
||||||
|
font-weight: 600;
|
||||||
|
`);
|
||||||
|
|
||||||
|
export const cssWidgetMetadataValue = styled('div', `
|
||||||
|
&-missing {
|
||||||
|
color: ${theme.lightText};
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
export const cssDeveloperLink = styled(cssLink, `
|
||||||
|
font-weight: 600;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssCustomWidgetGallery = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
outline: none;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const WIDGET_WIDTH_PX = 240;
|
||||||
|
|
||||||
|
const WIDGETS_GAP_PX = 16;
|
||||||
|
|
||||||
|
const cssHeader = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
column-gap: 16px;
|
||||||
|
row-gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 40px 40px 16px 40px;
|
||||||
|
|
||||||
|
/* Don't go beyond the final grid column. */
|
||||||
|
max-width: ${(3 * WIDGET_WIDTH_PX) + (2 * WIDGETS_GAP_PX)}px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssTitle = styled('div', `
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssSearchInputWrapper = styled('div', `
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssSearchIcon = styled(icon, `
|
||||||
|
margin-left: 8px;
|
||||||
|
position: absolute;
|
||||||
|
--icon-color: ${theme.accentIcon};
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssSearchInput = styled(textInput, `
|
||||||
|
height: 28px;
|
||||||
|
padding-left: 32px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssShadowScroll = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: unset;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 16px 40px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssCenteredFlexGrow = styled('div', `
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssLoadingSpinner = cssCenteredFlexGrow;
|
||||||
|
|
||||||
|
const cssNoMatchingWidgets = styled(cssCenteredFlexGrow, `
|
||||||
|
color: ${theme.lightText};
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidgets = styled('div', `
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(0px, ${WIDGET_WIDTH_PX}px));
|
||||||
|
gap: ${WIDGETS_GAP_PX}px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidget = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 1px 1px 4px 1px ${theme.widgetGalleryShadow};
|
||||||
|
border-radius: 4px;
|
||||||
|
min-height: 183.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${theme.widgetGalleryBgHover};
|
||||||
|
}
|
||||||
|
&-selected {
|
||||||
|
outline: 2px solid ${theme.widgetGalleryBorderSelected};
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidgetHeader = styled('div', `
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 2px solid ${theme.widgetGalleryBorder};
|
||||||
|
border-bottom: 1px solid ${theme.widgetGalleryBorder};
|
||||||
|
border-radius: 4px 4px 0px 0px;
|
||||||
|
color: ${theme.lightText};
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 4px 18px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&-secondary {
|
||||||
|
border: 0px;
|
||||||
|
color: ${theme.widgetGallerySecondaryHeaderFg};
|
||||||
|
background-color: ${theme.widgetGallerySecondaryHeaderBg};
|
||||||
|
}
|
||||||
|
.${cssWidget.className}:hover &-secondary {
|
||||||
|
background-color: ${theme.widgetGallerySecondaryHeaderBgHover};
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidgetBody = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
border: 2px solid ${theme.widgetGalleryBorder};
|
||||||
|
border-top: 0px;
|
||||||
|
border-radius: 0px 0px 4px 4px;
|
||||||
|
padding: 16px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidgetName = styled('div', `
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssWidgetDescription = styled('div', `
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&-missing {
|
||||||
|
color: ${theme.lightText};
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssCustomUrlInput = styled(textInput, `
|
||||||
|
height: 28px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssHelpLink = styled(cssLink, `
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 8px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssHelpIcon = styled(icon, `
|
||||||
|
flex-shrink: 0;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssFooter = styled('div', `
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px 40px;
|
||||||
|
border-top: 1px solid ${theme.widgetGalleryBorder};
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssFooterButtons = styled('div', `
|
||||||
|
display: flex;
|
||||||
|
column-gap: 8px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssModal = styled('div', `
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 930px;
|
||||||
|
max-height: 623px;
|
||||||
|
padding: 0px;
|
||||||
|
`);
|
||||||
|
|
||||||
|
const cssTooltipIcon = styled('div', `
|
||||||
|
color: ${theme.widgetGallerySecondaryHeaderFg};
|
||||||
|
border-color: ${theme.widgetGallerySecondaryHeaderFg};
|
||||||
|
`);
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in new issue