mirror of https://github.com/Squidex/squidex.git
Browse Source
# Conflicts: # backend/src/Squidex.Domain.Apps.Entities/Contents/Queries/ContentQueryParser.cspull/949/head
Sebastian
4 years ago
34 changed files with 854 additions and 366 deletions
@ -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> |
|||
@ -1,32 +1,41 @@ |
|||
<div class="title"> |
|||
<form *ngIf="renaming; else noRenaming" (ngSubmit)="rename()"> |
|||
<div class="row g-0"> |
|||
<div class="col"> |
|||
<div class="form-group me-2"> |
|||
<sqx-control-errors for="name"></sqx-control-errors> |
|||
|
|||
<input class="form-control" [formControl]="renameForm" [maxLength]="maxLength" sqxFocusOnInit (keydown)="onKeyDown($event)" spellcheck="false"> |
|||
</div> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button type="submit" class="btn btn-primary me-1" [disabled]="!renameForm.valid || !renameForm.dirty"> |
|||
{{ 'common.save' | sqxTranslate }} |
|||
</button> |
|||
|
|||
<button type="button" class="btn btn-text-secondary btn-cancel me-4" (click)="toggleRename()"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
<form *ngIf="renaming; else noRenaming" (ngSubmit)="rename()"> |
|||
<div class="row g-1 align-items-center"> |
|||
<div class="col"> |
|||
<div class="form-group"> |
|||
<sqx-control-errors [for]="renameForm"></sqx-control-errors> |
|||
|
|||
<input class="form-control form-control-{{size}}" [formControl]="renameForm" [maxLength]="inputTitleLength" sqxFocusOnInit (keydown)="onKeyDown($event)" spellcheck="false"> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<div class="col-auto"> |
|||
<button type="submit" class="btn btn-primary btn-{{size}}" [disabled]="!renameForm.valid || !renameForm.dirty"> |
|||
<i class="icon-checkmark"></i> |
|||
</button> |
|||
</div> |
|||
<div class="col-auto" *ngIf="closeButton"> |
|||
<button type="button" class="btn btn-text-secondary btn-{{size}} btn-cancel" (click)="toggleRename()"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
|
|||
<ng-template #noRenaming> |
|||
<div class="title-view"> |
|||
<h3 class="title-name" [class.fallback]="!name" (dblclick)="toggleRename()"> |
|||
{{name || fallback}} |
|||
<ng-template #noRenaming> |
|||
<div class="row g-0 align-items-center title-view d-nowrap"> |
|||
<div class="col"> |
|||
<h3 class="truncate {{size}}" [class.fallback]="!inputTitle" (dblclick)="toggleRename()"> |
|||
{{inputTitle || displayFallback}} |
|||
</h3> |
|||
|
|||
<i class="title-edit icon-pencil" *ngIf="!disabled" (click)="toggleRename()"></i> |
|||
</div> |
|||
</ng-template> |
|||
</div> |
|||
<div class="col-auto title-edit" *ngIf="!disabled" > |
|||
<button type="button" class="btn btn-text-secondary btn-{{size}}" (click)="toggleRename()"> |
|||
<i class="icon-pencil text-decent"></i> |
|||
</button> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button type="button" class="btn btn-text-secondary btn-{{size}} btn-placeholder" (click)="toggleRename()"> |
|||
|
|||
</button> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
@ -1,34 +1,36 @@ |
|||
@import 'mixins'; |
|||
@import 'vars'; |
|||
|
|||
.title { |
|||
@include hover-visible('.title-edit', inline); |
|||
position: relative; |
|||
|
|||
&-edit { |
|||
@include absolute(0, 0, null, null); |
|||
color: darken($color-border-dark, 20%); |
|||
cursor: pointer; |
|||
padding: .6rem .25rem; |
|||
} |
|||
:host { |
|||
display: block; |
|||
} |
|||
|
|||
&-name { |
|||
display: inline; |
|||
font-size: 1.2rem; |
|||
font-weight: normal; |
|||
padding-right: 1.75rem; |
|||
} |
|||
.title-view { |
|||
@include hover-visible('.title-edit', block); |
|||
|
|||
&-view { |
|||
@include truncate; |
|||
border-bottom: 1px solid transparent; |
|||
border-top: 0; |
|||
padding: .375rem 0; |
|||
position: absolute; |
|||
.col { |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.btn-placeholder { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
width: 0; |
|||
} |
|||
|
|||
.row { |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
|
|||
&.sm { |
|||
font-size: 1rem; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
&.fallback { |
|||
color: $color-text-decent; |
|||
} |
|||
|
|||
@ -0,0 +1,134 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
|||
import { moduleMetadata } from '@storybook/angular'; |
|||
import { Meta, Story } from '@storybook/angular/types-6-0'; |
|||
import { EditableTitleComponent, LocalizerService, SqxFrameworkModule } from '@app/framework'; |
|||
|
|||
export default { |
|||
title: 'Framework/EditableTitle', |
|||
component: EditableTitleComponent, |
|||
argTypes: { |
|||
inputTitle: { |
|||
control: 'inputTitle', |
|||
}, |
|||
closeButton: { |
|||
control: 'boolean', |
|||
}, |
|||
inputTitleRequired: { |
|||
control: 'boolean', |
|||
}, |
|||
inputTitleLength: { |
|||
control: 'number', |
|||
}, |
|||
size: { |
|||
control: 'select', |
|||
options: [ |
|||
'sm', |
|||
'md', |
|||
'lg', |
|||
], |
|||
}, |
|||
}, |
|||
args: { |
|||
closeButton: true, |
|||
inputTitleLength: 30, |
|||
inputTitleRequired: true, |
|||
}, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [ |
|||
BrowserAnimationsModule, |
|||
FormsModule, |
|||
ReactiveFormsModule, |
|||
SqxFrameworkModule, |
|||
SqxFrameworkModule.forRoot(), |
|||
], |
|||
providers: [ |
|||
{ provide: LocalizerService, useValue: new LocalizerService({}) }, |
|||
], |
|||
}), |
|||
], |
|||
} as Meta; |
|||
|
|||
const Template: Story<EditableTitleComponent> = (args: EditableTitleComponent) => ({ |
|||
props: args, |
|||
template: ` |
|||
<div class="card mt-4"> |
|||
<div class="row" style="flex-wrap: nowrap"> |
|||
<div class="col-9"> |
|||
<sqx-editable-title |
|||
[closeButton]="closeButton" |
|||
[size]="size" |
|||
[inputTitle]="inputTitle" |
|||
[inputTitleLength]="inputTitleLength" |
|||
[inputTitleRequired]="inputTitleRequired"> |
|||
</sqx-editable-title> |
|||
</div> |
|||
<div class="col-3"> |
|||
<button class="btn btn-primary btn-{{size}}"> |
|||
Button |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`,
|
|||
}); |
|||
|
|||
export const Default = Template.bind({}); |
|||
|
|||
Default.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'md', |
|||
}; |
|||
|
|||
export const DefaultNoCloseButton = Template.bind({}); |
|||
|
|||
DefaultNoCloseButton.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'md', |
|||
closeButton: false, |
|||
}; |
|||
|
|||
export const Small = Template.bind({}); |
|||
|
|||
Small.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'sm', |
|||
}; |
|||
|
|||
export const SmallNoCloseButton = Template.bind({}); |
|||
|
|||
SmallNoCloseButton.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'sm', |
|||
closeButton: false, |
|||
}; |
|||
|
|||
export const Large = Template.bind({}); |
|||
|
|||
Large.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'lg', |
|||
}; |
|||
|
|||
export const LargeNoCloseButton = Template.bind({}); |
|||
|
|||
LargeNoCloseButton.args = { |
|||
inputTitle: 'My Title', |
|||
size: 'lg', |
|||
closeButton: false, |
|||
}; |
|||
|
|||
export const LongTitle = Template.bind({}); |
|||
|
|||
LongTitle.args = { |
|||
inputTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', |
|||
size: 'md', |
|||
}; |
|||
@ -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