add bookmark button

filled: .filled.bookmark.icon
empty: .bookmark.icon

We need to store the bookmark settings per user.

app/assets/images/sprite.svg

@@ -157,7 +157,7 @@
             <path d="M0.146446609,8.85355339 C0.341708755,9.04881554 0.658291245,9.04881554 0.853553391,8.85355339 L8.85355339,0.853553391 C9.04881554,0.658291245 9.04881554,0.341708755 8.85355339,0.146446609 C8.65829124,-0.0488155365 8.34170876,-0.0488155365 8.14644661,0.146446609 L0.146446609,8.14644661 C-0.0488155365,8.34170876 -0.0488155365,8.65829124 0.146446609,8.85355339 L0.146446609,8.85355339 Z" id="Path-1-copy" sketch:type="MSShapeGroup"></path>
         </g>
         <path d="M86.8928943,315.114214 L92.6000011,309.407107 L91.1857875,307.992893 L86.9000011,312.292893 L82.6000011,307.992893 L81.1857875,309.407107 L86.8928943,315.114214 L86.8928943,315.114214 Z" id="select-arrow" fill="#C5C5C5" sketch:type="MSShapeGroup"></path>
-        <path d="M111.792894,308 L113.292894,311.411732 L116.792894,311.962011 L114.292894,314.713408 L114.892894,318.455307 L111.792894,316.694413 L108.692894,318.455307 L109.292894,314.713408 L106.792894,311.962011 L110.292894,311.411732 L111.792894,308 Z" id="bookmark-filled" fill="#FAAB00" sketch:type="MSShapeGroup"></path>
+        <path d="M112.792894,307 L114.292894,310.411732 L117.792894,310.962011 L115.292894,313.713408 L115.892894,317.455307 L112.792894,315.694413 L109.692894,317.455307 L110.292894,313.713408 L107.792894,310.962011 L111.292894,310.411732 L112.792894,307 Z" id="bookmark-filled" fill="#FAAB00" sketch:type="MSShapeGroup"></path>
         <path d="M99.792894,307.720062 L101.292894,311.131794 L104.792894,311.682073 L102.292894,314.43347 L102.892894,318.175369 L99.792894,316.414475 L96.692894,318.175369 L97.292894,314.43347 L94.792894,311.682073 L98.292894,311.131794 L99.792894,307.720062 Z" id="bookmark-empty" stroke="#808080" opacity="0.3" sketch:type="MSShapeGroup"></path>
         <path d="M4.63842857,325.446435 C6.0955925,325.446435 7.27685714,324.227209 7.27685714,322.723217 C7.27685714,321.219226 6.0955925,320 4.63842857,320 C3.18126464,320 2,321.219226 2,322.723217 C2,324.227209 3.18126464,325.446435 4.63842857,325.446435 L4.63842857,325.446435 L4.63842857,325.446435 Z M11.6386813,325.446957 C13.0959848,325.446957 14.2773626,324.227614 14.2773626,322.723478 C14.2773626,321.219343 13.0959848,320 11.6386813,320 C10.1813778,320 9,321.219343 9,322.723478 C9,324.227614 10.1813778,325.446957 11.6386813,325.446957 L11.6386813,325.446957 L11.6386813,325.446957 Z M17.6386813,325.446957 C19.0959848,325.446957 20.2773626,324.227614 20.2773626,322.723478 C20.2773626,321.219343 19.0959848,320 17.6386813,320 C16.1813778,320 15,321.219343 15,322.723478 C15,324.227614 16.1813778,325.446957 17.6386813,325.446957 L17.6386813,325.446957 L17.6386813,325.446957 Z M15.2232198,326.311217 L7.69893407,326.311217 C7.05594505,326.311217 6.53478022,326.84913 6.53478022,327.512261 L6.53478022,334.378348 C6.53478022,335.042261 7.05594505,335.579391 7.69893407,335.579391 L8.05707692,335.579391 L8.05707692,344.070696 L14.7278352,344.070696 L14.7278352,335.579391 L15.2232198,335.579391 C15.8662088,335.579391 16.3868681,335.042 16.3868681,334.378348 L16.3868681,327.512261 C16.3866154,326.849391 15.8662088,326.311217 15.2232198,326.311217 L15.2232198,326.311217 L15.2232198,326.311217 Z M4.89343956,334.378609 L4.89343956,327.512522 C4.89343956,327.083131 4.99024176,326.678783 5.15326374,326.311479 L1.26752747,326.311479 C0.625043956,326.311479 0.103879121,326.849392 0.103879121,327.512522 L0.103879121,334.378609 C0.103879121,335.042522 0.625043956,335.579653 1.26752747,335.579653 L1.62592308,335.579653 L1.62592308,344.070957 L6.41523077,344.070957 L6.41523077,336.953392 C5.51216484,336.472348 4.89343956,335.498522 4.89343956,334.378609 L4.89343956,334.378609 L4.89343956,334.378609 Z M21.7572418,326.311218 L17.7691429,326.311218 C17.9321648,326.678522 18.0292198,327.083131 18.0292198,327.512261 L18.0292198,334.378348 C18.0292198,335.554348 17.3468022,336.567566 16.3696813,337.020957 L16.3696813,344.070696 L21.2623626,344.070696 L21.2623626,335.579392 L21.756989,335.579392 C22.3997253,335.579392 22.9211429,335.042 22.9211429,334.378348 L22.9211429,327.512261 C22.9213956,326.849392 22.3997253,326.311218 21.7572418,326.311218 L21.7572418,326.311218 L21.7572418,326.311218 Z" id="dark-group" fill="#586066" sketch:type="MSShapeGroup"></path>
         <path d="M42.9411437,320.857905 C42.8674423,320.340726 42.6070309,320.090217 42.0980002,320.034661 C41.9142382,320.015469 41.7285108,320.001327 41.5437661,320.001327 C36.1851864,319.999307 30.8266068,319.999307 25.4670445,320.003347 C25.219408,320.003347 24.969806,320.034661 24.7241349,320.077086 C24.3408878,320.139713 24.1237145,320.395272 24.0618054,320.781136 C24.0244634,321.013463 24.0028443,321.25286 24.0028443,321.489227 C23.9989136,325.132713 23.9998963,328.77721 24.0008789,332.420696 C24.0008789,332.524738 24.0028443,332.62979 24.0087404,332.733832 C24.0559093,333.546975 24.3389225,333.842939 25.1329317,333.858091 C26.1873524,333.877283 27.1995176,333.874252 28.2539383,333.880313 C28.476025,333.882333 28.9133197,333.880313 28.9133197,333.880313 L28.9133197,334.233854 C28.9133197,335.575287 28.9545925,336.91571 28.9585232,338.259164 C28.9595059,338.515733 28.9044755,338.830889 29.2061598,338.964224 C29.5009652,339.094529 29.694554,338.83998 29.8812641,338.66422 C31.5174341,337.133895 33.1565522,335.60559 34.7858434,334.068195 C34.9352115,333.927789 35.0855623,333.877283 35.2830819,333.878293 C37.2828452,333.882333 39.2826086,333.882333 41.2804066,333.880313 C41.5309911,333.880313 41.7825584,333.870212 42.0311777,333.846979 C42.6237365,333.794453 42.8733384,333.553036 42.958832,332.951007 C42.9843818,332.764136 42.9981394,332.572214 42.9981394,332.383322 C43.0001048,328.797412 43.0010874,325.210492 42.9981394,321.622562 C42.996174,321.369023 42.9765203,321.110434 42.9411437,320.857905 L42.9411437,320.857905 L42.9411437,320.857905 Z M27.9975446,324 C27.446616,324 27,324.443865 27,325 C27,325.552285 27.4463114,326 27.9975446,326 L35.0024554,326 C35.553384,326 36,325.556135 36,325 C36,324.447715 35.5536886,324 35.0024554,324 L27.9975446,324 L27.9975446,324 Z M28.0006529,328 C27.4480076,328 27,328.443865 27,329 C27,329.552285 27.4484532,330 28.0006529,330 L39.027347,330 C39.5799924,330 40.028,329.556135 40.028,329 C40.028,328.447715 39.5795467,328 39.027347,328 L28.0006529,328 L28.0006529,328 Z" id="dark-message" fill="#586066" sketch:type="MSShapeGroup"></path>

