narou 2.6.1 → 2.7.0

data/lib/web/views/settings.haml

@@ -51,7 +51,7 @@
 
   .container.container-main.theme-showcase(role="main")
     .container-settings
-      - inventory = Inventory.load("local_setting", :local).merge(Inventory.load("global_setting", :global))
+      - inventory = Inventory.load("local_setting").merge(Inventory.load("global_setting", :global))
       - local_and_global_variables = @setting_variables[:local].merge(@setting_variables[:global])
       - tab_info = Command::Setting.get_setting_tab_info
       - error_tabs = @error_list.map { |name, _| local_and_global_variables[name][:tab] }.uniq
@@ -120,14 +120,19 @@
                       - when :select
                         %div.input-style
                           %select{name: name, class: "selectpicker show-tick"}
-                            %option(value="") 未設定
+                            %option(value="")
+                              - if name == "theme"
+                                デフォルト
+                              - else
+                                未設定
                             - value[:select_keys].each_with_index do |key, index|
                               %option{selected: item == key, value: key}
                                 = value[:select_summaries][index]
                         - need_clear = true
                       - when :multiple
                         %div.input-style
-                          %select{name: "#{name}[]", class: "selectpicker", multiple: true, title: "未設定"}
+                          %select{name: "#{name}[]", class: "selectpicker", multiple: true,
+                                  title: "未設定", "data-selected-text-format" => "count"}
                             - selected_items = item.to_s.split(",")
                             - value[:select_keys].each_with_index do |key, index|
                               %option{selected: selected_items.include?(key), value: key}

data/lib/web/views/style.scss

@@ -67,6 +67,18 @@ body {
   top: 100px;
 }
 
+button[disabled] {
+  cursor: default !important;
+}
+
+/*
+ * プログレスバー
+ */
+.progress-bar {
+  // アニメーションを切る
+  @include css3(transition, none !important);
+}
+
 /*
  * テーブル関連
  */
@@ -204,7 +216,7 @@ table#novel-list {
     content: " 更新";
   }
 
-  /* 最新話更新日 +/
+  /* 最新話更新日 */
   .general-lastup {
   }
   /* 60分以内 */
