replace help widget with shortcuts help

lib/locales/en-US/translation.json

@@ -12,6 +12,7 @@
   "Create": "Create",
   "Admin": "Admin",
   "New": "New",
+  "Shortcuts": "Shortcuts",
 
   "Update": "Update",
   "Update Page": "Update Page",
@@ -188,19 +189,18 @@
     }
   },
 
-  "modal_help": {
-      "basic": {
-          "title": "Basics",
-          "body1": "There are 2 types of pages: List pages (showing lists of links to other pages) and normal pages.",
-          "body2": "Pages that end with a slash / are List pages for anything following the slash.",
-          "body3": "You can view older versions of a page from the History tab. Any changes made will be stored here."
+  "modal_shortcuts": {
+      "global": {
+          "title": "Global shortcuts",
+          "Open/Close shortcut help": "Open/Close shortcut help",
+          "Edit Page": "Edit Page",
+          "Create Page": "Create Page"
       },
-      "tips": {
-          "title": "Quick Tips on Editing",
-          "body1": "Use sections and subsections to make it easier for your friends to read your pages."
-      },
-      "markdown": {
-          "title": "Markdown Rules"
+      "editor": {
+          "title": "Editor shortcuts",
+          "Indent": "Indent",
+          "Outdent": "Outdent",
+          "Delete Line": "Delete Line"
       }
   }
 }

lib/locales/ja/translation.json

@@ -12,6 +12,7 @@
   "Create": "作成",
   "Admin": "管理",
   "New": "作成",
+  "Shortcuts": "ショートカット",
 
   "Update": "更新",
   "Update Page": "ページを更新",
@@ -187,19 +188,16 @@
     }
   },
 
-  "modal_help": {
-      "basic": {
-          "title": "基本的な機能",
-          "body1": "表示される画面には、「一覧ページ」と「ページ」の2種類があります",
-          "body2": "スラッシュ <code>/</code> で終わるページは、その階層の一覧ページとなります。",
-          "body3": "ページでの変更はすべて記録されています。History からそのページの過去の状態を見ることができます。"
-      },
-      "tips": {
-          "title": "編集のコツ",
-          "body1": "文章の <strong>構造</strong> を意識しましょう。本を書くように、内容と文脈を整理してセクション・サブセクション...と構造的に書くと、わかりやすく他人に伝わりやすいページがになります。"
-      },
-      "markdown": {
-          "title": "記法"
-      }
-  }
+  "modal_shortcuts": {
+    "global": {
+        "Open/Close shortcut help": "ショートカットヘルプの表示/非表示",
+        "Edit Page": "ページ編集",
+        "Create Page": "ページ作成"
+    },
+    "editor": {
+        "Indent": "インデント",
+        "Outdent": "左インデント",
+        "Delete Line": "行削除"
+    }
+}
 }

lib/views/crowi-plus/widget/system-version.html

@@ -3,6 +3,6 @@
     <a href="https://github.com/weseek/crowi-plus">crowi-plus</a> {{ crowiVersion() }}
   </span>
   <span>
-    <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-keyboard-o"></i> Ctrl+/</a>
+    <a href="" data-target="#shortcuts-modal" data-toggle="modal"><i class="fa fa-keyboard-o"></i> Ctrl+/</a>
   </span>
 </div>

lib/views/layout/2column.html

@@ -19,8 +19,8 @@
   <div id="footer-container" class="footer">
     <footer class="">
       <p>
-        <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
         <a href="https://github.com/weseek/crowi-plus">crowi-plus</a> {{ crowiVersion() }}
+        <a href="" class="pull-right" data-target="#shortcuts-modal" data-toggle="modal"><i class="fa fa-keyboard-o"></i> Ctrl+/</a>
       </p>
     </footer>
   </div>

lib/views/layout/layout.html

@@ -176,7 +176,7 @@
 {% block body_end %}
 {% endblock %}
 
-{% include '../modal/help.html' %}
+{% include '../modal/shortcuts.html' %}
 </body>
 {% endblock %}
 

lib/views/layout/single.html

@@ -23,7 +23,7 @@
     <a href="https://github.com/weseek/crowi-plus">crowi-plus</a> {{ crowiVersion() }}
   </span>
   <span>
