userNotifications layoutRef

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

@@ -438,10 +438,10 @@
                     <option value="4">
                       closed
                     </option>
-                    <option value="2">
+                    <option selected value="2">
                       open
                     </option>
-                    <option selected value="7">
+                    <option value="7">
                       pending close
                     </option>
                     <option value="3">
@@ -452,16 +452,6 @@
                 </div><span class="help-inline"></span> <span class="help-block"></span>
               </div>
             </div>
-            <div class="date form-group formGroup--bundle">
-              <div class="formGroup-label">
-                <label for="Ticket_187247_pending_time">Pending till <span>*</span></label>
-              </div>
-              <div class="controls">
-                <input type="text" value="10/28/2015" class="form-control js-datepicker">
-                <div class="controls-label">at</div>
-                <input type="text" value="08:00" class="form-control time js-timepicker">
-              </div>
-            </div>
             <div class="select form-group">
               <div class="formGroup-label">
                 <label for="Ticket_187247_priority_id">Priority <span>*</span></label>
@@ -485,21 +475,19 @@
             </div>
           </fieldset>
         </form>
+        <hr>
+        <div class="userNotifications">
+          <label>Notifications</label>
+          <div class="btn btn--small btn--fullWidth">
+            <%- @Icon('mute') %>
+            Unsubscribe
+          </div>
+          <span class="help-block">You’re receiving notifications because you wrote something.</span>
+        </div>
+        <hr>
         <div class="tags">
           <label>Tags</label>
           <ul class="list list--sidebar">
-            <li class="list-item">
-              <div class="list-item-name">
-                test
-              </div>
-              <div class="list-item-delete js-delete"></div>
-            </li>
-            <li class="list-item">
-              <div class="list-item-name">
-                123
-              </div>
-              <div class="list-item-delete js-delete"></div>
-            </li>
             <li class="list-item">
               <div class="list-item-name">
                 planeten

app/assets/stylesheets/svg-dimensions.css

@@ -45,6 +45,7 @@
 .icon-mood-ok { width: 60px; height: 59px; }
 .icon-mood-super-bad { width: 60px; height: 59px; }
 .icon-mood-supergood { width: 60px; height: 59px; }
+.icon-mute { width: 16px; height: 16px; }
 .icon-note { width: 16px; height: 16px; }
 .icon-one-ticket { width: 48px; height: 10px; }
 .icon-organization { width: 16px; height: 16px; }
@@ -80,6 +81,7 @@
 .icon-trash { width: 16px; height: 16px; }
 .icon-twitter-button { width: 29px; height: 22px; }
 .icon-twitter { width: 17px; height: 17px; }
+.icon-unmute { width: 16px; height: 16px; }
 .icon-user { width: 16px; height: 16px; }
 .icon-zoom-in { width: 20px; height: 20px; }
 .icon-zoom-out { width: 20px; height: 20px; }

app/assets/stylesheets/zammad.scss

@@ -304,7 +304,7 @@ pre code.hljs {
   display: inline-block;
   font-size: 14px;
   padding: 10px 24px 9px;
-  color: hsl(202,68%,54%);
+  color: hsl(0,0%,20%);
   background: white;
   border: 1px solid rgba(0,0,0,.1);
   outline: none !important;
@@ -319,6 +319,7 @@ pre code.hljs {
   .icon {
     vertical-align: middle;
     margin-top: -3px;
+    fill: currentColor;
   }
 
   &.btn--icon--last .icon {
@@ -339,6 +340,12 @@ pre code.hljs {
     padding-right: 12px;
   }
 
+  &.btn--fullWidth {
+    width: 100%;
+    text-align: center;
+    justify-content: center;
+  }
+
   &.btn--table {
     padding: 4px 9px;
     font-weight: 300;
@@ -4961,7 +4968,7 @@ footer {
   }
 
   .sidebar .text-muted {
-    color: hsl(198,19%,72%);
+    color: hsl(198,22%,82%);
   }
 
 .alert {
@@ -4993,6 +5000,10 @@ footer {
   margin: 20px 0;
 }
 
+.userNotifications label + .btn {
+  margin-top: 1px;
+}
+
 .list {
   padding: 0;
   margin-bottom: 5px;

public/assets/images/icons/mute.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>mute</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="mute" sketch:type="MSArtboardGroup" fill="#50E3C2">
+            <path d="M1,6 L1,10 L4,10 L8,13 L8,3 L4,6 L1,6 Z" id="speaker" sketch:type="MSShapeGroup"></path>
+            <path d="M11.2928932,8 L9.14644661,5.85355339 C8.95118446,5.65829124 8.95118446,5.34170876 9.14644661,5.14644661 C9.34170876,4.95118446 9.65829124,4.95118446 9.85355339,5.14644661 L12,7.29289322 L14.1464466,5.14644661 C14.3417088,4.95118446 14.6582912,4.95118446 14.8535534,5.14644661 C15.0488155,5.34170876 15.0488155,5.65829124 14.8535534,5.85355339 L12.7071068,8 L14.8535534,10.1464466 C15.0488155,10.3417088 15.0488155,10.6582912 14.8535534,10.8535534 C14.6582912,11.0488155 14.3417088,11.0488155 14.1464466,10.8535534 L12,8.70710678 L9.85355339,10.8535534 C9.65829124,11.0488155 9.34170876,11.0488155 9.14644661,10.8535534 C8.95118446,10.6582912 8.95118446,10.3417088 9.14644661,10.1464466 L11.2928932,8 Z" id="cross" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

public/assets/images/icons/unmute.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>unmute</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="unmute" sketch:type="MSArtboardGroup" fill="#50E3C2">
+            <path d="M1,6 L1,10 L4,10 L8,13 L8,3 L4,6 L1,6 Z" id="speaker" sketch:type="MSShapeGroup"></path>
+            <path d="M10.3269662,5.11520093 C12.5584764,6.5697767 12.5584764,9.4302233 10.3269662,10.8847991 C10.0956305,11.0355917 10.0303375,11.3453679 10.1811301,11.5767036 C10.3319227,11.8080392 10.6416989,11.8733323 10.8730346,11.7225397 C13.709787,9.87344607 13.709787,6.12655393 10.8730346,4.27746033 C10.6416989,4.12666771 10.3319227,4.19196076 10.1811301,4.42329644 C10.0303375,4.65463212 10.0956305,4.96440831 10.3269662,5.11520093 Z M11.526966,3.69306883 C14.8493449,5.85871065 14.8493449,10.1412893 11.526966,12.3069312 C11.2956303,12.4577238 11.2303373,12.7675 11.3811299,12.9988357 C11.5319225,13.2301713 11.8416987,13.2954644 12.0730344,13.1446718 C16.0006555,10.5845121 16.0006555,5.41548788 12.0730344,2.85532823 C11.8416987,2.70453561 11.5319225,2.76982866 11.3811299,3.00116434 C11.2303373,3.23250002 11.2956303,3.54227621 11.526966,3.69306883 Z M9.22696581,6.68064447 C10.2576781,7.35249847 10.2576781,8.64750153 9.22696581,9.31935553 C8.99563013,9.47014815 8.93033708,9.77992434 9.0811297,10.01126 C9.23192232,10.2425957 9.54169851,10.3078888 9.77303419,10.1570961 C11.4089886,9.0907243 11.4089886,6.9092757 9.77303419,5.84290387 C9.54169851,5.69211125 9.23192232,5.7574043 9.0811297,5.98873998 C8.93033708,6.22007566 8.99563013,6.52985185 9.22696581,6.68064447 Z" id="soundwave" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>