Page name create helper

lib/util/swigFunctions.js

@@ -40,6 +40,18 @@ module.exports = function(crowi, app, req, locals) {
     return Config.isUploadable(config);
   };
 
+  locals.parentPath = function(path) {
+    if (path == '/') {
+      return path;
+    }
+
+    if (path.match(/.+\/$/)) {
+      return path;
+    }
+
+    return path + '/';
+  };
+
   locals.isUserPageList = function(path) {
     if (path.match(/^\/user\/[^\/]+\/$/)) {
       return true;

lib/views/layout/layout.html

@@ -91,16 +91,19 @@
         </a>
       </li>
       #}
+      <li id="" class="dropdown">
+        <button class="btn btn-default create-page-button" data-target="#create-page" data-toggle="modal">
+          <i class="fa fa-pencil"></i> 作成
+        </button>
+      </li>
       <li id="login-user">
         <a href="/user/{{ user.username }}" id="link-mypage">
           <img src="{{ user|picture }}" class="picture picture-rounded" width="25" /> {{ user.name }}
         </a>
       </li>
-      <li><a href="" title="今日のメモを作成" data-target="#createMemo" data-toggle="modal"><i class="fa fa-pencil"></i></a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> <label class="sr-only">メニュー</label></a>
         <ul class="dropdown-menu">
-          <li><a href="" data-target="#createMemo" data-toggle="modal"><i class="fa fa-pencil"></i> 今日のメモを作成</a></li>
           <li class="divider"></li>
           <li><a href="/me"><i class="fa fa-gears"></i> ユーザー設定</a></li>
           <li class="divider"></li>
@@ -122,7 +125,7 @@
     </ul>
   </div><!-- /.navbar-collapse -->
 </nav>
-{% include '../modal/widget_today_memo.html' %}
+{% include '../modal/widget_create_page.html' %}
 {% endblock  %} {# layout_head_nav #}
 
 <div class="container-fluid">

lib/views/modal/widget_create_page.html

@@ -0,0 +1,66 @@
+<div class="modal create-page" id="create-page">
+  <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">Create Page</h4>
+      </div>
+
+      <div class="modal-body">
+
+        <form class="form-horizontal" id="create-page-today" role="form">
+          <fieldset>
+            <div class="col-xs-12">
+              <h4>今日の◯◯</h4>
+            </div>
+            <div class="col-xs-10">
+              <span class="page-today-prefix">{{ userPageRoot(user) }}/</span>
+              <input type="text" data-prefix="{{ userPageRoot(user) }}/" class="page-today-input1 form-control" value="メモ" id="" name="">
+              <span class="page-today-suffix">/{{ now|datetz('Y/m/d') }}/</span>
+              <input type="text" data-prefix="/{{ now|datetz('Y/m/d') }}/" class="page-today-input2 form-control" id="page-today-input2" name="" placeholder="ページ名を入力(空欄OK)">
+            </div>
+            <div class="col-xs-2">
+              <button type="submit" class="btn btn-primary">作成</button>
+            </div>
+          </fieldset>
+        </form>
+        <hr>
+
+        {% if !isTopPage() %}
+        <form class="form-horizontal" id="create-page-under-tree" role="form">
+          <fieldset>
+            <div class="col-xs-12">
+              <h4><code>{{ parentPath(path) }}</code>以下に作成</h4>
+            </div>
+            <div class="col-xs-10">
+              <span class="page-name-addons">{{ parentPath(path) }}</span>
+              <input type="text" data-prefix="{{ parentPath(path) }}" class="page-name-input form-control " id="" name="" placeholder="ページ名を入力">
+            </div>
+            <div class="col-xs-2">
+              <button type="submit" class="btn btn-primary">作成</button>
+            </div>
+          </fieldset>
+        </form>
+        <hr>
+        {% endif  %}
+
+        <form class="form-horizontal" id="create-page-form" role="form">
+          <fieldset>
+            <div class="col-xs-12">
+            </div>
+            <div class="col-xs-10">
+              <input type="text" class="form-control" name="" placeholder="ページ名を入力">
+            </div>
+            <div class="col-xs-2">
+              <button type="submit" class="btn btn-primary">作成</button>
+            </div>
+          </fieldset>
+        </form>
+
+      </div><!-- /.modal-body -->
+
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+

lib/views/modal/widget_today_memo.html

@@ -1,28 +0,0 @@
-
-<div class="modal fade" id="createMemo">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <form role="form" class="form-inline" id="createMemoForm">
-
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">新規メモを作成</h4>
-      </div>
-      <div class="modal-body">
-        <p><a href="{{ userPageRoot(user) }}/メモ/"><i class="fa fa-list-ul"></i> 自分のメモ一覧を見る</a></p>
-
-          <div class="input-group">
-            <span class="input-group-addon">{{ userPageRoot(user) }}/メモ/{{ now|datetz('Y/m/d') }}/</span>
-            <input type="text" class="form-control" id="memoName" name="memoName" placeholder="メモ名を入力">
-          </div>
-          <input type="hidden" class="form-control" name="memoNamePrefix" value="{{ userPageRoot(user) }}/メモ/{{ now|datetz('Y/m/d') }}/">
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
-        <input type="submit" class="btn btn-primary" id="createMemoSubmit" value="作成">
-      </div>
-
-      </form>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->

lib/views/page.html

@@ -51,7 +51,7 @@
   <ul class="nav nav-tabs hidden-print">
     <li><a>Create: {{ path }}</a></li>
     <li class="dropdown pull-right">
-      <a href="/"><i class="fa fa-times"></i> キャンセル</a>
+      <a href="#" onclick="history.back();"><i class="fa fa-times"></i> キャンセル</a>
     </li>
   </ul>
   <div class="tab-content">

resource/css/_layout.scss

@@ -27,6 +27,10 @@
         background: $crowiHeaderBackground;
       }
 
+      > div > .navbar-nav li button {
+        margin: 10px;
+      }
+
       > div > a ,
       > div > ul > li > a {
         color: #ccc;

resource/css/crowi.scss

@@ -94,6 +94,39 @@ footer {
   }
 }
 
+.modal.create-page {
+  .modal-body {
+    h3, h4 {
+      margin-bottom: 10px;
+    }
+
+    form {
+      .page-name-addons {
+        position: absolute;
+        top: 7px;
+        left: 27px;
+      }
+      .page-today-prefix {
+        display: inline-block;
+      }
+      .page-today-input1 {
+        width: 60px;
+        padding-left: 2px;
+        padding-right: 2px;
+        display: inline-block;
+      }
+      .page-today-suffix {
+        display: inline-block;
+      }
+      .page-today-input2 {
+        width: 100%;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+
 // {{{ add badge variation
 .badge-default {
   @include label-variant($label-default-bg);

resource/js/crowi.js

@@ -205,18 +205,55 @@ $(function() {
     $(this).select();
   });
 
-  $('#createMemo').on('shown.bs.modal', function (e) {
-    $('#memoName').focus();
+
+  $('#create-page').on('shown.bs.modal', function (e) {
+    var padding = $('#create-page-under-tree .page-name-addons').outerWidth() + 15;
+    $('#create-page-under-tree .form-control').css({paddingLeft: padding});
+
+    var input2Width = $('#create-page-today .page-today-input2').outerWidth();
+    var newWidth = input2Width
+      - $('#create-page-today .page-today-prefix').outerWidth()
+      - $('#create-page-today .page-today-input1').outerWidth()
+      - $('#create-page-today .page-today-suffix').outerWidth()
+      - 10
+      ;
+    $('#create-page-today .form-control.page-today-input2').css({width: newWidth}).focus();
+
   });
-  $('#createMemoForm').submit(function(e)
-  {
-    var prefix = $('[name=memoNamePrefix]', this).val();
-    var name = $('[name=memoName]', this).val();
+  $('#create-page-form').submit(function(e) {
+    var name = $('input', this).val();
+    if (name === '') {
+      name = '/';
+    }
+    if (!name.match(/^\//)) {
+      name = '/' + name;
+    }
+    top.location.href = name;
+    return false;
+  });
+
+  $('#create-page-today').submit(function(e) {
+    var prefix1 = $('input.page-today-input1', this).data('prefix');
+    var input1 = $('input.page-today-input1', this).val();
+    var prefix2 = $('input.page-today-input2', this).data('prefix');
+    var input2 = $('input.page-today-input2', this).val();
+    if (input1 === '') {
+      prefix1 = 'メモ';
+    }
+    if (input2 === '') {
+      prefix2 = prefix2.slice(0, -1);
+    }
+    top.location.href = prefix1 + input1 + prefix2 + input2;
+    return false;
+  });
+
+  $('#create-page-under-tree').submit(function(e) {
+    var prefix = $('input', this).data('prefix');
+    var name = $('input', this).val();
     if (name === '') {
       prefix = prefix.slice(0, -1);
     }
     top.location.href = prefix + name;
-
     return false;
   });