Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve date picker demos second part #691

Merged
merged 3 commits into from Dec 2, 2019
Merged

Improve date picker demos second part #691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba0ee5f
Improve date picker demos second part
Nov 29, 2019
e2718ef
Improve styling examples
jouni Nov 29, 2019
20e072c
Fix issues
Dec 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions demo/date-picker-localization-demos.html
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ <h3>Localizing</h3>
cancel: 'peruuta',
firstDayOfWeek: 1,
monthNames:
'tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu'.split('_'),
'tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu'.split('_'),
weekdays: 'sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai'.split('_'),
weekdaysShort: 'su_ma_ti_ke_to_pe_la'.split('_'),
formatDate: function(dateObject) {
Expand All @@ -49,7 +49,7 @@ <h3>Localizing</h3>
</template>
</vaadin-demo-snippet>

<h3>Custom key input</h3>
<h3>Custom date parser</h3>
<p>You can use a 3rd party library to parse dates from the input text.</p>
<vaadin-demo-snippet id="date-picker-custom-key-input" when-defined="vaadin-date-picker">
<template preserve-content>
Expand Down
47 changes: 35 additions & 12 deletions demo/date-picker-styling-demos.html
View file
Open in desktop
Expand Up @@ -6,22 +6,41 @@
}
</style>

<h3>Small text field</h3>
<h3>Custom input field style</h3>
<vaadin-demo-snippet>
<template preserve-content>
<vaadin-date-picker theme="small" label="Label"></vaadin-date-picker>
<dom-module id="custom-input-field-style" theme-for="vaadin-text-field">
<template>
<style>
:host([theme~="custom-input-field-style"]) [part="input-field"] {
border: 1px solid black;
background-color: white;
}
</style>
</template>
</dom-module>
<vaadin-date-picker theme="custom-input-field-style" label="Label"></vaadin-date-picker>
</template>
</vaadin-demo-snippet>

