narou 1.7.2 → 2.0.0

data/lib/web/views/settings.haml

@@ -0,0 +1,115 @@
+-# このページ内専用のjavascriptでjQueryオブジェクトを参照したい場合この関数に記述
+:javascript
+  var local_initialize_function = function($) {
+    $("[data-toggle=tooltip]").tooltip({
+      animation: false,
+      container: "body",
+    });
+  };
+
+%form(action="/settings" method="POST")
+  %input(type="hidden" name="view_invisible" value="#{@view_invisible ? 1 : 0}")
+  .navbar.navbar-default.navbar-fixed-top(role="navigation")
+    .container
+      .navbar-header
+        %button.navbar-toggle(type="button")
+          %span.sr-only Toggle navigation
+          %span.icon-bar
+          %span.icon-bar
+          %span.icon-bar
+        %a.navbar-brand(href="#" data-move-to="top") Narou.rb WEB UI
+      .collapse.navbar-collapse
+        %ul.nav.navbar-nav
+          %li.active
+            %a(href="/settings") 環境設定
+          %li
+            %a(href="/help") ヘルプ
+          %li
+            %a(href="/") 戻る
+        .navbar-form.navbar-left
+          %input.btn.btn-info(type="submit" value="設定を保存" style="margin-left: 50px")
+        %p#queue-text.navbar-text.navbar-right(data-toggle="tooltip" title="キューに積まれた処理の数" data-placement="bottom")
+          %span.glyphicon.glyphicon-inbox
+          %span#queue 0
+
+  .container.container-main.theme-showcase(role="main")
+    - @setting_variables.each do |scope, variables|
+      - inventory = Inventory.load("#{scope}_setting", scope)
+
+      %p.panel-settings-link
+        - if scope == :local
+          goto <a href="#global" data-move-to="#global">Global Variables</a>
+        - else
+          goto <a href="#local" data-move-to="#local">Local Variables</a>
+
+      .panel.panel-primary.panel-settings
+        .panel-heading{id: scope} #{scope.capitalize} Variables
+        .panel-body.list-group-item-info
+          ・各コマンドの設定の変更が出来ます<br>
+          - if scope == :local
+            - if @view_invisible
+              ・force.* 系の設定は setting.ini の設定を無視して反映されるようになります<br>
+              ・default_args.* 系の設定は、各種コマンドのオプションを省略した場合に使用されるオプションを指定出来ます<br>
+          - else
+            ・Global な設定はユーザープロファイルに保存され、すべての narou コマンドで使われます<br>
+          - if @view_invisible
+            ・隠しオプションを非表示にするには<a href="?"><u>ここをクリック</u></a><br>
+          - else
+            ・隠しオプションを表示するには<a href="?view_invisible=1"><u>ここをクリック</u></a><br>
+        .list-group
+          - variables.each do |name, value|
+            - item = inventory[name]
+            - unless @view_invisible
+              - if value[2]
+                - if value[0] == :boolean
+                  - hidden_value = convert_boolean_to_on_off(item)
+                - else
+                  - hidden_value = item
+                %input{type:"hidden", name:name, value:hidden_value}
+                - next
+            - message = Narou::SETTING_VARIABLES_WEBUI_MESSAGES[name] || value[1]
+            - message = message.strip.gsub("\n", "<br>")
+            - error_style = {class: "has-error", style: "background-color:#f2dede"}
+            .list-group-item.form-group{@error_list[name] ? error_style : {}}
+              %h4.list-group-item-heading #{name}
+              .list-group-item-text
+                - case value[0]
+                - when :boolean
+                  - if name.start_with?("force.")
+                    .switch-toggle.well.switch-3
+                      <input id="#{name}-nil" type="radio" name="#{name}" value="nil" #{item.nil? ? "checked" : ""}>
+                      %label(for="#{name}-nil")
+                        未設定
+                      <input id="#{name}-false" type="radio" name="#{name}" value="off" #{item == false ? "checked" : ""}>
+                      %label(for="#{name}-false")
+                        しない
+                      <input id="#{name}-true" type="radio" name="#{name}" value="on" #{item ? "checked" : ""}>
+                      %label(for="#{name}-true")
+                        する
+                      %a.btn.btn-primary
+                  - else
+                    %label.switch-light.well
+                      <input type="checkbox" name="#{name}" #{item ? "checked" : ""}>
+                      - if name == "over18"
+                        %span
+                          %span いいえ
+                          %span はい
+                      - else
+                        %span
+                          %span しない
+                          %span する
+                      %a.btn.btn-primary
+                - else
+                  %input{type:"text", name:name, value:item, class:"form-control",
+                         placeholder:Helper.variable_type_to_description(value[0]).strip }
+                %p
+                  = message != "" ? message : "&nbsp;"
+                - if @error_list[name]
+                  %p.alert-danger
+                    = @error_list[name]
+                .clear
+          .panel-footer
+            %input.btn.btn-info(type="submit" value="設定を保存" style="float:none")
+            %span(style="color:gray")
+              （Local、Globalどちらも保存されます）
+

