couleur ribbons: the ribbon display is not editable, the round border…

… is optional https://trello.com/c/jGazxP6O/1494-bänder-verwaltung
fiedl · Sep 20, 2020 · 24d707b · 24d707b
1 parent 30521b2
commit 24d707b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 35 deletions.
diff --git a/app/vue/VueApp.coffee b/app/vue/VueApp.coffee
@@ -57,7 +57,7 @@ import Attachments from './components/attachments.vue'
 import AgeHistogramChart from './components/age_histogram_chart.vue'
 import StatusPieChart from './components/status_pie_chart.vue'
 import HeraldicColorSelect from './components/heraldic_color_select.vue'
-import EditableRibbon from './components/editable_ribbon.vue'
+import Ribbon from './components/ribbon.vue'
 import NewEventForm from './components/new_event_form.vue'
 import EventAttendees from './components/event_attendees.vue'
 
@@ -138,7 +138,8 @@ jQuery(document).ready ->
   Vue.component('vue_status_pie_chart', StatusPieChart)
   Vue.component('vue_heraldic_color_select', HeraldicColorSelect)
   Vue.component('vue-heraldic-color-select', HeraldicColorSelect)
-  Vue.component('vue_editable_ribbon', EditableRibbon)
+  Vue.component('vue_ribbon', Ribbon)
+  Vue.component('vue-ribbon', Ribbon)
   Vue.component('vue_new_event_form', NewEventForm)
   Vue.component('vue_event_attendees', EventAttendees)
 

diff --git a/app/vue/components/profile_fields/couleur.vue b/app/vue/components/profile_fields/couleur.vue
@@ -1,7 +1,7 @@
 <template lang="haml">
   %div
     .ribbon_section.mt-3.mb-2
-      %vue-editable-ribbon{':value': "apparent_colors"}
+      %vue-ribbon{':value': "apparent_colors"}
     %div
       %label.form-label Farben
       %vue-heraldic-color-select{'v-model': "profile_field.colors[0]", '@input': "update"}

diff --git a/app/vue/components/editable_ribbon.vue → app/vue/components/ribbon.vue b/app/vue/components/editable_ribbon.vue → app/vue/components/ribbon.vue
@@ -1,20 +1,14 @@
 <template lang="haml">
   %div
-    .wrapper.d-inline-block{':class': "selecting_color_index ? 'selecting' : ''"}
-      .section{'v-for': "(color, index) in selected_colors", ':style': "'background-color: ' + color.hex + ';' + 'height: ' + color_section_height(index)", '@click': "edit(index)", ':class': "index == selecting_color_index ? 'active' : ''"}
-    .dropdown-menu.color-pallette.d-inline-block.show{'v-if': "selecting_color_index && selecting_color_index > 0"}
-      %li.dropdown-item{'v-for': "color in colors", '@click': "select(color)", ':class': "color.name == selected_colors[selecting_color_index].name ? 'active' : ''"}
-        .color-circle.mr-2{':style': "'background-color: ' + color.hex"}
-        %span {{ color.name }}
-
+    .wrapper.d-inline-block{':class': "round ? 'round' : ''"}
+      .section{'v-for': "(color, index) in selected_colors", ':style': "'background-color: ' + color.hex + ';' + 'height: ' + color_section_height(index)"}
 </template>
 
 <script lang="coffee">
-  EditableRibbon =
-    props: ['value', 'editable']
+  Ribbon =
+    props: ['value', 'round']
     data: ->
       selected_colors: []
-      selecting_color_index: null
       colors: [
         {name: "Schwarz", hex: "#000000"},
         {name: "Weiß", hex: "#ffffff"},
@@ -35,12 +29,6 @@
         @selected_colors = []
         for color_string in @value
           @selected_colors.push @colors.find((color) -> (color.name.toLowerCase() == color_string.toLowerCase()))
-      edit: (index)->
-        if @editable
-          @selected_color_index = index
-      select: (color)->
-        @selected_colors[@selecting_color_index] = color
-        @selecting_color_index = null
       color_section_height: (index)->
         if @selected_colors.length > 5 # ribbon with ground color (Konkneiptant)
           if index == 0 or index == @selected_colors.length - 1
@@ -58,33 +46,20 @@
       value: (new_value)->
         @init()
 
-  export default EditableRibbon
+  export default Ribbon
 </script>
 
 <style lang="sass">
   .wrapper
-    border-radius: 50px
     overflow: hidden
     width: 5em
     height: 5em
     transform: rotate(36deg)
+  .wrapper.round
+    border-radius: 50px
     border: 1px solid #ddd
   .section
     width: 100%
   .section:first-child
     margin-top: 4%
-  .selecting
-    .section
-      opacity: 0.2
-    .section.active
-      opacity: 1
-
-  .color-circle
-    width: 1em
-    height: 1em
-    border-radius: 1em
-    border: 1px solid lightgrey
-  .dropdown-menu.color-pallette
-    left: auto
-    top: auto
 </style>