Bug 1569562 - Follow-up: fix width of input fields for title and location. r=pmorris
authorKhushil Mistry <khushil324@gmail.com>
Tue, 15 Oct 2019 07:42:10 +0200
changeset 37159 2738f47944c5e1ef169777a72805baae12568dc8
parent 37158 da6dd715f7cbbbd719a9417f0a718db85fce47f6
child 37160 7d63ed41d20c46fbbc7bce5ed33b30d7a15e924b
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewerspmorris
bugs1569562
Bug 1569562 - Follow-up: fix width of input fields for title and location. r=pmorris
calendar/base/themes/common/dialogs/calendar-event-dialog.css
calendar/base/themes/linux/dialogs/calendar-event-dialog.css
calendar/base/themes/osx/dialogs/calendar-event-dialog.css
calendar/base/themes/windows/dialogs/calendar-event-dialog.css
calendar/lightning/content/lightning-item-iframe.js
calendar/lightning/content/lightning-item-iframe.xul
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -158,82 +158,106 @@ label.label {
 #event-grid {
   padding-top: 8px;
   padding-inline-start: 8px;
   padding-inline-end: 10px;
   border-spacing: 0;
   height: 100%;
 }
 
-#event-grid menulist {
-  margin-bottom: 1px;
-}
-
 #event-grid > tr > th {
   text-align: left;
   font-weight: normal;
 }
 
-#event-grid > tr > td,
-.full-width {
+#event-grid > tr > td {
   width: 100%;
 }
 
 #event-grid-tab-box-row,
 #event-grid-tabbox,
 .event-grid-tabpanels {
   height: 100%;
 }
 
 .event-input-td > input {
-  width: 100%;
+  flex: 1;
+}
+
+#item-calendar,
+#item-categories {
+  flex: 1;
+}
+
+#event-grid-item-calendar-td,
+#event-grid-category-color-td,
+.event-input-td {
+  display: flex;
 }
 
-.event-input-td {
-  padding-top: 3px !important;
-  padding-bottom: 3px !important;
+#event-grid > tr > td > menulist,
+#event-grid checkbox,
+#event-grid td,
+#event-grid th,
+#event-grid deck {
+  margin: 0;
+  padding: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
 }
 
-#event-grid > tr > th,
-#event-grid > tr > td {
+#item-location,
+#item-title {
+  margin: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 4px;
+}
+
+#todo-status,
+#item-repeat,
+#item-alarm {
+  margin: 0;
+}
+
+#event-grid td,
+#event-grid th {
+  padding: 4px 0px;
+}
+
+#event-grid-startdate-row td,
+#event-grid-startdate-row th,
+#event-grid-enddate-row td,
+#event-grid-enddate-row th {
   padding: 0;
 }
 
 #item-categories-textbox {
   margin: 0px 8px;
 }
 
 #item-calendar,
 #item-categories {
   width: 100%;
 }
 
+.datepicker-menulist {
+  margin-left: 0 !important;
+}
+
 #event-grid-tab-vbox {
   padding-bottom: 10px;
   padding-inline-start: 8px;
   padding-inline-end: 10px;
 }
 
-:root {
-  --separator-padding: 6px;
-}
-
 .above-separator {
-  padding-bottom: var(--separator-padding) !important;
   border-bottom: 1px solid #A3A3A3;
 }
 
-.below-separator {
-  padding-top: calc(var(--separator-padding) - 2px) !important;
-}
-
-.below-separator-task {
-  padding-top: calc(var(--separator-padding) - 5px) !important;
-}
-
 /*--------------------------------------------------------------------
  *   Event dialog tabbox section
  *-------------------------------------------------------------------*/
 
 #event-grid-tabbox {
   margin: 5px 0;
 }
 
--- a/calendar/base/themes/linux/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/linux/dialogs/calendar-event-dialog.css
@@ -8,13 +8,8 @@
 
 #keepduration-button {
   min-width: 21px;
 }
 
 #timezone-endtime {
   margin-inline-start: 16px;
 }
-
-.event-input-td {
-  padding-right: 13px !important;
-  padding-left: 4px !important;
-}
--- a/calendar/base/themes/osx/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/osx/dialogs/calendar-event-dialog.css
@@ -18,13 +18,8 @@ hbox > #link-image-top {
   margin-top: 1.2em;
   margin-bottom: -1.2em;
 }
 
 vbox > #link-image-bottom {
   margin-top: -1.2em;
   margin-bottom: 1.2em;
 }
-
-.event-input-td {
-  padding-right: 8px !important;
-  padding-left: 3px !important;
-}
\ No newline at end of file
--- a/calendar/base/themes/windows/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/windows/dialogs/calendar-event-dialog.css
@@ -8,13 +8,8 @@
 
 #keepduration-button {
   min-width: 21px;
 }
 
 #timezone-endtime {
   margin-inline-start: 16px;
 }