data/lib/web/views/style.scss

@@ -0,0 +1,737 @@
+/*! -*- coding: utf-8 -*-
+ *
+ * Copyright 2013 whiteleaf. All rights reserved.
+ */
+
+@mixin opacity($opacity) {
+     opacity: $opacity;
+     $opacityIE: $opacity * 100;
+     filter: alpha(opacity=$opacityIE);
+}
+
+@mixin css3($property, $value) {
+     @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+          #{$prefix}#{$property}: $value;
+     }
+}
+
+@mixin clearfix {
+  zoom: 1;
+  &:before,
+  &:after {
+    display: block;
+    height: 0;
+    visibility: hidden;
+    content: "\0020";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+$default-color: #333;
+
+/*
+ * 全体
+ */
+body {
+  padding-top: 70px;
+  padding-bottom: 300px;
+}
+
+@media (max-width:767px) {
+  .container-main {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.centering {
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.clear {
+  clear: both;
+  display: none;
+}
+
+#fadeout-alert {
+  position: fixed;
+  z-index: 1000;
+  width: 350px;
+  text-align: center;
+  @extend .centering;
+  top: 100px;
+}
+
+/*
+ * テーブル関連
+ */
+table#novel-list {
+  $thead-background-color: #605555;
+  $odd-color: #f8f3e5;
+  $even-color: #fffcef;
+  $novel-list-border-color: mix($odd-color, $thead-background-color, 80%);
+
+  font-size: 0.8em;
+  color: $default-color;
+  //border-color: darken($odd-color, 20%);
+  border-color: $novel-list-border-color;
+
+  @mixin dataTableSortingHeader($arrow_img_url) {
+    background: url($arrow_img_url) no-repeat center right !important;
+    background-color: #403535 !important;
+  }
+
+  thead {
+    background-color: $thead-background-color;
+    color: #ddd0cc;
+  }
+  td {
+    padding: 4px !important;
+    vertical-align: middle;
+    //border-color: darken($odd-color, 20%);
+    border-color: $novel-list-border-color;
+  }
+  tr {
+    td.text-center {
+      text-align: center;
+    }
+  }
+  tr.odd {
+    background-color: $odd-color;
+    td.sorting_1 {
+      background-color: #f0ecde;
+    }
+  }
+  tr.even {
+    background-color: $even-color;
+    td.sorting_1 {
+      background-color: #f8f3e5;
+    }
+  }
+  $selected-color: mix($odd-color, rgba(255,212,0,0.5));
+  //$selected-color: #90cebc;
+  $selected-hover-color: #ded;
+  tr.selected {
+    td {
+      background-color: $selected-color !important;
+      font-weight: bold;
+      color: $default-color !important;
+      overflow: hidden;
+      &.sorting_1 {
+        background-color: mix($selected-color, black, 96%) !important;
+      }
+    }
+    td > div {
+      position: relative;
+    }
+
+    td:first-child > div:after {
+      position: absolute;
+      top: -5px;
+      left: 1px;
+      color: white !important;
+      font-family: 'Glyphicons Halflings';
+      font-style: normal;
+      font-weight: bold;
+      font-size: 2em;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      content: "\e013";
+      @include opacity(0.7);
+    }
+  }
+  @media (min-width:768px) {
+    tr:hover td {
+      background-color: $selected-hover-color !important;
+      &.sorting_1 {
+        background-color: mix($selected-hover-color, black, 97%) !important;
+      }
+    }
+    tr:hover.selected td {
+      background-color: $selected-color !important;
+      &.sorting_1 {
+        background-color: mix($selected-color, black, 96%) !important;
+      }
+    }
+  }
+  $frozen-color: #6caddd;
+  tr.frozen td {
+    $frozen-background-color: mix($even-color, $frozen-color, 88%);
+    color: lighten($default-color, 25%);
+    background-color: $frozen-background-color;
+    &.sorting_1 {
+      //background-color: darken($frozen-background-color, 3%);
+      background-color: mix($frozen-background-color, black, 97%);
+    }
+    &.column-id > div:before {
+      content: "＊";
+      color: $frozen-color;
+      font-weight: bold;
+    }
+  }
+  tr.frozen.selected td {
+    color: lighten($default-color, 30%) !important;
+  }
+  tr.frozen.selected td.column-id > div:before {
+    color: darken($frozen-color, 20%);
+  }
+  thead {
+    .sorting_asc {
+      @include dataTableSortingHeader("/resources/sort_asc.png");
+    }
+    .sorting_desc {
+      @include dataTableSortingHeader("/resources/sort_desc.png");
+    }
+  }
+  a {
+    display: block;
+  }
+
+  span.new-arrivals:after {
+    color: magenta;
+    content: " 新着";
+  }
+
+  span.today-update:after {
+    color: green;
+    content: " 更新";
+  }
+}
+
+.context-menu-target-cover {
+  position: absolute;
+  @include css3(box-shadow, 0 0 6px red);
+  &:after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+    @include opacity(0.08);
+    content: "\0020";
+  }
+}
+
+// DataTables 共通設定
+table.dataTable {
+  th {
+    text-align: center;
+  }
+  thead {
+    /* ソート中の列以外は矢印アイコンは表示しない */
+    .sorting,
+    .sorting_asc_disabled,
+    .sorting_desc_disabled {
+      background: inherit;
+    }
+  }
+}
+
+/*
+ * ナビバー
+ */
+.navbar {
+  $navbar-background-color: rgba(248,248,248,0.93);
+  background-color: $navbar-background-color;
+
+  @media (max-width:767px) {
+    .navbar-collapse {
+      position: absolute;
+      right: -270px;
+      background-color: $navbar-background-color;
+      width: 270px;
+      border-left: 1px solid #aaa !important;
+      border-bottom: 1px solid #aaa !important;
+      border-width: 1px 0 2px 2px;
+      border-bottom-left-radius: 10px;
+      /* max-heightが有効なときにメニューがはみ出した場合スクロールバーを表示する */
+      /* margin-right: 0 !important; */
+    }
+  }
+  .active-ok {
+    display: none;
+  }
+  li.dropdown.open > .dropdown-toggle {
+    background-color: darken($navbar-background-color, 15%) !important;
+  }
+  ul.dropdown-menu {
+    li.with-icon a {
+      padding-left: 8px !important;
+    }
+    li.active {
+      a {
+        padding-left: 4px !important;
+        background-color: inherit !important;
+        color: inherit !important;
+      }
+      a:hover {
+        background-color: #f5f5f5 !important;
+        color: inherit !important;
+      }
+      @media (max-width:767px) {
+        a:hover {
+          background-color: inherit !important;
+        }
+      }
+      span.active-ok {
+        display: inline;
+      }
+    }
+  }
+}
+
+/*
+ * フォーム関係
+ */
+#myFilter {
+  width: 200px;
+  border-radius: 18px;
+  padding-left: 29px;
+  padding-right: 23px;
+  margin-left: 10px;
+  @media (max-width:767px) {
+    width: 200px;
+  }
+  @media (min-width:768px) {
+    width: 150px;
+  }
+  @media (min-width:992px){
+    width: 250px;
+  }
+}
+@mixin placeholder { color: #bbb !important }
+::-moz-placeholder { @include placeholder }
+::-webkit-input-placeholder { @include placeholder }
+:-moz-placeholder { @include placeholder }
+:-ms-input-placeholder { @include placeholder }
+input::-ms-clear {
+  visibility: hidden;
+}
+#myFilter-clear, #myFilter-search-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 14px;
+  margin: auto;
+  font-size: 14px;
+  color: #ccc;
+  z-index: 100;
+}
+#myFilter-clear {
+  right: 7px;
+  cursor: pointer;
+  display: none;
+}
+#myFilter-search-icon {
+  left: 19px;
+}
+
+/*
+ * タグ
+ */
+.label {
+  cursor: pointer;
+}
+.label-green {
+  background-color: #5cb85c;
+}
+.label-yellow {
+  background-color: #f7d71e;
+  color: #666;
+}
+.label-blue {
+  background-color: #428bca;
+}
+.label-magenta {
+  background-color: #d37bca;
+}
+.label-cyan {
+  background-color: #5bc0de;
+}
+.label-red {
+  background-color: #d9534f;
+}
+.label-white {
+  background-color: #e3e3e3;
+  color: #666;
+}
+
+.dataTable {
+  .label {
+    font-size: 0.8em;
+    line-height: 2em;
+  }
+}
+
+#tag-list-canvas {
+  padding: 3px 20px;
+  overflow: auto;
+
+  @media (min-width:768px) {
+    max-height: 300px;
+  }
+  @media (max-width:767px) {
+    max-height: 160px;
+    width: 94%;   /* 埋まってるスクロールバーを見えるように */
+  }
+
+  .label {
+    font-size: 0.9em;
+    padding: 2px 8px;
+    line-height: 1.9em;
+  }
+}
+
+#tag-editor-field {
+  .label {
+    font-size: 0.9em;
+    padding: 2px 8px;
+    line-height: 1.9em;
+  }
+
+  #new-tag {
+    @media (min-width:768px) {
+      width: 300px;
+    }
+  }
+}
+
+/*
+ * ダイアログ
+ */
+@media (min-width:768px) {
+  .modal-content {
+    margin-top: 160px;
+  }
+}
+@media (max-width:767px) {
+  .modal-content {
+    margin-top: 80px;
+  }
+}
+
+/*
+ * 選択メニュー
+ */
+#rect-select-menu {
+  position: absolute;
+  display: none;
+  z-index: 101;
+}
+
+/*
+ * 範囲選択時の半透明範囲
+ */
+#rect-select-area {
+  $rect_select_area_color: rgb(80, 200, 255);
+
+  border: 1px solid $rect_select_area_color;
+  position: absolute;
+  display: block;
+  background-color: rgba($rect_select_area_color, 0.2);
+  z-index: 100;
+}
+
+/*
+ * コントロールパネル
+ */
+#control-panel {
+  @media (min-width:768px) {
+    width: 100%;
+  }
+  @media (max-width:767px) {
+    width: 97%;
+    margin: 0 auto;
+  }
+  margin-bottom: 15px !important;
+
+  button {
+    margin-bottom: 5px;
+  }
+}
+
+/*
+ * コンソール
+ */
+$console-color: white;
+
+#console-container {
+  position: relative;
+  @media (min-width:768px) {
+    width: 100%;
+  }
+  @media (max-width:767px) {
+    width: 97%;
+    margin: 0 auto;
+  }
+  margin-bottom: 20px !important;
+}
+.console {
+  position: relative;
+  overflow: hidden;
+  padding: 5px 15px 5px 15px;
+  border-width: 0;
+  border-radius: 4px;
+  background-color: #333;
+  color: $console-color;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  word-wrap:break-word;
+
+  @media (min-width:768px) {
+    font-size: 13px;
+    line-height: 120%;
+    height: 150px;
+    .console-line {
+      min-height: 15px;
+    }
+  }
+
+  @media (max-width:767px) {
+    height: 100px;
+    font-size: 11px;
+    line-height: 110%;
+    .console-line {
+      min-height: 12px;
+    }
+  }
+
+  .progress {
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 8px;
+    @media (min-width:768px) {
+      width: 80%;
+    }
+    @media (max-width:767px) {
+      width: 100%;
+    }
+  }
+
+  hr {
+    margin-top: 7px;
+    margin-bottom: 7px;
+  }
+}
+.console-buttons {
+  position: absolute;
+  top: 3px;
+  right: 15px;
+  color: $console-color;
+  cursor: pointer;
+
+  span:hover {
+    color: mix($console-color, red, 80%);
+  }
+}
+
+/*
+ * ツールチップ
+ */
+.tooltip-inner {
+  max-width: 300px;
+}
+
+/*
+ * ショートカットキー
+ */
+@media (min-width:768px) {
+  #dropdown-menu-select {
+    width: 300px;
+  }
+  .shortcut {
+    float: right !important;
+    right: 0;
+    left: auto;
+  }
+  /* Freifox で表示が崩れる対策 */
+  ul.dropdown-menu {
+    & > li {
+      a > span:first-child {
+        float: left;
+      }
+      a:after {
+        content: "　";
+      }
+    }
+  }
+}
+@media (max-width:767px) {
+  .shortcut {
+    display: none !important;
+  }
+}
+
+/*
+ * 設定画面
+ */
+.panel-settings-link {
+  @media (min-width: 768px) {
+    width: 750px;
+  }
+}
+
+.panel-settings {
+  h4 {
+    word-break: break-all;
+  }
+
+  @media (min-width: 768px) {
+    width: 750px;
+  }
+
+  input {
+    @media (min-width: 501px) {
+      float: right;
+      width: 150px;
+    }
+    @media (max-width: 500px) {
+      float: left;
+    }
+  }
+
+  .help-extra-messages {
+    color: gray;
+    border-left: 2px solid lightgray;
+    padding-left: 10px;
+    word-break: break-all;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+/* switch-toggle.css のカスタマイズ */
+.switch-light, .switch-toggle {
+  width: 150px;
+  margin-left: 0;
+
+  @media (min-width: 501px) {
+    float: right;
+    cursor: pointer;
+    margin-top: 0;
+  }
+  @media (max-width: 500px) {
+    margin-top: 10px;
+  }
+}
+
+.switch-toggle * {
+  cursor: pointer;
+  font-size: 80%;
+}
+
+#replace-txt-table {
+  margin: 0;
+
+  thead {
+    td {
+      text-align: center;
+    }
+  }
+  tbody {
+    td {
+      padding: 7px;
+    }
+    input {
+      width: 250px;
+    }
+  }
+}
+
+/*
+ * 個別メニュー
+ */
+#context-menu {
+  position: absolute;
+  display: none;
+  z-index: 102;
+}
+
+/*
+ * キュー
+ */
+#queue-text {
+  position: relative;
+  margin-right: 0;
+  cursor: default;
+
+  &.active {
+    color: #4bb0ce !important;
+    #queue {
+      background-color: #4bb0ce !important;
+    }
+  }
+}
+#queue {
+  position: relative;
+  font-size: 0.8em;
+  vertical-align: top;
+  display: inline-block;
+  padding: 3px 4px;
+  font-weight: bold;
+  line-height: 0.8em;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #777;
+  border-radius: 14px;
+  left: -3px;
+  top: -3px;
+}
+
+/*
+ * ヘルプ画面
+ */
+#help-container {
+  #ss-main {
+    @media (min-width: 768px) {
+      width: 70%;
+      float: left;
+      margin-right: 10px;
+    }
+    @media (max-width: 767px) {
+      width: 100%;
+    }
+    margin-bottom: 10px;
+  }
+  #ss-tag {
+    float: right;
+    width: 200px;
+  }
+  #ss-rect-select {
+    @media (min-width: 601px) {
+      float: right;
+      width: 350px;
+    }
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+  }
+
+  h4 {
+    margin-top: 25px;
+    font-weight: bold;
+
+    .number {
+      background-color: lighten(purple, 10%);
+      vertical-align: top;
+    }
+  }
+  img + h4 {
+    margin-top: 10px;
+  }
+  div > p{
+    text-indent: 1em;
+  }
+  p {
+    margin-bottom: 4px;
+  }
+}
+