Merge pull request #68 from hyoshida/feature/user_interface_optimizat…

…ion_for_add_clip クリップ投稿: UIを最適化
hyoshida · Jan 13, 2014 · e9f424d · e9f424d
2 parents fd0dbf8 + b61bd99
commit e9f424d
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 137 deletions.
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
@@ -40,7 +40,7 @@ register_event_for_close_dialog =->
     $('.ui-dialog-content').dialog('close')
   )
 
-notify = ->
+window.notify = ->
   return if $('#notice').length <= 0
   height =  $('#notice').css('height')
   $('#notice')

diff --git a/app/assets/javascripts/clips_form.js.coffee.erb b/app/assets/javascripts/clips_form.js.coffee.erb
@@ -1,33 +1,27 @@
 $( ->
-  $clip_field = $('#clip_dialog')
   $container = $('#container')
 
-  $clip_field.dialog({
-    autoOpen: false,
-    title: '投稿ダイアログ',
-    closeOnEscape: true,
-    modal: true,
-    resizable: false,
-    minWidth: 480,
-    buttons: {
-      'キャンセル': -> $(@).dialog('close')
-    }
-  })
-
-  $container.on('click', '.box img', ->
-    $('img#selected').removeAttr('id')
-    $(@).attr('id', 'selected')
-
-    url = $(@).attr('src')
-    $('#clip_url').attr('value', url)
-  )
+  initialize_new_clip_dialog()
+
+  $container.on('click', '.clip a', (event) ->
+    # デフォルトの挙動をキャンセル
+    event.stopPropagation()
+    event.preventDefault()
+
+    $box = $(@).closest('.box')
+    $image = $box.find('img')
 
-  $container.on('click', '#selected', ->
     $preview_image = $('<img/>')
-    $preview_image.attr('src', $(@).attr('src'))
-    $preview_image.attr('style', $(@).attr('style'))
+    $preview_image.attr('src', $image.attr('src'))
+    $preview_image.attr('style', $image.attr('style'))
     $('#preview').html($preview_image)
-    $clip_field.dialog('open')
+    $('#clip_url').attr('value', $image.attr('src'))
+
+    # TODO: 追加済み項目は追加できないようにする
+    # $box.css({ opacity: 0.5 })
+    # $box.find('.clip').addClass('hidden')
+
+    show_new_clip_dialog()
   )
 
   $('#load').click( ->
@@ -36,3 +30,11 @@ $( ->
     $container.html('<%= image_tag 'loader.gif' %>')
   )
 )
+
+initialize_new_clip_dialog = ->
+  $new_clip_dialog = $('#new_clip_dialog')
+  $new_clip_dialog.appendTo('body')
+
+show_new_clip_dialog = ->
+  $new_clip_dialog = $('#new_clip_dialog')
+  $new_clip_dialog.modal('show')
diff --git a/app/assets/javascripts/wall.js.coffee.erb b/app/assets/javascripts/wall.js.coffee.erb
@@ -49,7 +49,7 @@ window.resize_images = ($container) ->
       $(@).width(width)
       $(@).height(height)
     else
-      $(@).parent().remove()
+      $(@).closest('.box').remove()
   )
 
 is_available_image_size = (width, height) ->

diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
@@ -135,6 +135,26 @@ $logo_height: $header_height;
   }
 }
 
+#header .left {
+  .new > a,
+  .like > a {
+    // hover時の背景グラデーションがずれるのを防ぐ
+    background-position: 0% 0%;
+    font-weight: normal;
+    &:before {
+      font-weight: bold;
+    }
+  }
+
+  .new > a {
+    @include icon(plus);
+  }
+
+  .like > a {
+    @include icon(heart);
+  }
+}
+
 #header .profile a,
 #header .signin a {
   font-weight: normal;
@@ -177,15 +197,18 @@ $logo_height: $header_height;
   }
 }
 
+#header .signin form {
+  text-align: center;
+}
+
 #header form {
   $width: 250px;
   $padding: 12px;
 
   width: $width;
   padding: $padding;
-  text-align: center;
+  text-align: left;
   background-color: #fff3da;
-  @include border-bottom-radius(4px);
 
   input {
     margin-bottom: 10px;
@@ -279,6 +302,12 @@ $logo_height: $header_height;
   }
 }
 
+#alert {
+  margin: 1.5em 0 2em;
+  color: red;
+  text-align: center;
+}
+
 #notice {
   position: absolute;
   top: $header_height;
@@ -329,3 +358,18 @@ $main_width: 1000px;
 #dialog {
   @extend .fade;
 }
