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-comments [commentsId]="commentsId | async"></sqx-comments> |
||||
</sqx-layout> |
</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 class="help"> |
||||
<div [innerHTML]="helpMarkdown | async | sqxHelpMarkdown"></div> |
<div [innerHTML]="helpMarkdown | async | sqxHelpMarkdown"></div> |
||||
</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-history-list [events]="events | async"></sqx-history-list> |
||||
</sqx-layout> |
</sqx-layout> |
||||
Loading…
Reference in new issue