Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Bug 845110 - Fix margins and font size in edit calendar event ui #9025

Closed
wants to merge 1 commit into from

2 participants

@gaye
Owner

No description provided.

@gaye
Owner

@samjoch Updated UI. Also adding @lightsofapollo since we removed seconds from events in doing this which is a more fundamental calendar change.

@lightsofapollo

@gaye Why removing seconds? They are technically part of the spec for time inputs... I feel like we have a lot of inconsistencies around time and the way to fix those is with an overlay above the actual time input.

@gaye
Owner

@lightsofapollo So the deal was that the mockup I saw here https://bug845110.bugzilla.mozilla.org/attachment.cgi?id=718753 had seconds removed from the input, so I figured they should be pulled at the model/data layer too. We could hide seconds in the input UI and keep them at the data layer though. Does that seem better?

apps/calendar/js/utils/input_parser.js
((6 lines not shown))
*
* @param {String} value 23:20:50.52, 17:39:57.
- * @return {Object} { hours: 23, minutes: 20, seconds: 50 }.
+ * @return {Object} { hours: 23, minutes: 20, seconds: 0 }.
@lightsofapollo Owner

why have seconds in docs ?

@gaye Owner
gaye added a note

Will remove!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@gaye gaye closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
17 apps/calendar/js/utils/input_parser.js
@@ -10,10 +10,10 @@ Calendar.ns('Utils').InputParser = (function() {
_timeParts: ['hours', 'minutes', 'seconds'],
/**
- * Import HTML5 input[type="time"] string value
+ * Import HTML5 input[type="time"] string value with seconds == 0
*
* @param {String} value 23:20:50.52, 17:39:57.
- * @return {Object} { hours: 23, minutes: 20, seconds: 50 }.
+ * @return {Object} { hours: 23, minutes: 20 }.
*/
importTime: function(value) {
var result = {
@@ -31,7 +31,7 @@ Calendar.ns('Utils').InputParser = (function() {
var partName;
var i = 0;
- var len = InputParser._timeParts.length;
+ var len = Math.min(2, InputParser._timeParts.length);
for (; i < len; i++) {
partName = InputParser._timeParts[i];
@@ -53,15 +53,8 @@ Calendar.ns('Utils').InputParser = (function() {
exportTime: function(value) {
var hour = value.getHours();
var minute = value.getMinutes();
- var second = value.getSeconds();
-
- var result = '';
-
- result += InputParser.padNumber(hour) + ':';
- result += InputParser.padNumber(minute) + ':';
- result += InputParser.padNumber(second);
-
- return result;
+ return InputParser.padNumber(hour) + ':' +
+ InputParser.padNumber(minute);
},
/**
View
34 apps/calendar/style/modify_event_view.css
@@ -4,8 +4,9 @@
}
#modify-event-view form ol {
- margin: 1rem 1rem 0 1rem;
+ margin: 1rem;
overflow: hidden;
+ padding: 0 0.2rem;
}
#modify-event-view .button {
@@ -20,17 +21,38 @@
margin: 0rem;
}
+#modify-event-view form ol li * {
+ font-size: 1.7rem !important;
+}
+
+#modify-event-view form ol li a,
+#modify-event-view form ol li h3 {
+ font-weight: normal;
+ line-height: 3rem;
+ padding-left: 1.5rem;
+}
+
+#modify-event-view form ol li input {
+ padding-left: 1.5rem;
+}
+
+#modify-event-view form ol li span input,
+#modify-event-view form ol li span select {
+ padding-left: 0;
+ text-indent: -0.2rem;
+}
+
#modify-event-view li.end-date,
#modify-event-view li.start-date {
- width: 60%;
float: left;
+ width: 60%;
}
#modify-event-view li.end-time,
#modify-event-view li.start-time {
+ float: left;
text-align: center;
width: calc(40% - 1px);
- float: left
}
#modify-event-view li.notes {
@@ -38,7 +60,7 @@
}
#modify-event-view li.notes textarea {
- padding: 1rem;
+ padding: 1rem 1rem 1rem 1.5rem;
height: 100%;
line-height: 1.3em;
overflow-y: auto;
@@ -46,11 +68,7 @@
#modify-event-view li.allday,
#modify-event-view h3 {
- padding: 0 1rem;
position: relative;
- font-size: 1.4rem;
- line-height: 3rem;
- font-weight: normal;
}
#modify-event-view li.allday > label {
View
18 apps/calendar/test/unit/input_parser_test.js
@@ -18,12 +18,12 @@ suite('input_parser', function() {
];
var expected = [
- { hours: 23, minutes: 20, seconds: 0 },
- { hours: 23, minutes: 20, seconds: 15 },
- { hours: 17, minutes: 39, seconds: 57 },
- { hours: 1, minutes: 1, seconds: 1 },
- { hours: 0, minutes: 0, seconds: 0 },
- { hours: 0, minutes: 0, seconds: 0 }
+ { hours: 23, minutes: 20 },
+ { hours: 23, minutes: 20 },
+ { hours: 17, minutes: 39 },
+ { hours: 1, minutes: 1 },
+ { hours: 0, minutes: 0 },
+ { hours: 0, minutes: 0 }
];
input.forEach(function(item, idx) {
@@ -44,8 +44,8 @@ suite('input_parser', function() {
];
var expected = [
- '07:30:45',
- '00:00:00'
+ '07:30',
+ '00:00'
];
input.forEach(function(item, idx) {
@@ -122,7 +122,7 @@ suite('input_parser', function() {
test('#formatInputDate', function() {
var expected = new Date(
- 2012, 0, 31, 7, 30, 45
+ 2012, 0, 31, 7, 30, 0
);
var actual = subject.formatInputDate(
Something went wrong with that request. Please try again.