Merge branch 'imprv/article-area-gw4067' into imprv/article-area-gw4052

src/client/js/components/CustomNavigation.jsx

@@ -20,18 +20,13 @@ const CustomNavigation = (props) => {
     return min / max * 100;
   }
 
-  const random = Math.random().toString(32).substring(2);
-
-  const grwNavBar = `grw-custom-navbar-${random}`;
-  const grwNavTab = `grw-custom-navtab-${random}`;
-
   useEffect(() => {
     if (activeTab === '') {
       return;
     }
 
-    const navBar = document.getElementById(grwNavBar);
-    const navTabs = document.querySelectorAll(`li.${grwNavTab}`);
+    const navBar = document.getElementById('grw-custom-navbar');
+    const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
 
     if (navBar == null || navTabs == null) {
       return;
@@ -55,10 +50,10 @@ const CustomNavigation = (props) => {
 
   return (
     <React.Fragment>
-      <Nav className="nav-title" id={grwNavBar}>
+      <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           return (
-            <NavItem key={key} type="button" className={`p-0 ${grwNavTab} ${activeTab === key && 'active'}`}>
+            <NavItem key={key} type="button" className={`p-0 grw-custom-navtab ${activeTab === key && 'active'}`}>
               <NavLink onClick={() => { switchActiveTab(key) }}>
                 {value.icon}
                 {value.i18n}

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -142,7 +142,7 @@ const GrowiSubNavigation = (props) => {
   const { isDrawerMode } = navigationContainer.state;
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor,
-    isForbidden: isPageForbidden, pageUser,
+    isForbidden: isPageForbidden, pageUser, isCreatable,
   } = pageContainer.state;
 
   const isPageNotFound = pageId == null;
@@ -195,7 +195,7 @@ const GrowiSubNavigation = (props) => {
             { !isPageNotFound && !isPageForbidden && <PageManagement /> }
           </div>
           <div className="mt-2">
-            <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />
+            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />}
           </div>
         </div>
 

src/client/js/services/PageContainer.js

@@ -39,6 +39,7 @@ export default class PageContainer extends Container {
 
     const revisionId = mainContent.getAttribute('data-page-revision-id');
     const path = decodeURI(mainContent.getAttribute('data-path'));
+
     this.state = {
       // local page data
       markdown: null, // will be initialized after initStateMarkdown()
@@ -61,6 +62,7 @@ export default class PageContainer extends Container {
       isForbidden:  JSON.parse(mainContent.getAttribute('data-page-is-forbidden')),
       isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
+      isCreatable: JSON.parse(mainContent.getAttribute('data-page-is-creatable')),
       isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
       pageUser: JSON.parse(mainContent.getAttribute('data-page-user')),
       tags: null,

src/client/styles/scss/theme/default.scss

@@ -204,6 +204,11 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
-  // Button
-  // [TODO: appply colors to three stranded button]
+  //Button
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary {
+      @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+    }
+  }
+
 }

src/server/views/widget/not_creatable_content.html

@@ -10,6 +10,7 @@
 <div id="content-main" class="content-main page-list"
   data-path="{{ encodeURI(path) }}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
+  data-page-is-creatable="true"
   ></div>
 
 </div>

src/server/views/widget/page_content.html

@@ -17,6 +17,7 @@
   data-page-is-forbidden="{% if forbidden %}true{% else %}false{% endif %}"
   data-page-is-deleted="{% if page.isDeleted() %}true{% else %}false{% endif %}"
   data-page-is-deletable="{% if isDeletablePage() %}true{% else %}false{% endif %}"
+  data-page-is-creatable="false"
   data-page-is-able-to-delete-completely="{% if user.canDeleteCompletely(page.creator._id) %}true{% else %}false{% endif %}"
   data-slack-channels="{{ slack|default('') }}"
   data-page-created-at="{% if page %}{{ page.createdAt|datetz('Y/m/d H:i:s') }}{% endif %}"