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. * Change category name. * Fix tests.pull/949/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
13 changed files with 317 additions and 97 deletions
@ -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', |
|||
}; |
|||
Loading…
Reference in new issue