app/assets/javascripts/app/controllers/_application_controller_form.js.coffee

@@ -1430,6 +1430,7 @@ class App.ControllerForm extends App.Controller
         App.view('generic/attribute')(
           attribute: attribute,
           item:      '',
+          bookmarkable: @bookmarkable
         )
       )
       fullItem.find('.controls').prepend( item )

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -4,6 +4,7 @@ class App.TicketZoom extends App.Controller
 
   events:
     'click .js-submit': 'submit'
+    'click .js-bookmark': 'bookmark'
 
   constructor: (params) ->
     super
@@ -241,6 +242,7 @@ class App.TicketZoom extends App.Controller
             ]
             filter:    @form_meta.filter
             params:    defaults
+            bookmarkable: true
           )
           #console.log('Ichanges', modelDiff, task_state, ticket.attributes())
           @markFormDiff( modelDiff )
@@ -617,6 +619,9 @@ class App.TicketZoom extends App.Controller
         @fetch( ticket.id, true )
     )
 
+  bookmark: (e) =>
+    $(e.currentTarget).find('.bookmark.icon').toggleClass('filled')
+
   taskGet: (area) =>
     return {} if !App.TaskManager.get(@task_key)
     @localTaskData = App.TaskManager.get(@task_key).state || {}

app/assets/javascripts/app/views/generic/attribute.jst.eco

