Permalink
Browse files

feature: Time-Picker added

  • Loading branch information...
MikeMitterer committed Oct 20, 2017
1 parent a7e5d66 commit d430b46f3406495f2b7d7c607d4398f57e2b6190
@@ -43,5 +43,6 @@
@import "properties/properties";
@import "property/property";
@import "snackbar/snackbar";
@import "timepicker/timepicker";
@@ -1,7 +1,6 @@
@import "../scrollbars/mixins";
@import "variables";
@import "mixin";
.mdl-datepicker {
display : block;
@@ -78,6 +77,8 @@
justify-content : space-between; // ⇾
align-content : space-around; // ||
align-items : center; // ↓
width: 100%;
height : $_datepicker_line_height;
> .mdl-datepicker__dom--day {
@@ -126,7 +127,8 @@
}
ul {
width: 100%;
li {
display : flex;
flex-direction : row;

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -58,4 +58,37 @@
$rot: ($rot + $angle);
}
}
}
// Draw Center-Point in hours-circle and minutes-circle
@mixin set_center_point() {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin-top: -2px;
margin-left: -2px;
border-radius: 100%;
&:before {
content : " ";
width : 2px;
height : $_timepicker_radius-1-12 / 2;
top : 0;
bottom : 0;
left : 50%;
z-index : 1;
display : block;
margin-left : -1px;
position : absolute;
// This draws the line (hand)
border-left: 2px solid;
transform: translate(0px,6px);
}
transform : rotate(0deg);
}
@@ -0,0 +1,180 @@
@import "variables";
@import "mixin";
.mdl-timepicker {
.mdl-timepicker__time {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; // ⇾
align-content: space-between; // ||
align-items: flex-start; // ↓
.mdl-timepicker__time--hour, .mdl-timepicker__time--minute {
opacity : 0.8;
cursor : pointer;
&.is-active {
opacity : 1;
}
}
}
.mdl-timepicker__hours {
@at-root .mdl-timepicker.show-minute-view {
.mdl-timepicker__hours {
display: none;
}
}
width: $_timepicker_radius;
height: $_timepicker_radius;
border-radius: 100%;
position: relative;
&__center {
@include set_center_point();
}
$angle: (360deg / 12);
$rot: (0deg - ($angle * 5)); // 0deg points to 6 o`clock
@for $i from 1 through 12 {
&--#{$i} {
.mdl-timepicker__hours__center {
transform : rotate($rot);
}
}
&--#{$i + 12} {
.mdl-timepicker__hours__center {
transform : rotate($rot);
&:before {
height : $_timepicker_radius-13-24 / 2;
}
}
}
$rot: ($rot + $angle);
}
.mdl-timepicker__hours__circle--1-12 {
top: (($_timepicker_radius - $_timepicker_radius-1-12) / 2);
left: (($_timepicker_radius - $_timepicker_radius-1-12) / 2);
@include distribute-on-circle(12, -60deg, $_timepicker_radius-1-12, $_timepicker_radius-item);
.debug & {
border: solid 1px tomato;
}
li { }
}
.mdl-timepicker__hours__circle--13-24 {
top: ((($_timepicker_radius - $_timepicker_radius-13-24) / 2) -
($_timepicker_radius-item / 2) + $_timepicker_inner_circle-top-margin);
left: (($_timepicker_radius - $_timepicker_radius-13-24) / 2);
@include distribute-on-circle(12, -60deg, $_timepicker_radius-13-24, $_timepicker_radius-item);
position: absolute;
.debug & {
border : solid 1px blue;
}
}
li {
border-radius: 100%;
cursor: pointer;
.debug & {
border : 1px solid blueviolet;
}
}
}
.mdl-timepicker__minutes {
display: none;
@at-root .mdl-timepicker.show-minute-view {
.mdl-timepicker__minutes {
display: block;
}
}
width: $_timepicker_radius;
height: $_timepicker_radius;
border-radius: 100%;
position: relative;
&__center {
@include set_center_point();
}
$angle: (360deg / 12);
$rot: (0deg - ($angle * 5)); // 0deg points to 6 o`clock
$i: 0;
@while $i <= 55 {
&--#{$i} {
.mdl-timepicker__minutes__center {
transform : rotate($rot);
}
}
$i: $i + 5;
$rot: ($rot + $angle);
}
&__circle {
top: (($_timepicker_radius - $_timepicker_radius-1-12) / 2);
left: (($_timepicker_radius - $_timepicker_radius-1-12) / 2);
@include distribute-on-circle(12, -60deg, $_timepicker_radius-1-12, $_timepicker_radius-item);
.debug & {
border: solid 1px tomato;
}
}
li {
border-radius: 100%;
cursor: pointer;
.debug & {
border : 1px solid blueviolet;
}
}
}
}
// Special Time-Picker-Dialog settings
.mdl-dialog.mdl-timepicker {
.mdl-dialog-container & {
max-height: 90%;
}
.mdl-dialog__toolbar {
min-height: 60px; // Padding top+bottom 18px x 2 + 60 = 96
justify-content: center; // ↓
align-content: space-between; // =
align-items: center; // ⇾
}
.mdl-dialog__content {
padding: 18px 18px 0 18px;
}
.mdl-dialog__actions {
padding-top: 0;
padding-right: 0;
margin-right: -8px;
margin-bottom: 2px;
}
}
@@ -0,0 +1,6 @@
$_timepicker_width: 330px;
$_timepicker_radius: 292px;
$_timepicker_radius-1-12: 250px;
$_timepicker_radius-13-24: 160px;
$_timepicker_radius-item: 36px;
$_timepicker_inner_circle-top-margin: 3px;
View
@@ -21,6 +21,7 @@ library mdldialog;
import 'dart:html' as dom;
import 'dart:async';
import 'dart:math' as math;
import 'package:intl/intl.dart';
import 'package:intl/date_symbols.dart';
import 'package:intl/date_symbol_data_local.dart';
@@ -45,6 +46,7 @@ part "src/dialog/MaterialConfirmDialog.dart";
part "src/dialog/MaterialSnackbar.dart";
part "src/dialog/MaterialNotification.dart";
part "src/dialog/MaterialDatePicker.dart";
part "src/dialog/MaterialTimePicker.dart";
part "src/dialog/components/MaterialDialogComponent.dart";
@@ -258,7 +258,9 @@ class MaterialDatePicker extends MaterialDialog {
/// Mo, Th, ...
void _initWeekdays() {
_weekdays.clear();
final List weekdays = dateTimeSymbolMap()[Intl.defaultLocale].STANDALONESHORTWEEKDAYS;
//
final String locale = Intl.shortLocale(Intl.defaultLocale);
final List weekdays = dateTimeSymbolMap()[locale].STANDALONESHORTWEEKDAYS;
// We start with Monday
for(int index = 1;index < weekdays.length;index++) {
@@ -184,7 +184,7 @@ abstract class MaterialDialog extends Object with TemplateComponent, MdlEventLis
}
idCounter++;
_logger.fine("show end (Dialog is rendered, got ID: ${_elementID})!");
_logger.info("show end (Dialog is rendered, got ID: ${_elementID})!");
}
if(dialogIDCallback != null) {
@@ -306,7 +306,7 @@ abstract class MaterialDialog extends Object with TemplateComponent, MdlEventLis
} else {
_logger.info("Could not find element with ID: ${_elementSelector}");
_logger.fine("Could not find element with ID: ${_elementSelector}");
_destroyContainer();
_callCallbacksAndQuit();
}
Oops, something went wrong.

0 comments on commit d430b46

Please sign in to comment.