+
+/* chosen */
+form .chosen-container {
+  margin: 10px 5px 0;
+
+  .chosen-choices {
+    @extend input[type="text"];
+    @include box-sizing(content-box);
+    margin: 0;
+  }
+
+  input {
+    padding-left: 0;
+  }
+}
diff --git a/app/assets/stylesheets/clips.css.scss b/app/assets/stylesheets/clips.css.scss
@@ -2,20 +2,23 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-@import "compass/utilities";
-@import "compass/css3";
-
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
 @import "bootstrap/buttons";
 @import "bootstrap/forms";
 
+@import "compass/utilities";
+@import "compass/css3";
+
 $margin: 20px;
 $clip_width: 860px;
 $image_box_width: 580px;
 $info_box_width: $clip_width - $image_box_width - $margin;
 
 #image_selecter {
+  margin: 20px auto;
+  text-align: center;
+
   h2 {
     font-size: x-large;
     margin-bottom: 0.5em;
@@ -25,39 +28,67 @@ $info_box_width: $clip_width - $image_box_width - $margin;
     font-size: large;
     margin-bottom: 0.5em;
   }
+}
 
-  form {
-    margin: 20px auto;
-    text-align: center;
-    @extend .form-inline;
-
-    input[type="submit"] {
-      @extend .btn;
-    }
-  }
+#image_selecter #container {
+  text-align: center;
 
   .box {
-    margin: 0;
-    width: auto;
-    border: 0;
+    margin: 5px;
+
+    img {
+      @include border-radius(4px);
+    }
   }
+}
 
-  .box img {
-    border: 5px solid transparent;
-    &#selected {
-      border-color: #666666;
+// 親ダイアログが.hideを指定していると
+// chosen初期化時にwidth: 0が指定されてしまうので
+// 対策のために一定幅を強制
+#new_clip_dialog {
+  $feild_width: 215px;
+  $padding: 5px;
+
+  .chosen-choices {
+    width: $feild_width - ($padding * 2) !important;
+    input {
+      width: 5em !important;
     }
   }
 
-  #container {
-    text-align: center;
+  .chosen-drop,
+  .chosen-drop ul {
+    width: $feild_width !important;
   }
 }
 
-#preview {
-  float: left;
-  margin-right: 10px;
-  min-height: 150px;
+#new_clip_dialog form {
+  @extend .form-inline;
+
+  label {
+    display: block;
+  }
+
+  .title input,
+  .chosen-container {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  input[type="submit"] {
+    @extend .btn;
+    @extend .btn-primary;
+  }
+
+  #preview {
+    @include inline-block;
+    vertical-align: top;
+    margin-right: 10px;
+  }
+
+  #field {
+    @include inline-block;
+  }
 }
 
 /* dialog */

diff --git a/app/assets/stylesheets/matomes.css.scss b/app/assets/stylesheets/matomes.css.scss
@@ -255,19 +255,8 @@ $cover_size: 100px;
     @extend .btn-primary;
   }
 
-  .chosen-container {
-    margin: 10px 5px 0;
-
-    .chosen-choices {
-      @extend input[type="text"];
-      @include box-sizing(content-box);
-      width: 640px;
-      margin: 0;
-    }
-
-    input {
-      padding-left: 0;
-    }
+  .chosen-choices {
+    width: 640px;
   }
 }
 

diff --git a/app/assets/stylesheets/wall.css.scss.erb b/app/assets/stylesheets/wall.css.scss.erb
@@ -59,6 +59,10 @@
     }
   }
 
+  .image_box img {
+    vertical-align: middle !important;
+  }
+
   .image_box a img {
     @include border-top-radius(5px);
     cursor: url("<%= image_path 'cursor_zoom_in.cur' %>"), pointer;

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -7,4 +7,22 @@ class ApplicationController < ActionController::Base
   def first_page?
     params[:page].blank? || params[:page].to_i <= 1
   end
+
+  def tag_names_by_params(target=nil)
+    tag_names = target ? params[target].delete(:tags) : params.delete(:tags)
+    tag_names ||= []
+    tag_names.map! {|tag_name| tag_name.strip }
+    tag_names.reject!(&:blank?)
+  end
+
+  def update_tags_for(obj, tag_names)
+    return if tag_names.blank?
+    obj_tag_names = Tag.for(obj).pluck(:name)
+    add_tag_names = tag_names - obj_tag_names
+    remove_tag_names = obj_tag_names - tag_names
+    Tag.where(name: remove_tag_names).for(obj).destroy_all if remove_tag_names.any?
+    add_tag_names.each do |add_tag_name|
+      obj.tags.create!(name: add_tag_name, user: current_user)
+    end
+  end
 end