@@ -366,7 +378,7 @@ table.dataTable {
     width: 200px;
   }
   @media (min-width:768px) {
-    width: 150px;
+    width: 100px;
   }
   @media (min-width:992px){
     width: 250px;
@@ -402,33 +414,52 @@ input::-ms-clear {
 /*
  * タグ
  */
+.select-color-button {
+  float: right;
+}
+.select-color-button span {
+  display: inline-block;
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: 0.7em;
+  text-align: center;
+  cursor: pointer;
+  color: white;
+  font-weight: bold;
+}
+
 .label {
   cursor: pointer;
 }
-.label-green {
+.label-green, .select-color-button .green {
   background-color: #5cb85c;
 }
-.label-yellow {
+.label-yellow, .select-color-button .yellow {
   background-color: #f7d71e;
   color: #666;
 }
-.label-blue {
+.label-blue, .select-color-button .blue {
   background-color: #428bca;
 }
-.label-magenta {
+.label-magenta, .select-color-button .magenta {
   background-color: #d37bca;
 }
-.label-cyan {
+.label-cyan, .select-color-button .cyan {
   background-color: #5bc0de;
 }
-.label-red {
+.label-red, .select-color-button .red {
   background-color: #d9534f;
 }
-.label-white {
+.label-white, .select-color-button .white {
   background-color: #e3e3e3;
   color: #666;
 }
 
+.label-fixed-width {
+  display: inline-block;
+  width: 100%;
+}
+
 .dataTable {
   .label {
     font-size: 0.8em;
@@ -490,11 +521,42 @@ input::-ms-clear {
  * 選択メニュー
  */
 #rect-select-menu {
-  position: absolute;
-  display: none;
   z-index: 101;
 }
 
+/*
+ * 色選択メニュー
+ */
+#select-color-menu {
+  position: fixed;
+  z-index: 9999;
+  border-color: #bbb;
+  background-color: white;
+  min-width: 130px;
+}
+#select-color-menu:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 20px;
+  left: -18px;
+  border-style: solid;
+  border-width: 9px;
+  border-color: transparent white transparent transparent;
+  z-index: 10001;
+}
+#select-color-menu:after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 20px;
+  left: -19px;
+  border-style: solid;
+  border-width: 9px;
+  border-color: transparent #bbb transparent transparent;
+  z-index: 10000;
+}
+
 /*
  * 範囲選択時の半透明範囲
  */
@@ -727,8 +789,6 @@ $console-color: white;
  * 個別メニュー
  */
 #context-menu {
-  position: absolute;
-  display: none;
   z-index: 102;
 }
 
@@ -785,6 +845,16 @@ $console-color: white;
       width: 100%;
     }
   }
+  #ss-bookmarklet1, #ss-bookmarklet2 {
+    @media (min-width: 601px) {
+      float: right;
+      width: 300px;
+      margin-left: 15px;
+    }
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+  }
 
   h4 {
     margin-top: 25px;
@@ -801,8 +871,53 @@ $console-color: white;
   div > p{
     text-indent: 1em;
   }
+
+  h2 {
+    margin-bottom: 25px;
+  }
+  h3 {
+    position: relative;
+    font-size: 1.143em;
+    font-weight: bold;
+    margin: 0 0 1.0em;
+    padding: 0.5em 0.5em 0.5em 1.7em;
+    border-bottom: 3px solid #d94A4C;
+    width: 100%;
+  }
+  h3:before {
+    content: "";
+    position: absolute;
+    background: #d48789;
+    top: 0;
+    left: 0.4em;
+    height: 12px;
+    width: 12px;
+    transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+  }
+  h3:after {
+    content: "";
+    position: absolute;
+    background:#d26466;
+    top: 1.0em;
+    left: 0;
+    height: 8px;
+    width: 8px;
+    transform: rotate(15deg);
+    -moz-transform: rotate(15deg);
+    -webkit-transform: rotate(15deg);
+    -o-transform: rotate(15deg);
+    -ms-transform: rotate(15deg);
+  }
+  h3:nth-of-type(2) {
+    margin-top: 30px;
+  }
+
   p {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 }
 
@@ -851,3 +966,74 @@ $console-color: white;
     color: #777;
   }
 }
+
+/* D&D関係 */
+#link-drop-here {
+  position: fixed;
+  top: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  color: white;
+  font-size: 100px;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 2000;
+}
+#link-drop-here .inner {
+  position: absolute;
+  display: table;
+  width: 95%;
+  height: 95%;
+  top: 2.5%;
+  left: 2.5%;
+  border: 6px dashed white;
+}
+#link-drop-here .inner .glyphicon {
+  display: table-cell;
+  vertical-align: middle;
+}
+.drop-cover {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+/* CSVインポート関係 */
+#csv-drop-here {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  border: 4px dashed lightgray;
+  color: lightgray;
+  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
+
+  &.dragover {
+    border: 4px dashed #ada;
+    background-color: #efe;
+    color: #5cb85c;
+  }
+
+  .inner {
+    position: absolute;
+    display: table;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+
+    & > div {
+      display: table-cell;
+      vertical-align: middle;
+    }
+
+    .else {
+      color: lightgray;
+      font-size: 0.6em;
+    }
+  }
+}

data/lib/web/views/{widget.haml → widget/download.haml}

@@ -7,9 +7,10 @@
     %meta{:content => "whiteleaf", :name => "author"}/
     %meta{:content => "none", :name => "robots"}/
     %title Narou.rb WEB UI Widget
-    %link{:href => "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", :rel => "stylesheet"}/
+    %link{:href => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", :rel => "stylesheet"}/
     %link{:href => "/resources/perfect-scrollbar.min.css", :rel => "stylesheet"}/
-    %link{:href => "/style.css", :rel => "stylesheet"}/
+    %link{:href => "/style.css?_=#{Version}", :rel => "stylesheet"}/
+    %link{:href => "/resources/default-style.css?_=#{Version}", :rel => "stylesheet"}/
     / HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
     /[if lt IE 9]
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -21,12 +22,25 @@
         margin: 0;
         padding: 0;
       }