-
-.event-input-td {
-  padding-right: 8px !important;
-  padding-left: 3px !important;
-}
--- a/calendar/lightning/content/lightning-item-iframe.js
+++ b/calendar/lightning/content/lightning-item-iframe.js
@@ -422,19 +422,16 @@ function onLoad() {
 
   window.recurrenceInfo = null;
   if (parentItem.recurrenceInfo) {
     window.recurrenceInfo = parentItem.recurrenceInfo.clone();
   }
 
   // Set initial values for datepickers in New Tasks dialog
   if (cal.item.isToDo(item)) {
-    document.getElementById("event-grid-startdate-th").classList.add("below-separator-task");
-    document.getElementById("event-grid-startdate-td").classList.add("below-separator-task");
-
     let initialDatesValue = cal.dtz.dateTimeToJsDate(args.initialStartDateValue);
     if (!gNewItemUI) {
       setElementValue("completed-date-picker", initialDatesValue);
       setElementValue("todo-entrydate", initialDatesValue);
       setElementValue("todo-duedate", initialDatesValue);
     }
   }
   loadDialog(window.calendarItem);
--- a/calendar/lightning/content/lightning-item-iframe.xul
+++ b/calendar/lightning/content/lightning-item-iframe.xul
@@ -141,17 +141,17 @@
                control="item-calendar"
                disable-on-readonly="true"/>
         <label id="item-calendar-aux-label"
                value="&event.calendar.label;"
                accesskey="&event.calendar.accesskey;"
                control="item-calendar"
                disable-on-readonly="true"/>
       </html:th>
-      <html:td>
+      <html:td id="event-grid-item-calendar-td">
         <menulist id="item-calendar"
                   disable-on-readonly="true"
                   oncommand="updateCalendar();"/>
       </html:td>
     </html:tr>
     <!-- Title -->
     <html:tr id="event-grid-title-row">
       <html:th>
@@ -210,19 +210,19 @@
             <menuseparator />
           </menupopup>
         </menulist>
       </html:td>
     </html:tr>
 
     <!-- All-Day -->
     <html:tr id="event-grid-allday-row">
-      <html:th class="below-separator">
+      <html:th>
       </html:th>
-      <html:td class="below-separator">
+      <html:td>
         <checkbox id="event-all-day"
                    class="event-only"
                    disable-on-readonly="true"
                    label="&event.alldayevent.label;"
                    accesskey="&event.alldayevent.accesskey;"
                    oncommand="onUpdateAllDay();"/>
       </html:td>
     </html:tr>
@@ -460,23 +460,23 @@
             </vbox>
           </deck>
         </hbox>
       </html:td>
     </html:tr>
 
     <!-- Reminder (Alarm) -->
     <html:tr id="event-grid-alarm-row">
-      <html:th class="above-separator below-separator">
+      <html:th class="above-separator">
         <label value="&event.reminder.label;"
                accesskey="&event.reminder.accesskey;"
                control="item-alarm"
                disable-on-readonly="true"/>
       </html:th>
-      <html:td class="above-separator below-separator">
+      <html:td class="above-separator">
         <hbox id="event-grid-alarm-picker-box"
               align="center">
           <menulist id="item-alarm"
                     disable-on-readonly="true"
                     oncommand="updateReminder()">
             <menupopup id="item-alarm-menupopup">
               <menuitem id="reminder-none-menuitem"
                         label="&event.reminder.none.label;"
@@ -572,31 +572,31 @@
                    hyperlink="true"
                    onclick="updateReminder()"/>
           </hbox>
         </hbox>
       </html:td>
     </html:tr>
 
     <html:tr id="event-grid-link-row" hidden="hidden">
-      <html:th class="above-separator below-separator">
+      <html:th class="above-separator">
         <label value="&event.url.label;"
                control="url-link"/>
       </html:th>
-      <html:td class="above-separator below-separator">
+      <html:td class="above-separator">
         <label id="url-link"
                class="text-link"
                onclick="launchBrowser(this.getAttribute('href'), event)"
                oncommand="launchBrowser(this.getAttribute('href'), event)"
                crop="end"/>
       </html:td>
     </html:tr>
   </html:table>
 
-  <vbox id="event-grid-tab-vbox" flex="1" class="below-separator">
+  <vbox id="event-grid-tab-vbox" flex="1">
     <!-- Multi purpose tab box -->
     <hbox id="event-grid-tab-box-row" flex="1">
       <tabbox id="event-grid-tabbox"
               selectedIndex="0"
               flex="1">
         <tabs id="event-grid-tabs">
           <tab id="event-grid-tab-description"
                label="&event.description.label;"