-    <a href="" data-target="#help-modal" data-toggle="modal"><i class="fa fa-question-circle"></i> {{ t('Help') }}</a>
+    <a href="" data-target="#shortcuts-modal" data-toggle="modal"><i class="fa fa-keyboard-o"></i> Ctrl+/</a>
   </span>
 </div>
 {% endblock %}

lib/views/modal/help.html

@@ -1,113 +0,0 @@
-<div class="modal" id="help-modal">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">{{ t('Help') }}</h4>
-      </div>
-      <div class="modal-body">
-        <h4>{{ t('modal_help.basic.title') }}</h4>
-        <br>
-        <ul>
-          <li>{{ t('modal_help.basic.body1') }}</li>
-          <li>{{ t('modal_help.basic.body2') }}</li>
-          <li>{{ t('modal_help.basic.body3') }}</li>
-        </ul>
-        <br>
-
-        <h4>{{ t('modal_help.tips.title') }}</h4>
-        <br>
-        <p>
-        {{ t('modal_help.tips.body1') }}
-        </p>
-        <br>
-
-        <h4>{{ t('modal_help.markdown.title') }}</h4>
-        <br>
-        <div class="wiki">
-        <pre># Section</pre>
-        <h1>Section</h1>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>## Sub section</pre>
-        <h2>Sub Section</h2>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>### Sub sub section</pre>
-        <h3>Sub Sub Section</h3>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>- このようにハイフンと半角スペースを先頭に書くと、
-- 箇条書きのリストにになります
-    - タブキーを押すと半角スペース4つが挿入され、インデントされます
-    - インデントはリストにも反映されます</pre>
-          <ul>
-            <li>リスト記法はこのように</li>
-            <li>箇条書きになります
-            <ul>
-              <li>タブキーを押すと半角スペース4つが挿入され、インデントされます</li>
-              <li>インデントはリストにも反映されます</li>
-            </ul>
-            </li>
-          </ul>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>1. 番号付きリストも作れます
-2. "数字" "ドット" "半角スペース" の後に項目を記載しましょう
-2. "1." "2." "2." などと数字がズレても、正しい数字で整形されます</pre>
-          <ol>
-            <li>番号付きリストも作れます</li>
-            <li>"数字" "ドット" "半角スペース" の後に項目を記載しましょう</li>
-            <li>"1." "2." "2." などと数字がズレても、正しい数字で整形されます</li>
-          </ol>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>**アスタリスク2つで囲った箇所は** 太字になります</pre>
-        <p><strong>アスタリスク2つで囲った箇所は</strong> 太字になります</p>
-        </div>
-        <hr>
-
-        <div class="wiki">
-        <pre>Wiki内リンクは &lt;/とある/ページへの/リンク&gt; のように、 &lt; と &gt; で囲います</pre>
-        <p>Wiki内リンクは <a href="/とある/ページへの/リンク">/とある/ページへの/リンク</a> のように、 &lt; と &gt; で囲います</p>
-        </div>
-        <hr>
-
-        <h4>プレゼンモード</h4>
-        <br>
-        <p>
-        文章をきちんと構造的に作成していれば、自然とプレゼンモードが適用できます。ページの <code><i class="fa"></i></code> アイコンをクリックし、プレゼンモードを選択してください。
-        </p>
-        <p>
-        プレゼンモードでは、<strong>改行2つ</strong> をページ区切りとして利用します。プレゼンモードでページを区切りたい場合、2つの改行を挿入してください。
-        </p>
-
-        <p>例:</p>
-        <div class="wiki">
-          <pre># 改行したいプレゼンの説明
-
-何かしらの説明
-
-
-## 次の章
-
-ここでは、「次の章」の前に2つの改行があるため、「次の章」以降が1つのプレゼンページになります。 </pre>
-        </div>
-        <br>
-
-      </div>
-
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->

lib/views/modal/shortcuts.html