+      #queue-text {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        color: white;
+        margin: 0;
+        padding: 0;
+      }
+
     #console.console.fullscreen
+    #queue-text.navbar-text.navbar-right
+      %span.glyphicon.glyphicon-inbox
+      %span#queue 0
 
     %script{:src => "//code.jquery.com/jquery-1.11.1.min.js"}
-    %script{:src => "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"}
+    %script{:src => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"}
     %script{:src => "/resources/perfect-scrollbar.min.js"}
-    %script{:src => "/resources/narou.library.js"}
+    %script{:src => "/resources/narou.library.js?_=#{Version}"}
+    %script{:src => "/resources/narou.queue.js?_=#{Version}"}
     :javascript
       $(document).ready(function($) {
         var notification = new Narou.Notification();

data/lib/web/views/widget/drag_and_drop.haml

@@ -0,0 +1,97 @@
+-# リンクのドラッグ＆ドロップでダウンロードできるウィンドウ
+!!! 5
+%html{:lang => "ja"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %meta{:content => "IE=edge", "http-equiv" => "X-UA-Compatible"}/
+    %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
+    %meta{:content => "whiteleaf", :name => "author"}/
+    %meta{:content => "none", :name => "robots"}/
+    %title Narou.rb DnD Window
+    %link{:href => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", :rel => "stylesheet"}/
+    %link{:href => "/resources/perfect-scrollbar.min.css", :rel => "stylesheet"}/
+    %link{:href => "/style.css?_=#{Version}", :rel => "stylesheet"}/
+    %link{:href => "/resources/default-style.css?_=#{Version}", :rel => "stylesheet"}/
+    / HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
+    /[if lt IE 9]
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+  %body
+    :css
+      html, body, .console {
+        position: relative;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      #information {
+        position: absolute;
+        width: 100%;
+        top: 50%;
+        margin-top: -1em;
+        text-align: center;
+        color: white;
+        font-size: 20px;
+        font-weight: bold;
+        opacity: 0.17;
+        filter: alpha(opacity=17);
+      }
+      #queue-text {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        color: white;
+        margin: 0;
+        padding: 0;
+      }
+
+    #console.console.fullscreen
+    #information
+      このウィンドウ内にダウンロードしたい<br>
+      小説のリンクをドラッグ＆ドロップ
+    #queue-text.navbar-text.navbar-right
+      %span.glyphicon.glyphicon-inbox
+      %span#queue 0
+    #link-drop-here
+      .inner
+        .glyphicon.glyphicon-download-alt
+      #link-drop-cover.drop-cover(effectAllowed="all")
+
+    %script{:src => "//code.jquery.com/jquery-1.11.1.min.js"}
+    %script{:src => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"}
+    %script{:src => "/resources/perfect-scrollbar.min.js"}
+    %script{:src => "/resources/narou.library.js?_=#{Version}"}
+    %script{:src => "/resources/narou.queue.js?_=#{Version}"}
+    :javascript
+      $(document).ready(function($) {
+        $("#link-drop-here").hide();
+
+        var action = new Narou.Action(null);
+        var notification = new Narou.Notification;
+        var stream_console = new Narou.Console(notification, {
+          restore: false, buttons: false
+        });
+        var dnd = new Narou.DragDrop;
+
+        $(window).on("dragenter", function(e) {
+          $("#link-drop-here").show();
+        });
+
+        $("#link-drop-cover")
+          .on("dragover", function(e) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            return false;
+          })
+          .on("dragleave", function(e) {
+            $("#link-drop-here").hide();
+          })
+          .on("drop", function(e) {
+            e.preventDefault();
+            dnd.getLinkText(e, function(link) {
+              action.download(link);
+            });
+            $("#link-drop-here").hide();
+          });
+      });
+