Add section area color and demo menu export

2015-09-30 17:55:47 +02:00
parent 81d4545104
commit 6588a97560
21 changed files with 372 additions and 15 deletions
@@ -11,12 +11,16 @@ App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
    not @get('section.editmode') and @get('section_area.height') > @get('section_area.width')
  right_half: Ember.computed 'section_area.position_x', 'section_area.width', 'section_area.section.width', ->
    @get('section_area.position_x') + (@get('section_area.width') / 2) > (@get('section_area.section.width') / 2)
-  style: Ember.computed  'offsetX', 'offsetY', 'pixelWidth', 'pixelHeight', ->
+  style: Ember.computed  'offsetX', 'offsetY', 'pixelWidth', 'pixelHeight', 'section_area.color', ->
+    background_color = @get('section_area.color')
+    color = if App.CssObject.isColorDark(background_color) then 'white' else 'black'
    App.CssObject.create(
      width: @get('pixelWidth')
      height: @get('pixelHeight')
      left: @get('offsetX')
      top: @get('offsetY')
+      "background-color": background_color
+      color: color
      "line-height": @get('pixelHeight')
    ).toString()
  draggable: (->  if @get('section.editmode') then true else false ).property('section.editmode')
@@ -0,0 +1,18 @@
+App.modals.SectionAreaController = App.modals.BaseController.extend
+  colors: (->
+    # taken from http://www.somacon.com/p142.php
+    [
+      '#AAAAAA'
+      '#458B74'
+      '#838B8B'
+      '#8B7D6B'
+      '#00008B'
+      '#8B2323'
+      '#8A2BE2'
+      '#458B00'
+      '#EEAD0E'
+    ]
+  ).property()
+  actions:
+    setColor: (color)->
+      @set 'model.color', color
@@ -6,6 +6,7 @@ App.SectionArea = DS.Model.extend Ember.Validations.Mixin,
  position_x: attr 'number', defaultValue: 0
  position_y: attr 'number', defaultValue: 0
  rounded: attr 'boolean', defaultValue: false
+  color: attr 'string', defaultValue: '#AAAAAA'
  section: DS.belongsTo('section', async: false)
  validations:
    title: {presence: true}
@@ -8,3 +8,18 @@ App.CssObject = Ember.Object.extend
        v = "#{v}px" if @isNumeric.test(v)
      ret += "#{k}:#{v};"
    ret.htmlSafe()
+App.CssObject.reopenClass
+  rgb_to_numeric: (rgb_hex)->
+    #http://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
+    rgb_hex = rgb_hex.substring(1)
+    rgb = parseInt(rgb_hex, 16)
+    r = (rgb >> 16) & 0xff
+    g = (rgb >>  8) & 0xff
+    b = (rgb >>  0) & 0xff
+    [r, g, b]
+
+  isColorDark: (rgb_hex)->
+    return false unless rbg_hex.match /#[0-9a-zA-Z]{6}/
+    [r, g, b] = @rgb_to_numeric(rgb_hex)
+    luma = 0.2126 * r + 0.7152 * g + 0.0722 * b # per ITU-R BT.709
+    luma < 40
@@ -1 +1 @@
-span.fa.fa-random
+= table-number list.table.number
@@ -15,7 +15,6 @@ if list.active
  .display-row
    .display-label=t 'models.table'
    .display-field
-      = table-number list.table.number
      = button-change-list-table list=list
 .display-row
  .display-label &nbsp;
@@ -1,7 +1,12 @@
-h3= tables.length
+h4=t 'modal.change_list_table.subtitle' current_table_number=model.table.number
+.user-info-container
+  each model.users as |user|
+    = user.avatar_tag
 each sections as |section|
  h3= section.title
  ul.change-list-table-section-tables
    each section.sorted_tables as |table|
      unless table.active_list
        li: a{action "moveToTable" table}= table-number table.number
+hr
+button.modal-close{action "close"}=t 'modal.change_list_table.close_button'
@@ -19,6 +19,12 @@ p= t 'section_area.modal.explanation'
 .form-row.rounded
  .form-label= t 'attributes.section_area.rounded'
  .form-field= boolean-switch value=model.rounded
+.form-row.color
+  .form-label= t 'attributes.employee.color'
+  .form-field.full
+    span.current-color= colorbox model.color
+    each colors as |color|
+      a{action "setColor" color}= colorbox color
 hr
 button.modal-close{action "close"}=t 'section_area.modal.close_button'
 button.modal-confirm.right{action "save"} disabled=model.isInvalid
@@ -17,8 +17,8 @@
 if(!Modernizr.cssanimations){
  window.location = "/unsupported-browser";
 }
-
 var Qstorage = localStorage;
+
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);

@@ -19,6 +19,7 @@ td.boolean
 .change-list-table-button
  +button($bg: $warning-color, $padding: $button-tny)
  margin: 0
+  margin-bottom: 8px
 .change-list-table-section-tables
  list-style: none
  +clearfix
@@ -1,6 +1,5 @@
 .section-area-container
  position: absolute
-  background-color: #aaa
  text-align: center
  &.rounded
    border-radius: 999px
@@ -30,7 +30,7 @@ module Suppliers
    private

    def section_area_params
-      params.require(:section_area).permit %i[title width height position_x position_y section_id rounded]
+      params.require(:section_area).permit %i[title width height position_x position_y section_id rounded color]
    end
  end
 end
@@ -7,6 +7,7 @@ class SectionArea
  property :position_x, type: Float, default: 0
  property :position_y, type: Float, default: 0
  property :rounded, type: :boolean, default: false
+  property :color
  belongs_to :section
  belongs_to :supplier

@@ -1,5 +1,5 @@
 class Suppliers::SectionAreaSerializer
  include Qwaiter::SupplierBaseSerializer
-  attributes :title, :width, :height, :position_x, :position_y, :rounded
+  attributes :title, :width, :height, :position_x, :position_y, :rounded, :color
  has_one :section, serializer: Suppliers::SectionSerializer
 end