@@ -1,7 +1,17 @@
 <div class="<%= @attribute.tag %> form-group<%= " #{ @attribute.item_class }" if @attribute.item_class %>">
-  <div class="horizontal">
+  <div class="formGroup-label">
     <label for="<%= @attribute.id %>"<% if @attribute.label_class: %> class="<%= @attribute.label_class %>"<% end %>><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label>
-    <%- @item %><% if @attribute.note: %><div class="align-right help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"><div class="help icon"></div></div><% end %>
+    <%- @item %>
+    <% if @bookmarkable: %>
+    <div class="align-right js-bookmark formGroup-bookmark">
+      <div class="filled bookmark icon"></div>
+    </div>
+    <% end %>
+    <% if @attribute.note: %>
+    <div class="align-right help-message" title="<%- @Ti( @attribute.note ) + ' ' %>">
+      <div class="help icon"></div>
+    </div>
+    <% end %>
   </div>
   <div class="controls">
 	<% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %>

app/assets/stylesheets/zammad.css.scss

@@ -548,13 +548,40 @@ fieldset > *:not(.form-group) .form-control {
   margin-right: 4px;
 }
 
+.form-group {
+  margin-bottom: 16px;
+}
+
 .form-group + .form-group {
   margin-top: 0;
 }
 
-.form-group label {
+.formGroup-label {
   padding: 0 2px;
-  margin-bottom: 6px;
+  margin-bottom: 3px;
+  position: relative;
+  @extend .horizontal;
+  @extend .center;
+  
+  label {
+    margin: 0;
+  }
+
+  .bookmark.icon {
+    margin-bottom: -1px;
+  }
+}
+
+.formGroup-bookmark {
+  @extend .u-clickable;
+  @extend .horizontal;
+  @extend .center;
+  @extend .reverse;
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  right: 0;
+  top: -10px;
 }
 
 .form-group .controls .richtext {
@@ -1486,6 +1513,16 @@ ol.tabs li {
     margin-top: -2px;
   }
 
+  .bookmark.icon {
+    width: 12px;
+    height: 12px;
+    background-position: -94px -307px;
+  }
+
+  .filled.bookmark.icon {
+    background-position: -107px -307px;
+  }
+
   .dark.group.icon {
     width: 23px;
     height: 24px;
@@ -2692,17 +2729,20 @@ footer {
     .form-group.is-changed:before {
       content: "";
       position: absolute;
-      top: 0;
+      top: 23px;
       left: -16px;
-      height: 100%;
+      bottom: 0;
       width: 3px;
-      background: repeating-linear-gradient(-45deg, hsl(193,18%,90%), hsl(193,18%,90%) 4px, transparent 4px, transparent 7px) repeat center;
+      background: repeating-linear-gradient(45deg, hsl(193,18%,90%), hsl(193,18%,90%) 5px, transparent 5px, transparent 9px) repeat center;
-      background-size: 9px 9px;
+      background-size: 11px 11px;
     }
 
     .form-inline .form-group.is-changed:before {
       width: 100%;
       height: 3px;
+      top: 0;
+      left: 0;
+      bottom: auto;
     }
 
     .form-group.is-changed label {
@@ -2717,7 +2757,7 @@ footer {
       width: 5px;
       height: 5px;
       top: 50%;
-      margin-top: -4px;
+      margin-top: -3px;
       border-radius: 100%;
       background: hsl(198,19%,72%);
     }