Merge pull request #370 from weseek/master

release v3.0.10

CHANGES.md

@@ -1,10 +1,18 @@
 CHANGES
 ========
 
-## 3.0.9-RC
+## 3.0.10-RC
+
+* Improvement: Add 'nature' theme
+* Fix: Page list and Timeline layout for layout-growi
+* Fix: Adjust theme colors
+    * Introduced by 3.0.9
+
+## 3.0.9
 
 * Fix: Registering new LDAP User is failed
     * Introduced by 3.0.6
+* Support: Organize scss for overriding bootstrap variables
 * Support: Upgrade libs
     * codemirror
     * react-codemirror2

lib/locales/en-US/sandbox-bootstrap3.md

@@ -0,0 +1,135 @@
+# Labels
+
+<span class="label label-default">Default</span>
+<span class="label label-primary">Primary</span>
+<span class="label label-success">Success</span>
+<span class="label label-info">Info</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+
+# Alerts
+
+<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
+<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
+<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
+<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
+
+# Panels
+
+<div class="panel panel-default">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-primary">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-success">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-info">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-warning">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-danger">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+# Wells
+
+## Default well
+
+<div class="well">Look, I'm in a well! </div>
+
+## Optional classes
+
+<div class="well well-lg">Look, I'm in a well! </div>
+
+<div class="well well-sm">Look, I'm in a well! </div>
+
+# Typography
+
+## Lead body copy
+
+<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
+
+## Marked text
+
+You can use the mark tag to <mark>highlight</mark> text.
+
+## Small text
+
+<small>This line of text is meant to be treated as fine print.</small>
+
+## Alignment classes
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-left">Left aligned text.</p>
+    <p class="text-center">Center aligned text.</p>
+    <p class="text-right">Right aligned text.</p>
+    <p class="text-justify">Justified text.</p>
+    <p class="text-nowrap">No wrap text.</p>
+  </div>
+</div>
+
+## Transformation classes
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-lowercase">Lowercased text.</p>
+    <p class="text-uppercase">Uppercased text.</p>
+    <p class="text-capitalize">Capitalized text.</p>
+  </div>
+</div>
+
+
+# Helper classes
+
+## Contextual colors
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+  </div>
+</div>
+
+## Contextual backgrounds
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+  </div>
+</div>

lib/routes/installer.js

