mirror of https://github.com/Squidex/squidex.git
Sebastian
4 years ago
13 changed files with 46075 additions and 12264 deletions
@ -0,0 +1,22 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
module.exports = { |
|||
"stories": [ |
|||
"../src/**/*.stories.mdx", |
|||
"../src/**/*.stories.@(js|jsx|ts|tsx)" |
|||
], |
|||
"addons": [ |
|||
"@storybook/addon-links", |
|||
"@storybook/addon-essentials", |
|||
"@storybook/addon-interactions" |
|||
], |
|||
"framework": "@storybook/angular", |
|||
"core": { |
|||
"builder": "@storybook/builder-webpack5" |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
export const parameters = { |
|||
actions: { |
|||
argTypesRegex: "^on[A-Z].*" |
|||
}, |
|||
controls: { |
|||
matchers: { |
|||
color: /(background|color)$/i, |
|||
date: /Date$/, |
|||
}, |
|||
}, |
|||
docs: { |
|||
inlineStories: true |
|||
}, |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
{ |
|||
"extends": "../tsconfig.app.json", |
|||
"compilerOptions": { |
|||
"types": [ |
|||
"node" |
|||
], |
|||
"allowSyntheticDefaultImports": true |
|||
}, |
|||
"exclude": [ |
|||
"../src/test.ts", |
|||
"../src/**/*.spec.ts", |
|||
"../projects/**/*.spec.ts" |
|||
], |
|||
"include": [ |
|||
"../src/**/*", |
|||
"../projects/**/*" |
|||
], |
|||
"files": [ |
|||
"./typings.d.ts" |
|||
] |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
declare module '*.md' { |
|||
const content: string; |
|||
export default content; |
|||
} |
|||
File diff suppressed because it is too large
@ -1,37 +1,34 @@ |
|||
<div class="d-flex" (sqxResizeCondition)="setCompact($event)" [sqxResizeMinWidth]="500" [sqxResizeMaxWidth]="0"> |
|||
<div class="d-flex"> |
|||
<div class="form-group me-1"> |
|||
<div *ngIf="!isCompact && isDateTimeMode && shouldShowDateTimeModeButton"> |
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(false)" *ngIf="snapshot.isLocal"> |
|||
{{ 'common.dateTimeEditor.local' | sqxTranslate }} |
|||
</button> |
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(true)" *ngIf="!snapshot.isLocal"> |
|||
{{ 'common.dateTimeEditor.utc' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="input-group"> |
|||
<input type="text" class="form-control form-date" [formControl]="dateControl" placeholder="{{ 'common.date' | sqxTranslate }}" |
|||
[class.form-date-only]="!isDateTimeMode" |
|||
[class.form-date-time-only]="!isCompact && isDateTimeMode && shouldShowDateTimeModeButton" |
|||
(blur)="callTouched()" maxlength="10" #dateInput> |
|||
|
|||
<input type="text" class="form-control form-time" [formControl]="timeControl" placeholder="{{ 'common.time' | sqxTranslate }}" (blur)="callTouched()" *ngIf="isDateTimeMode"> |
|||
</div> |
|||
|
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-clear" [class.hidden]="!hasValue" |
|||
[disabled]="snapshot.isDisabled" (click)="reset()" *ngIf="!hideClear"> |
|||
<i class="icon-close"></i> |
|||
<div class="d-flex root" (sqxResized)="setSize($event)" [class.mini]="size === 'Mini'" [class.compact]="size === 'Compact'"> |
|||
<div class="form-group flex-grow me-1"> |
|||
<div *ngIf="isDateTimeMode && shouldShowDateTimeModeButton"> |
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(false)" *ngIf="snapshot.isLocal"> |
|||
{{ 'common.dateTimeEditor.local' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="form-group" *ngIf="isDateTimeMode && shouldShowDateButtons"> |
|||
<button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="i18n:common.dateTimeEditor.nowTooltip"> |
|||
{{ 'common.dateTimeEditor.now' | sqxTranslate }} |
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(true)" *ngIf="!snapshot.isLocal"> |
|||
{{ 'common.dateTimeEditor.utc' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="form-group" *ngIf="!isDateTimeMode && shouldShowDateButtons"> |
|||
<button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeToday()" title="i18n:common.dateTimeEditor.todayTooltip"> |
|||
{{ 'common.dateTimeEditor.today' | sqxTranslate }} |
|||
</button> |
|||
<div class="input-group flex-grow"> |
|||
<input type="text" class="form-control form-date" [formControl]="dateControl" placeholder="{{ 'common.date' | sqxTranslate }}" |
|||
[class.with-buttons]="isDateTimeMode && shouldShowDateTimeModeButton" |
|||
(blur)="callTouched()" maxlength="10" #dateInput> |
|||
|
|||
<input type="text" class="form-control form-time" [formControl]="timeControl" placeholder="{{ 'common.time' | sqxTranslate }}" (blur)="callTouched()" *ngIf="isDateTimeMode"> |
|||
</div> |
|||
|
|||
<button type="button" class="btn btn-text-secondary btn-sm btn-clear" [class.hidden]="!hasValue" |
|||
[disabled]="snapshot.isDisabled" (click)="reset()" *ngIf="!hideClear"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
</div> |
|||
<div class="form-group" *ngIf="isDateTimeMode && shouldShowDateButtons"> |
|||
<button type="button" class="btn btn-text-secondary btn-quick" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="i18n:common.dateTimeEditor.nowTooltip"> |
|||
{{ 'common.dateTimeEditor.now' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="form-group" *ngIf="!isDateTimeMode && shouldShowDateButtons"> |
|||
<button type="button" class="btn btn-text-secondary btn-quick" [disabled]="snapshot.isDisabled" (click)="writeToday()" title="i18n:common.dateTimeEditor.todayTooltip"> |
|||
{{ 'common.dateTimeEditor.today' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,71 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { moduleMetadata } from '@storybook/angular'; |
|||
import { Meta, Story } from '@storybook/angular/types-6-0'; |
|||
import { LocalizerService, SqxFrameworkModule, UIOptions } from '@app/framework'; |
|||
import { DateTimeEditorComponent } from './date-time-editor.component'; |
|||
|
|||
const translations = { |
|||
'common.date': 'Date', |
|||
'common.dateTimeEditor.local': 'Local', |
|||
'common.dateTimeEditor.now': 'Now', |
|||
'common.dateTimeEditor.today': 'Today', |
|||
'common.dateTimeEditor.utc': 'UTC', |
|||
'common.time': 'Time', |
|||
}; |
|||
|
|||
export default { |
|||
title: 'Framework/DateTimeEditor', |
|||
component: DateTimeEditorComponent, |
|||
argTypes: { |
|||
hideClear: { |
|||
control: 'boolean', |
|||
}, |
|||
hideDateButtons: { |
|||
control: 'boolean', |
|||
}, |
|||
hideDateTimeModeButton: { |
|||
control: 'boolean', |
|||
}, |
|||
mode: { |
|||
control: 'radio', |
|||
options: [ |
|||
'Date', |
|||
'DateTime', |
|||
], |
|||
}, |
|||
}, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [ |
|||
SqxFrameworkModule, |
|||
SqxFrameworkModule.forRoot(), |
|||
], |
|||
providers: [ |
|||
{ provide: LocalizerService, useFactory: () => new LocalizerService(translations) }, |
|||
{ provide: UIOptions, useFactory: () => new UIOptions({}) }, |
|||
], |
|||
}), |
|||
], |
|||
} as Meta; |
|||
|
|||
const Template: Story<DateTimeEditorComponent> = (args: DateTimeEditorComponent) => ({ |
|||
props: args, |
|||
}); |
|||
|
|||
export const Date = Template.bind({}); |
|||
|
|||
Date.args = { |
|||
mode: 'Date', |
|||
}; |
|||
|
|||
export const DateTime = Template.bind({}); |
|||
|
|||
DateTime.args = { |
|||
mode: 'DateTime', |
|||
}; |
|||
Loading…
Reference in new issue