@@ -0,0 +1,73 @@
+<div class="modal" id="shortcuts-modal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">{{ t('Shortcuts') }}</h4>
+      </div>
+
+      <div class="modal-body">
+
+        <div class="row">
+          <div class="col-sm-6">
+            <h3><strong>{{ t('modal_shortcuts.global.title') }}</strong></h3>
+
+            <table class="table">
+              <tr>
+                <th>{{ t('modal_shortcuts.global.Open/Close shortcut help') }}:</th>
+                <td><span class="key cmd-key"></span> + <span class="key">/</span></td>
+              </tr>
+              <tr>
+                <th>{{ t('modal_shortcuts.global.Create Page') }}:</th>
+                <td><span class="key">C</span></td>
+              </tr>
+              <tr>
+                <th>{{ t('modal_shortcuts.global.Edit Page') }}:</th>
+                <td><span class="key">E</span></td>
+              </tr>
+            </table>
+          </div><!-- /.col-sm-6 -->
+
+          <div class="col-sm-6">
+            <h3><strong>{{ t('modal_shortcuts.editor.title') }}</strong></h3>
+
+            <table class="table">
+              <tr>
+                <th>{{ t('modal_shortcuts.editor.Indent') }}:</th>
+                <td><span class="key key-longer">Tab</span></td>
+              </tr>
+              <tr>
+                <th>{{ t('modal_shortcuts.editor.Outdent') }}:</th>
+                <td><span class="key key-long">Shift</span> + <span class="key key-longer">Tab</span></td>
+              </tr>
+              <tr>
+                <th>{{ t('modal_shortcuts.editor.Delete Line') }}:</th>
+                <td><span class="key cmd-key"></span> + <span class="key">D</span></td>
+              </tr>
+            </table>
+          </div><!-- /.col-sm-6 -->
+
+        </div>
+
+      </div>
+
+
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+
+  <script>
+    var platform = navigator.platform.toLowerCase();
+    var isMac = (platform.indexOf('mac') > -1);
+
+    document.querySelectorAll('.cmd-key').forEach((element) => {
+      console.log(element);
+      if (isMac) {
+        element.classList.add('mac');
+      }
+      else {
+        element.classList.add('win', 'key-longer');
+      }
+    })
+  </script>
+</div><!-- /.modal -->

resource/css/_shortcuts.scss

@@ -0,0 +1,77 @@
+// import crowi variable
+@import 'utilities';
+
+#shortcuts-modal {
+  @media (min-width: $screen-sm-min) { // {{{ more than tablet size
+    .modal-dialog {
+      width: 750px;
+    }
+  }
+  @media (max-width: $screen-xs-max) { // {{{ less than tablet size
+    table {
+      table-layout: fixed;
+    }
+  }
+
+  h3 {
+    margin-bottom: 1em;
+  }
+
+  table {
+    th {
+      vertical-align: middle;
+    }
+    td {
+      min-width: 170px;
+    }
+  }
+
+  // see http://coliss.com/articles/build-websites/operation/css/css-apple-keyboard-style-by-nrjmadan.html
+  .key {
+    /*Box Properties*/
+    display:inline-block;
+    width:36px;
+    height:36px;
+    margin: 0px 4px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
+    /*Text Properties*/
+    font: 18px/36px Helvetica, serif ;
+    text-transform: uppercase;
+    text-align: center;
+    color: #666;
+
+    &.cmd-key.mac {
+      &:after {
+        content: '⌘';
+      }
+    }
+    &.cmd-key.win {
+      &:after {
+        content: 'ctrl';
+      }
+    }
+
+    &.key-longer {
+      width: 64px;
+    }
+    &.key-long {
+      width: 72px;
+    }
+  }
+
+  .dl-horizontal {
+    dt {
+      // width: 180px;
+      height: 41px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    // dd {
+    //   margin-left: 190px;
+    // }
+  }
+
+}

resource/css/crowi.scss

@@ -22,6 +22,7 @@ $bootstrap-sass-asset-helper: true;
 @import 'page_crowi-plus';
 @import 'portal';
 @import 'search';
+@import 'shortcuts';
 @import 'user';
 @import 'user_crowi-plus';
 @import 'wiki';
@@ -116,7 +117,7 @@ footer {
 
 .modal.create-page {
 
-  @media (min-width: 768px) {
+  @media (min-width: $screen-sm-min) { // {{{ more than tablet size
     .modal-dialog {
       width: 750px;
     }

resource/js/legacy/crowi.js

@@ -200,7 +200,7 @@ Crowi.handleKeyCHandler = (event) => {
 
 Crowi.handleKeyCtrlSlashHandler = (event) => {
   // show modal to create a page
-  $('#help-modal').modal('toggle');
+  $('#shortcuts-modal').modal('toggle');
 }
 
 $(function() {