@@ -21,6 +21,11 @@ module.exports = function(crowi, app) {
     const sandboxMarkdownPath = path.join(crowi.localeDir, lang, 'sandbox.md');
     const sandboxMarkdown = fs.readFileSync(sandboxMarkdownPath);
     Page.create('/Sandbox', sandboxMarkdown, owner, {});
+
+    // create /Sandbox/Bootstrap3
+    const bs3MarkdownPath = path.join(crowi.localeDir, 'en-US', 'sandbox-bootstrap3.md');
+    const bs3Markdown = fs.readFileSync(bs3MarkdownPath);
+    Page.create('/Sandbox/Bootstrap3', bs3Markdown, owner, {});
   }
 
   actions.index = function(req, res) {

lib/views/admin/customize.html

@@ -52,26 +52,16 @@
         <fieldset>
           <legend>{{ t('customize_page.Theme') }}</legend>
 
-          <div id="themeOptions" class="d-flex">
-            <a id="theme-option-default" href="#"
-                class="default {% if 'default' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default')"
-                data-theme="{{ webpack_asset('style-theme-default').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            <a id="theme-option-default-dark" href="#"
-                class="default-dark {% if 'default-dark' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default-dark')"
-                data-theme="{{ webpack_asset('style-theme-default-dark').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            {# Hide temporary for release v3.0.8 -- 2018.04.24 Yuki Takei
-            <a id="theme-option-nature"
-             class="nature"
-             data-theme="{{ webpack_asset('style-theme-nature').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            #}
+          <div id="themeOptions">
+            {# Light Themes #}
+            <div class="d-flex">
+              {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
+            </div>
+            {# Dark Themes #}
+            <div class="d-flex">
+              {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
+            </div>
           </div>
 
           <div class="form-group">

lib/views/admin/widget/theme-colorbox.html

@@ -1,7 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-  <g>
-    <path class="color1" d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="#ccc"></path>
-    <path class="color2" d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="#000"></path>
-    <path class="color3" d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="#300"></path>
-  </g>
-</svg>
+<a id="theme-option-{{name}}" href="#"
+    class="{{name}} {% if name === settingForm['customize:theme'] %}active{% endif %}"
+    onclick="selectTheme('{{name}}')"
+    data-theme="{{ webpack_asset('style-theme-' + name).css }}">
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+    <g>
+      <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="{{bg}}"></path>
+      <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="{{topbar}}"></path>
+      <path d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="{{theme}}"></path>
+    </g>
+  </svg>
+
+</a>

lib/views/layout-growi/page.html

@@ -35,7 +35,7 @@
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

lib/views/layout-growi/page_list.html

@@ -34,7 +34,7 @@
   </div>
 
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

lib/views/layout-growi/user_page.html

@@ -53,7 +53,7 @@
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.0.9-RC",
+  "version": "3.0.10-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",

resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -49,6 +49,10 @@ input.form-control, textarea.form-control {
   > li > a {
     color: $bodytext;
   }
+
+  .divider {
+    background-color: $border;
+  }
 }
 
 .modal {

resource/styles/agile-admin/inverse/colors/default-dark.scss

@@ -22,6 +22,7 @@ $dark: darken($bodytext, 5%);
 $border: lighten($basecolor, 15%);
 $navbar-border: lighten($border, 10%);
 $active-navbar-border: darken($border, 3%);
+$btn-default-bgcolor: darken($basecolor, 10%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

resource/styles/agile-admin/inverse/colors/nature.scss

@@ -1,19 +1,20 @@
 @import '../variables';
 
-$themecolor:#112744;
+$themecolor:#460039;
 
-$topbar:#334455;
+$topbar:#118050;;
 $sidebar:#fff;
-$bodycolor:#fff;
-$headingtext: #2b2b2b;
+$bodycolor:#fefffd;
+
+$headingtext: #46694e;
 $bodytext: #333333;
-$linktext: lighten($themecolor, 20%);
-$linktext-hover: lighten($linktext, 20%);
-$sidebar-text:#38495a;
+$linktext: lighten($themecolor,5%);
+$linktext-hover: lighten($linktext, 12%);
+$sidebar-text:#5c7253;
 
 $primary: $themecolor;
 
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
+$logo-mark-fill: lighten(desaturate($topbar, 30%), 20%);
 $wikilinktext: lighten($themecolor, 20%);
 $wikilinktext-hover: lighten($wikilinktext, 20%);
 

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -1140,7 +1140,7 @@ label{
 }
 .btn-default, .btn-default.disabled{
   color: $bodytext;
-  $this-color: darken($bodycolor, 10%);
+  $this-color: $btn-default-bgcolor;
   background: $this-color;
   border:1px solid $this-color;
    &:hover, &:focus, &.focus{
@@ -1155,7 +1155,7 @@ label{
 .btn-default.btn-outline {
     background-color: transparent;
     &:hover, &:focus, &.focus{
-    background:darken($bodycolor, 10%);
+    background: $btn-default-bgcolor;
     }
 }
 .btn-primary.btn-outline {

resource/styles/agile-admin/inverse/variables.scss

@@ -52,7 +52,8 @@ $lft:left !default;
 
 $dark-text:#848a96 !default;
 $navbar-border: #ccc !default;
-$active-navbar-border: lighten($navbar-border, 20%) !default;
+$active-navbar-border: lighten($navbar-border, 10%) !default;
+$btn-default-bgcolor: darken(#fff, 10%) !default;
 
 /*Border radius*/
 $radius: 0 !default;

resource/styles/scss/_admin.scss

@@ -92,40 +92,5 @@
         background-color: $brand-success;
       }
     }
-
-    // theme color
-    .default {
-      .color1 {
-        fill: white;
-      }
-      .color2 {
-        fill: #334455;
-      }
-      .color3 {
-        fill: #112744;
-      }
-    }
-    .default-dark {
-      .color1 {
-        fill: #212731;
-      }
-      .color2 {
-        fill: #151515;
-      }
-      .color3 {
-        fill: #f75b36;
-      }
-    }
-    .nature {
-      .color1 {
-        fill: #dfffd1;
-      }
-      .color2 {
-        fill: #1f9b33;
-      }
-      .color3 {
-        fill: #56f736;
-      }
-    }
   }
 }

resource/styles/scss/_layout_crowi.scss

@@ -22,7 +22,7 @@
       border-radius: 0 5px;
       padding: 3px 11px;
       font-weight: bold;
-      background: $gray-light;
+      background: $gray-lighter;
       margin-left: 5px;
       margin-bottom: 5px;
 

resource/styles/scss/_login.scss

@@ -163,7 +163,7 @@
     }
   }
   .link-switch {
-    color: $gray;
+    color: $gray-lighter;
     &:hover {
       color: white;
     }

resource/styles/scss/_override-bootstrap-variables.scss

@@ -8,11 +8,11 @@
 //## Gray and brand colors for use across Bootstrap.
 
 $gray-base:              #000 !default;
-$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
-$gray-dark:              lighten($gray-base, 20%) !default;   // #333
-$gray:                   #f0f0f0;
-$gray-light:             #f5f5f5;
-$gray-lighter:           #fafafa;
+$gray-darker:            lighten($gray-base, 13.5%); // #222
+$gray-dark:              lighten($gray-base, 20%);   // #333
+$gray:                   lighten($gray-base, 33.5%); // #555
+$gray-light:             lighten($gray-base, 46.7%); // #777
+$gray-lighter:           lighten($gray-base, 93.5%); // #eee
 $gray-extralight:        #fafafa; // Growi original
 
 $brand-primary:         $primary;
@@ -41,6 +41,13 @@ $border-radius-large: 0;
 $border-radius-small: 0;
 
 
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-default-bg: $btn-default-bgcolor;
+
+
 
 //== Forms
 //
@@ -49,7 +56,7 @@ $border-radius-small: 0;
 //** `<input>` background color
 $input-bg:                       $bodycolor;
 //** `<input disabled>` background color
-$input-bg-disabled:              darken($bodycolor, 10%);
+$input-bg-disabled:              $btn-default-bgcolor;
 
 //** `<input>` border color
 $input-border:                   $border;