mirror of https://github.com/Squidex/squidex.git
Browse Source
* Typings for editor SDK. * Fix line height and cut text. * Improve integrated documentation for .NET SDK * Add access token to preview URL. * Improve layout system for small screens.pull/949/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
35 changed files with 742 additions and 165 deletions
@ -0,0 +1,199 @@ |
|||
declare class EditorPlugin { |
|||
/** |
|||
* Get the current context. |
|||
*/ |
|||
getContext(): any; |
|||
|
|||
/** |
|||
* Notifies the parent to navigate to the path. |
|||
*/ |
|||
navigate(url: string): void; |
|||
|
|||
/** |
|||
* Register an function that is called when the sidebar is initialized. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. |
|||
*/ |
|||
onInit(callback: () => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the value of the content has changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). |
|||
*/ |
|||
onContentChanged(callback: (content: any) => void): void; |
|||
|
|||
/** |
|||
* Clean the editor SDK. |
|||
*/ |
|||
clean(): void; |
|||
} |
|||
|
|||
declare class SquidexFormField { |
|||
/** |
|||
* Get the current value. |
|||
*/ |
|||
getValue(): any; |
|||
|
|||
/** |
|||
* Get the current value. |
|||
*/ |
|||
getContext(): any; |
|||
|
|||
/** |
|||
* Get the current form value. |
|||
*/ |
|||
getFormValue(): any; |
|||
|
|||
/** |
|||
* Get the current field language. |
|||
*/ |
|||
getLanguage(): string | undefined | null; |
|||
|
|||
/** |
|||
* Get the current index when the field is an array item. |
|||
*/ |
|||
getIndex(): number | undefined | null; |
|||
|
|||
/** |
|||
* Get the disabled state. |
|||
*/ |
|||
isDisabled(): boolean; |
|||
|
|||
/** |
|||
* Get the fullscreen state. |
|||
*/ |
|||
isFullscreen(): boolean; |
|||
/** |
|||
* Get the expanded state. |
|||
*/ |
|||
isExpanded(): boolean; |
|||
|
|||
/** |
|||
* Notifies the control container that the editor has been touched. |
|||
*/ |
|||
touched(): void; |
|||
|
|||
/** |
|||
* Notifies the parent to navigate to the path. |
|||
* |
|||
* @param {string} url: The url to navigate to. |
|||
*/ |
|||
navigate(url: string): void; |
|||
|
|||
/** |
|||
* Notifies the parent to go to fullscreen mode. |
|||
*/ |
|||
toggleFullscreen(): void; |
|||
|
|||
/** |
|||
* Notifies the parent to go to expanded mode. |
|||
*/ |
|||
toggleExpanded(): void; |
|||
|
|||
/** |
|||
* Notifies the control container that the value has been changed. |
|||
* |
|||
* @param {any} newValue: The new field value. |
|||
*/ |
|||
valueChanged(newValue: any): void; |
|||
|
|||
/** |
|||
* Shows an info alert. |
|||
* |
|||
* @param {string} text: The info text. |
|||
*/ |
|||
notifyInfo(text: string): void; |
|||
|
|||
/** |
|||
* Shows an error alert. |
|||
* |
|||
* @param {string} text: error info text. |
|||
*/ |
|||
notifyError(text: string): void; |
|||
|
|||
/** |
|||
* Shows an confirm dialog. |
|||
* |
|||
* @param {string} title The title of the dialog. |
|||
* @param {string} text The text of the dialog. |
|||
* @param {function} callback The callback to invoke when the dialog is completed or closed. |
|||
*/ |
|||
confirm(title: string, text: string, callback: (result: boolean) => void): void; |
|||
|
|||
/** |
|||
* Shows the dialog to pick assets. |
|||
* |
|||
* @param {function} callback The callback to invoke when the dialog is completed or closed. |
|||
*/ |
|||
pickAssets(callback: (assets: any[]) => void): void; |
|||
|
|||
/** |
|||
* Shows the dialog to pick contents. |
|||
* |
|||
* @param {string} schemas: The list of schema names. |
|||
* @param {function} callback The callback to invoke when the dialog is completed or closed. |
|||
*/ |
|||
pickContents(schemas: string[], callback: (assets: any[]) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called when the field is initialized. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. |
|||
*/ |
|||
onInit(callback: () => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called when the field is moved. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: New position (number). |
|||
*/ |
|||
onMoved(callback: (index: number) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the field is disabled or enabled. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false). |
|||
*/ |
|||
onDisabled(callback: (isDisabled: boolean) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the field language is changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Language code (string). |
|||
*/ |
|||
onLanguageChanged(callback: (language: string) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the value of the field has changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Field value (any). |
|||
*/ |
|||
onValueChanged(callback: (value: any) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the value of the content has changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). |
|||
*/ |
|||
onFormValueChanged(callback: (value: any) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the fullscreen mode has changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false). |
|||
*/ |
|||
onFullscreen(callback: (isFullscreen: boolean) => void): void; |
|||
|
|||
/** |
|||
* Register an function that is called whenever the expanded mode has changed. |
|||
* |
|||
* @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false). |
|||
*/ |
|||
onExpanded(callback: (isExpanded: boolean) => void): void; |
|||
|
|||
/** |
|||
* Clean the editor SDK. |
|||
*/ |
|||
clean(): void; |
|||
} |
|||
@ -1,3 +1,3 @@ |
|||
<sqx-layout layout="simple" titleText="i18n:comments.title" [width]="20" [white]="true"> |
|||
<sqx-layout layout="right" titleText="i18n:comments.title" [width]="20" [white]="true"> |
|||
<sqx-comments [commentsId]="commentsId | async"></sqx-comments> |
|||
</sqx-layout> |
|||
@ -0,0 +1,216 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
|||
import { moduleMetadata } from '@storybook/angular'; |
|||
import { Meta, Story } from '@storybook/angular/types-6-0'; |
|||
import { LayoutComponent, LocalizerService, SqxFrameworkModule } from '@app/framework'; |
|||
|
|||
export default { |
|||
title: 'Framework/Layout', |
|||
component: LayoutComponent, |
|||
argTypes: { |
|||
titleText: { |
|||
control: 'text', |
|||
}, |
|||
titleCollapsed: { |
|||
control: 'text', |
|||
}, |
|||
titleIcon: { |
|||
control: 'select', |
|||
options: [ |
|||
'', |
|||
'help', |
|||
'help2', |
|||
], |
|||
}, |
|||
layout: { |
|||
control: 'select', |
|||
options: [ |
|||
'left', |
|||
'main', |
|||
'right', |
|||
], |
|||
defaultValue: 'left', |
|||
}, |
|||
innerWidth: { |
|||
control: 'number', |
|||
}, |
|||
}, |
|||
parameters: { |
|||
layout: 'fullscreen', |
|||
}, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [ |
|||
BrowserAnimationsModule, |
|||
SqxFrameworkModule, |
|||
SqxFrameworkModule.forRoot(), |
|||
], |
|||
providers: [ |
|||
{ provide: LocalizerService, useValue: new LocalizerService({}) }, |
|||
], |
|||
}), |
|||
], |
|||
} as Meta; |
|||
|
|||
const Template: Story<LayoutComponent> = (args: LayoutComponent) => ({ |
|||
props: args, |
|||
template: ` |
|||
<sqx-root-view> |
|||
<div sqxLayoutContainer> |
|||
<sqx-layout |
|||
[layout]="layout" |
|||
[innerWidth]="innerWidth" |
|||
[titleCollapsed]="titleCollapsed" |
|||
[titleIcon]="titleIcon" |
|||
[titleText]="titleText"> |
|||
<div> |
|||
<sqx-list-view [innerWidth]="innerWidth + 'rem'"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
</sqx-list-view> |
|||
</div> |
|||
</sqx-layout> |
|||
</div> |
|||
</sqx-root-view> |
|||
`,
|
|||
}); |
|||
|
|||
const ComplexTemplate: Story<LayoutComponent> = (args: LayoutComponent) => ({ |
|||
props: args, |
|||
template: ` |
|||
<sqx-root-view> |
|||
<div sqxLayoutContainer> |
|||
<sqx-layout titleText="Left" layout="left" width="15"> |
|||
<div> |
|||
<sqx-list-view> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
</sqx-list-view> |
|||
</div> |
|||
</sqx-layout> |
|||
<sqx-layout layout="main" |
|||
[innerWidth]="innerWidth" |
|||
[titleCollapsed]="titleCollapsed" |
|||
[titleIcon]="titleIcon" |
|||
[titleText]="titleText"> |
|||
<div> |
|||
<sqx-list-view [innerWidth]="innerWidth + 'rem'"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
</sqx-list-view> |
|||
</div> |
|||
</sqx-layout> |
|||
<sqx-layout titleText="Simple" layout="right" width="15"> |
|||
<div class="p-4"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
<div class="card mt-2"> |
|||
<div class="card-body"> |
|||
Content |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</sqx-layout> |
|||
</div> |
|||
</sqx-root-view> |
|||
`,
|
|||
}); |
|||
|
|||
export const Empty = Template.bind({}); |
|||
|
|||
Empty.args = { |
|||
titleText: 'Title', |
|||
}; |
|||
|
|||
export const Icon = Template.bind({}); |
|||
|
|||
Icon.args = { |
|||
titleText: 'Title', |
|||
titleIcon: 'help', |
|||
}; |
|||
|
|||
export const InnerWidth = Template.bind({}); |
|||
|
|||
InnerWidth.args = { |
|||
titleText: 'Title', |
|||
titleIcon: '', |
|||
innerWidth: 30, |
|||
layout: 'main', |
|||
}; |
|||
|
|||
export const Left = Template.bind({}); |
|||
|
|||
Left.args = { |
|||
titleText: 'Title', |
|||
titleCollapsed: 'I am collapsed', |
|||
layout: 'left', |
|||
}; |
|||
|
|||
export const Right = Template.bind({}); |
|||
|
|||
Right.args = { |
|||
titleText: 'Title', |
|||
titleCollapsed: 'I am collapsed', |
|||
layout: 'right', |
|||
}; |
|||
|
|||
export const Complex = ComplexTemplate.bind({}); |
|||
|
|||
Complex.args = { |
|||
titleText: 'Main', |
|||
titleIcon: 'help', |
|||
innerWidth: 20, |
|||
}; |
|||
@ -1,4 +1,4 @@ |
|||
<sqx-layout titleText="i18n:common.help" titleIcon="help2" [width]="20" layout="simple" [white]="true" [padding]="true" [overflow]="true"> |
|||
<sqx-layout titleText="i18n:common.help" titleIcon="help2" [width]="20" layout="right" [white]="true" [padding]="true" [overflow]="true"> |
|||
<div class="help"> |
|||
<div [innerHTML]="helpMarkdown | async | sqxHelpMarkdown"></div> |
|||
</div> |
|||
|
|||
@ -1,3 +1,3 @@ |
|||
<sqx-layout layout="simple" titleText="i18n:history.title" [width]="20" titleIcon="time" [white]="true"> |
|||
<sqx-layout layout="right" titleText="i18n:history.title" [width]="20" titleIcon="time" [white]="true"> |
|||
<sqx-history-list [events]="events | async"></sqx-history-list> |
|||
</sqx-layout> |
|||
Loading…
Reference in new issue