icon

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-gem 'rails', '5.2.0'
+gem 'rails', '5.2.1'
 gem 'pg', '~> 1.0.0'
 
 gem 'webpacker', '3.5.3'

Gemfile.lock

@@ -1,50 +1,50 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.2.0)
+    actioncable (5.2.1)
-      actionpack (= 5.2.0)
+      actionpack (= 5.2.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailer (5.2.0)
+    actionmailer (5.2.1)
-      actionpack (= 5.2.0)
+      actionpack (= 5.2.1)
-      actionview (= 5.2.0)
+      actionview (= 5.2.1)
-      activejob (= 5.2.0)
+      activejob (= 5.2.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.2.0)
+    actionpack (5.2.1)
-      actionview (= 5.2.0)
+      actionview (= 5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       rack (~> 2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.2.0)
+    actionview (5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.2.0)
+    activejob (5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       globalid (>= 0.3.6)
-    activemodel (5.2.0)
+    activemodel (5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
-    activerecord (5.2.0)
+    activerecord (5.2.1)
-      activemodel (= 5.2.0)
+      activemodel (= 5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       arel (>= 9.0)
-    activestorage (5.2.0)
+    activestorage (5.2.1)
-      actionpack (= 5.2.0)
+      actionpack (= 5.2.1)
-      activerecord (= 5.2.0)
+      activerecord (= 5.2.1)
       marcel (~> 0.3.1)
-    activesupport (5.2.0)
+    activesupport (5.2.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (9.0.0)
     bcrypt (3.1.12)
-    bootsnap (1.3.0)
+    bootsnap (1.3.1)
       msgpack (~> 1.0)
     builder (3.2.3)
     coderay (1.1.2)
@@ -77,7 +77,7 @@ GEM
       guard (~> 2.1)
       guard-compat (~> 1.1)
       rspec (>= 2.99.0, < 4.0)
-    i18n (1.0.1)
+    i18n (1.1.0)
       concurrent-ruby (~> 1.0)
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
@@ -111,42 +111,42 @@ GEM
       thread_safe (~> 0.3, >= 0.3.1)
     method_source (0.9.0)
     mimemagic (0.3.2)
-    mini_mime (1.0.0)
+    mini_mime (1.0.1)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
     msgpack (1.2.4)
     multi_json (1.13.1)
     nenv (0.3.0)
     nio4r (2.3.1)
-    nokogiri (1.8.2)
+    nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
     notiffany (0.1.1)
       nenv (~> 0.1)
       shellany (~> 0.0)
-    oj (3.6.2)
+    oj (3.6.7)
     parslet (1.8.2)
     pg (1.0.0)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    puma (3.11.4)
+    puma (3.12.0)
     rack (2.0.5)
     rack-proxy (0.6.4)
       rack
-    rack-test (1.0.0)
+    rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (5.2.0)
+    rails (5.2.1)
-      actioncable (= 5.2.0)
+      actioncable (= 5.2.1)
-      actionmailer (= 5.2.0)
+      actionmailer (= 5.2.1)
-      actionpack (= 5.2.0)
+      actionpack (= 5.2.1)
-      actionview (= 5.2.0)
+      actionview (= 5.2.1)
-      activejob (= 5.2.0)
+      activejob (= 5.2.1)
-      activemodel (= 5.2.0)
+      activemodel (= 5.2.1)
-      activerecord (= 5.2.0)
+      activerecord (= 5.2.1)
-      activestorage (= 5.2.0)
+      activestorage (= 5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       bundler (>= 1.3.0)
-      railties (= 5.2.0)
+      railties (= 5.2.1)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
@@ -157,12 +157,12 @@ GEM
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.4)
       loofah (~> 2.2, >= 2.2.2)
-    railties (5.2.0)
+    railties (5.2.1)
-      actionpack (= 5.2.0)
+      actionpack (= 5.2.1)
-      activesupport (= 5.2.0)
+      activesupport (= 5.2.1)
       method_source
       rake (>= 0.8.7)
-      thor (>= 0.18.1, < 2.0)
+      thor (>= 0.19.0, < 2.0)
     rake (12.3.1)
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
@@ -192,7 +192,7 @@ GEM
     ruby_dep (1.5.0)
     shellany (0.0.1)
     signed_multiset (0.2.1)
-    sprockets (3.7.1)
+    sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     sprockets-rails (3.2.1)
@@ -235,7 +235,7 @@ DEPENDENCIES
   oj (~> 3.6.2)
   pg (~> 1.0.0)
   puma (~> 3.11)
-  rails (= 5.2.0)
+  rails (= 5.2.1)
   rails-controller-testing
   redcarpet (~> 3.4.0)
   rspec-rails (~> 3.7.2)

app/controllers/task_lists_controller.rb

@@ -4,7 +4,7 @@ class TaskListsController < ApplicationController
   before_action :set_task_list, only: [:show, :update, :destroy]
 
   def index
-    @task_lists = TaskList.for_user(current_user)
+    @task_lists = TaskList.for_user(current_user).order(created_at: :desc)
   end
 
   def show

app/javascript/components/AppIcon.vue

@@ -1,6 +1,6 @@
 <template>
-  <span class="icon" :class="sizeClass" @click="$emit('click', $event)" :style="{padding: wrapperPadding}">
+  <span class="icon" :class="sizeClass" @click="$emit('click', $event)">
-    <img ref="img" :class="['iconic', 'iconic-fluid', size]" :data-src="iconUrl" v-bind="extraIconAttributes" />
+    <img ref="img" :class="['iconic', 'iconic-fluid', size]" :data-src="iconUrl" v-bind="extraIconAttributes" :style="{padding: svgPadding}" />
   </span>
 </template>
 
@@ -33,7 +33,7 @@
   class SizeData {
     constructor(bulmaIconClass, defaultPadding) {
       this.bulmaIconClass = bulmaIconClass;
-      this.defaultPadding = defaultPadding;
+      this.defaultPadding = defaultPadding || null;
     }
   }
   
@@ -54,10 +54,10 @@
   };
 
   const sizeMap = {
-    sm: new SizeData('is-small', '2px'),
+    sm: new SizeData('is-small'),
-    md: new SizeData('', '3px'),
+    md: new SizeData(''),
-    lg: new SizeData('is-medium', '4px'),
+    lg: new SizeData('is-medium'),
-    xl: new SizeData('is-large', '5px')
+    xl: new SizeData('is-large')
   };
 
   export default {
@@ -89,6 +89,10 @@
         return iconMap[this.icon];
       },
 
+      sizeData() {
+        return sizeMap[this.size];
+      },
+
       iconUrl() {
         return this.iconData.url;
       },
@@ -103,11 +107,11 @@
       },
 
       sizeClass() {
-        return sizeMap[this.size].bulmaIconClass;
+        return this.sizeData.bulmaIconClass;
       },
 
-      wrapperPadding() {
+      svgPadding() {
-        return this.padding || sizeMap[this.size].defaultPadding;
+        return this.padding || this.sizeData.defaultPadding || "15%";
       }
     },
 
@@ -130,29 +134,6 @@
 
 <style lang="scss" scoped>
 
-  .icon /deep/ svg {
-    /*width: 100%;*/
-    /*height: 100%;*/
 
-    /*&.sm {*/
-      /*width: 0.75em;*/
-      /*height: 0.75em;*/
-    /*}*/
-
-    /*&.md {*/
-      /*width: 1em;*/
-      /*height: 1em;*/
-    /*}*/
-
-    /*&.lg {*/
-      /*width: 1.33em;*/
-      /*height: 1.33em;*/
-    /*}*/
-
-    /*&.xl {*/
-      /*width: 2em;*/
-      /*height: 2em;*/
-    /*}*/
-  }
 
 </style>

app/javascript/components/TheTaskListList.vue

@@ -2,8 +2,17 @@
   <div>
     <h1>Tasks</h1>
 
+    <app-modal :open="listToDelete !== null" :title="'Delete ' + (listToDelete !== null ? listToDelete.name : '') + '?'" @dismiss="listToDelete = null">
+      <button class="button is-danger" @click="confirmListDelete">Confirm</button>
+      <button class="button is-primary" @click="listToDelete = null">Cancel</button>
+    </app-modal>
+
     <app-dropdown button-class="is-primary" :open="showListDropdown" :label="listSelectLabel" @open="showListDropdown = true" @close="showListDropdown = false">
-      <a class="dropdown-item" href="#" v-for="l in taskLists" @click="selectList(l)">{{l.name}}</a>
+      <div class="dropdown-item" v-for="l in taskLists">
+        <a href="#" @click="selectList(l)">{{l.name}}<button @click.stop="listToDelete = l" class="button is-small is-danger is-pulled-right"><app-icon icon="x" size="sm"></app-icon></button></a>
+
+      </div>
+
       <hr class="dropdown-divider" v-if="taskLists.length > 0">
       <div class="dropdown-item">
         <task-list-mini-form :task-list="newList" :validation-errors="newListValidationErrors" @save="saveNewList"></task-list-mini-form>
@@ -68,7 +77,8 @@
         newListValidationErrors: {},
         showAddItem: false,
         newItem: newItemTemplate(),
-        newItemValidationErrors: {}
+        newItemValidationErrors: {},
+        listToDelete: null
       }
     },
 
@@ -91,6 +101,8 @@
       saveNewList() {
         this.loadResource(
           api.postTaskList(this.newList)
+            .then(l => this.currentList = l)
+            .then(() => this.showListDropdown = false)
             .then(() => this.updateData())
             .then(() => { this.newList = newListTemplate(); this.newListValidationErrors = {}; } )
             .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newListValidationErrors = err.validationErrors()))
@@ -110,6 +122,14 @@
         if (this.currentList === null && this.taskLists.length > 0) {
           this.currentList = this.taskLists[0];
         }
+      },
+
+      confirmListDelete() {
+        this.loadResource(
+          api.deleteTaskList(this.listToDelete)
+            .then(() => this.updateData())
+            .then(() => this.listToDelete = null)
+        );
       }
     },