Holidays WIP

- naming: public holidays are gesetzliche feiertage. when you add your own holidays its just feiertage. so in general we should call it holidays
- controls: happy with it
- layout: not happy with it yet

app/assets/javascripts/app/views/calendar/index.jst.eco

@@ -17,14 +17,14 @@
 
 <% for calendar in @calendars: %>
 <div class="action" data-id="<%- calendar.id %>">
-  <div class="action-flow">
+  <div class="action-flow action-flow--row">
     <div class="action-row">
       <h2><span title="Last iCal Feed sync at: <%= calendar.last_sync %>: <%= calendar.last_log %>"><%- @Icon('status', 'ok inline') %></span> <%= calendar.name %></h2>
     </div>
     <div class="action-row">
       <div class="label"><%- @T('Timezone') %></div> <%= calendar.timezone %>
     </div>
-    <div class="action-block">
+    <div class="action-block action-block--flex">
       <div class="label"><%- @T('Business Hours') %></div>
       <table class="table table-fluid">
         <tr>
@@ -50,7 +50,7 @@
         </tr>
       </table>
     </div>
-    <div class="action-block">
+    <div class="action-block action-block--flex">
       <div class="label"><%- @T('Public Holidays') %></div>
       <table class="table table-fluid">
         <% for holiday, meta of calendar.public_holidays_preview: %>

app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco

@@ -797,6 +797,61 @@
   </tbody>
 </table>
 
+<h3>
+  Holidays
+</h3>
+<div class="settings-row">
+  <label class="inline-label">
+    <span class="radio-replacement radio-replacement--inline">
+      <input type="radio" name="holiday-radio" checked>
+      <%- @Icon('radio', 'icon-unchecked') %>
+      <%- @Icon('radio-checked', 'icon-checked') %>
+    </span>
+
+  Subscribe to public holidays in 
+
+  </label>
+  <div class="u-inlineBlock u-positionOrigin">
+    <select class="form-control form-control--small">
+      <option>Germany</option>
+    </select>
+    <%- @Icon('arrow-down', 'dropdown-arrow') %>
+  </div>
+
+  <span class="text-small text-muted">Powered by Google</span>
+</div>
+<div class="settings-row">
+  <label class="inline-label">
+    <span class="radio-replacement radio-replacement--inline">
+      <input type="radio" name="holiday-radio">
+      <%- @Icon('radio', 'icon-unchecked') %>
+      <%- @Icon('radio-checked', 'icon-checked') %>
+    </span>
+
+    Subscribe to ical feed 
+
+  </label>
+  <input class="form-control form-control--small form-control--inline" type="url">
+</div>
+
+<div class="settings-row">
+  <label class="inline-label">
+    <span class="checkbox-replacement checkbox-replacement--inline">
+      <input type="checkbox" checked>
+      <%- @Icon('checkbox', 'icon-unchecked') %>
+      <%- @Icon('checkbox-checked', 'icon-checked') %>
+    </span>
+
+    Auto-sync
+  </label>
+</div>
+
+<div class="settings-row">
+  <div class="btn btn--action align-right">
+    <%- @Icon('reload') %> Sync Now
+  </div>
+</div>
+
 <h3>Response Times <span class="subtitle">in Business Hours</span></h3>
 <table class="settings-list settings-list--toggleRow">
   <thead>

app/assets/stylesheets/zammad.css.scss

@@ -41,6 +41,14 @@ p {
   }
 }
 
+.text-muted {
+  color: hsl(60,1%,74%);
+}
+
+.text-small {
+  font-size: 12px;
+}
+
 .u-highlight {
   color: #0F94D6;
 }
@@ -101,6 +109,10 @@ blockquote {
   position: relative;
 }
 
+.u-inlineBlock {
+  display: inline-block;
+}
+
 .zIndex-1,
 .zIndex-2,
 .zIndex-3,
@@ -343,6 +355,11 @@ span[data-tooltip]:hover:before {
     display: inline-flex;
     align-items: center;
     
+    .icon {
+      margin: -2px 5px 0 -2px;
+      fill: hsl(0,0%,60%);
+    }
+    
     &.btn--slim {
       padding-left: 7px !important;
       padding-right: 7px !important;
@@ -633,6 +650,7 @@ table {
 .checkbox-replacement.checkbox-replacement--inline,
 .radio-replacement.radio-replacement--inline {
   display: inline-flex;
+  margin-right: 3px;
 }
 
 .checkbox-replacement input,
@@ -1040,6 +1058,7 @@ input[type=text],
 input[type=password],
 input[type=email],
 input[type=date],
+input[type=url],
 textarea,
 .form-control,
 .checkbox.form-group .checkbox {
@@ -1063,6 +1082,11 @@ textarea,
     padding: 0 8px;
     height: 31px;
   }
+
+  &.form-control--inline {
+    display: inline-block;
+    width: auto;
+  }
 }
 
 input[type=time] {
@@ -5824,6 +5848,10 @@ output {
   }
 }
 
+.settings-row {
+  margin-bottom: 10px;
+}
+
 .settings-list {
   border-collapse: separate;
   color: hsl(60,1%,34%);
@@ -6112,6 +6140,10 @@ output {
   .action-flow {
     display: flex;
     flex-wrap: wrap;
+    
+    &.action-flow--row {
+      flex-basis: 100%;
+    }
   }
 
   .action-separator {
@@ -6141,6 +6173,12 @@ output {
     }
   }
 
+  .action-block {
+    &.action-block--flex {
+      flex: 1;
+    }
+  }
+
   .action-row {
     flex-basis: 100%;
   }