<h3>Custom overlay border</h3>
<h3>Custom overlay style</h3>
<vaadin-demo-snippet>
<template preserve-content>
<dom-module id="custom-overlay-border" theme-for="vaadin-date-picker-overlay">
<dom-module id="custom-overlay-style" theme-for="vaadin-date-picker-overlay">
<template>
<style>
:host([theme~="custom-overlay-style"]) [part="overlay"] {
border: 0.5em solid black;
background-color: white;
background: var(--lumo-shade-80pct);
--lumo-header-text-color: var(--lumo-tint-80pct);
--lumo-body-text-color: var(--lumo-tint-60pct);
--lumo-secondary-text-color: var(--lumo-tint-50pct);
--lumo-tertiary-text-color: var(--lumo-tint-40pct);
--lumo-disabled-text-color: var(--lumo-tint-20pct);
--lumo-primary-color-10pct: var(--lumo-tint-5pct);
--lumo-primary-color-50pct: var(--lumo-tint-50pct);
--lumo-primary-text-color: var(--lumo-tint);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
</style>
</template>
Expand All @@ -30,19 +49,23 @@ <h3>Custom overlay border</h3>
</template>
</vaadin-demo-snippet>

<h3>Custom overlay font</h3>
<h3>Custom icon</h3>
<vaadin-demo-snippet>
<template preserve-content>
<dom-module id="custom-date-picker" theme-for=" vaadin-date-picker-overlay-content">
<template>ss
<dom-module id="custom-icon-style" theme-for="vaadin-date-picker">
<template>
<style>
:host([theme~="custom"]) {
font-family: monospace;
:host([theme~="custom-icon-style"]) [part="toggle-button"]::before {
display: none;
}

:host([theme~="custom-icon-style"]) [part="toggle-button"] {
background-image: url(icon.svg);
}
</style>
</template>
</dom-module>
<vaadin-date-picker theme="custom" label="Label"></vaadin-date-picker>
<vaadin-date-picker theme="custom-icon-style" label="Label"></vaadin-date-picker>
</template>
</vaadin-demo-snippet>

Expand Down
35 changes: 35 additions & 0 deletions demo/date-picker-theme-variants-demos.html
View file
Open in desktop
@@ -0,0 +1,35 @@
<dom-module id="date-picker-theme-variants-demos">
<template>
<style include="vaadin-component-demo-shared-styles">
:host {
display: block;
}
</style>

<h3>Text align</h3>
<vaadin-demo-snippet>
<template preserve-content>
<vaadin-date-picker value="1990-01-28" theme="align-left"></vaadin-date-picker>
<vaadin-date-picker value="1990-01-28" theme="align-center"></vaadin-date-picker>
<vaadin-date-picker value="1990-01-28" theme="align-right"></vaadin-date-picker>
</template>
</vaadin-demo-snippet>

<h3>Small text field</h3>
<vaadin-demo-snippet>
<template preserve-content>
<vaadin-date-picker theme="small" label="Label"></vaadin-date-picker>
</template>
</vaadin-demo-snippet>


</template>
<script>
class DatePickerThemeVariantsDemos extends DemoReadyEventEmitter(DatePickerDemo(Polymer.Element)) {
static get is() {
return 'date-picker-theme-variants-demos';
}
}
customElements.define(DatePickerThemeVariantsDemos.is, DatePickerThemeVariantsDemos);
</script>
</dom-module>
11 changes: 11 additions & 0 deletions demo/demos.json
View file
Open in desktop
Expand Up @@ -45,6 +45,17 @@
}
}
,
{
"name": "Theme Variants",
"url": "date-picker-theme-variants-demos",
"src": "date-picker-theme-variants-demos.html",
"meta": {
"title": "vaadin-date-picker Theme Variants Examples",
"description": "",
"image": ""
}
}
,
{
"name": "Styling",
"url": "date-picker-styling-demos",
Expand Down
1 change: 1 addition & 0 deletions demo/icon.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 30 additions & 6 deletions demo/index.html
View file
Open in desktop
Expand Up @@ -26,22 +26,46 @@
<body>
<vaadin-component-demo config-src="demos.json"></vaadin-component-demo>

<dom-module id="custom-overlay-font" theme-for="vaadin-date-picker-overlay-content">
<dom-module id="custom-input-field-style-" theme-for="vaadin-text-field">
<template>
<style>
:host([theme~="custom"]) {
font-family: monospace;
:host([theme~="custom-input-field-style"]) [part="input-field"] {
border: 1px solid black;
background-color: white;
}
</style>
</template>
</dom-module>

<dom-module id="custom-overlay-border-style" theme-for="vaadin-date-picker-overlay">
<dom-module id="custom-icon-style-" theme-for="vaadin-date-picker">
<template>
<style>
:host([theme~="custom-icon-style"]) [part="toggle-button"]::before {
display: none;
}

:host([theme~="custom-icon-style"]) [part="toggle-button"] {
background-image: url(icon.svg);
}
</style>
</template>
</dom-module>

<dom-module id="custom-overlay-style-" theme-for="vaadin-date-picker-overlay">
<template>
<style>
:host([theme~="custom-overlay-style"]) [part="overlay"] {
border: 0.5em solid black;
background-color: white;
background: var(--lumo-shade-80pct);
--lumo-header-text-color: var(--lumo-tint-80pct);
--lumo-body-text-color: var(--lumo-tint-60pct);
--lumo-secondary-text-color: var(--lumo-tint-50pct);
--lumo-tertiary-text-color: var(--lumo-tint-40pct);
--lumo-disabled-text-color: var(--lumo-tint-20pct);
--lumo-primary-color-10pct: var(--lumo-tint-5pct);
--lumo-primary-color-50pct: var(--lumo-tint-50pct);
--lumo-primary-text-color: var(--lumo-tint);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
</style>
</template>
Expand Down