Merge branch 'master' into fix/hide-toc-in-trash-page-top

src/client/js/app.jsx

@@ -12,6 +12,7 @@ import DisplaySwitcher from './components/Page/DisplaySwitcher';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
 import Page from './components/Page';
 import PageComments from './components/PageComments';
+import PageContentFooter from './components/PageContentFooter';
 import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
@@ -111,6 +112,7 @@ if (pageContainer.state.pageId != null) {
     'page-accessories': <PageAccessories />,
     'revision-toc': <TableOfContents />,
     'liker-list': <LikerList />,
+    'page-content-footer': <PageContentFooter />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-bookmark-icon': <BookmarkIcon />,

src/client/js/components/InstallerForm.jsx

@@ -72,6 +72,11 @@ class InstallerForm extends React.Component {
                     {this.state.selectedLang.displayName}
                   </span>
                 </button>
+                <input
+                  type="hidden"
+                  value={this.state.selectedLang.id}
+                  name="registerForm[app:globalLang]"
+                />
                 <div className="dropdown-menu" aria-labelledby="dropdownLanguage">
                   {
                   localeMetadatas.map(meta => (

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

@@ -6,22 +6,31 @@ import { userPageRoot } from '@commons/util/path-utils';
 import UserPicture from '../User/UserPicture';
 
 const AuthorInfo = (props) => {
-  const { mode, user, date } = props;
+  const {
+    mode, user, date, locate,
+  } = props;
 
-  const infoLabel = mode === 'create'
+  const infoLabelForSubNav = mode === 'create'
     ? 'Created by'
     : 'Updated by';
+  const infoLabelForFooter = mode === 'create'
+    ? 'Last revision posted at'
+    : 'Created at';
   const userLabel = user != null
     ? <a href={userPageRoot(user)}>{user.name}</a>
     : <i>Unknown</i>;
 
+  if (locate === 'footer') {
+    return <p>{infoLabelForFooter} {date} by <UserPicture user={user} size="sm" /> {userLabel}</p>;
+  }
+
   return (
     <div className="d-flex align-items-center">
       <div className="mr-2">
         <UserPicture user={user} size="sm" />
       </div>
       <div>
-        <div>{infoLabel} {userLabel}</div>
+        <div>{infoLabelForSubNav} {userLabel}</div>
         <div className="text-muted text-date">{date}</div>
       </div>
     </div>
@@ -32,10 +41,12 @@ AuthorInfo.propTypes = {
   date: PropTypes.string.isRequired,
   user: PropTypes.object,
   mode: PropTypes.oneOf(['create', 'update']),
+  locate: PropTypes.oneOf(['subnav', 'footer']),
 };
 
 AuthorInfo.defaultProps = {
   mode: 'create',
+  locate: 'subnav',
 };
 
 

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

@@ -155,10 +155,10 @@ const GrowiSubNavigation = (props) => {
         { (!isCompactMode && !isUserPage && !isPageNotFound && !isPageForbidden) && (
           <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3">
             <li className="pb-1">
-              <AuthorInfo user={creator} date={createdAt} />
+              <AuthorInfo user={creator} date={createdAt} locate="subnav" />
             </li>
             <li className="mt-1 pt-1 border-top">
-              <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" />
+              <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" locate="subnav" />
             </li>
           </ul>
         ) }

src/client/js/components/PageContentFooter.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AuthorInfo from './Navbar/AuthorInfo';
+
+import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const PageContentFooter = (props) => {
+  const { pageContainer } = props;
+  const {
+    createdAt, creator, updatedAt, revisionAuthor,
+  } = pageContainer.state;
+
+  return (
+    <div className="page-content-footer mt-5 py-4 d-edit-none d-print-none">
+      <div className="container-lg">
+        <p className="page-meta">
+          <AuthorInfo user={creator} date={createdAt} mode="create" locate="footer" />
+          <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" locate="footer" />
+        </p>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageContentFooterWrapper = withUnstatedContainers(PageContentFooter, [AppContainer, PageContainer]);
+
+
+PageContentFooter.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default PageContentFooterWrapper;

src/client/styles/scss/_attachments.scss

@@ -1,44 +1,3 @@
-.page-attachments-row {
-  border-top: solid 1px transparent;
-}
-
-.page-attachments {
-  li.attachment {
-    list-style: none;
-  }
-
-  .attachment-userpicture {
-    line-height: 1.7em;
-    vertical-align: bottom;
-  }
-}
-
-.page-attachments,
-.page-meta {
-  font-size: 0.95em;
-
-  .attachment-in-use {
-    padding: 1px 5px;
-    margin: 0 0 0 4px;
-  }
-
-  .attachment-filetype {
-    padding: 1px 5px;
-    margin: 0 0 0 4px;
-    font-weight: normal;
-  }
-
-  .attachment-download {
-    margin: 0 0 0 4px;
-    cursor: pointer;
-  }
-
-  .attachment-delete {
-    margin: 0 0 0 4px;
-    cursor: pointer;
-  }
-}
-
 .attachment-delete-modal {
   .attachment-delete-image {
     text-align: center;

src/client/styles/scss/_page-content-footer.scss

@@ -0,0 +1,6 @@
+.page-content-footer {
+  border-top: solid 1px transparent;
+  .page-meta {
+    font-size: 0.95em;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -35,6 +35,7 @@
 @import 'draft';
 @import 'editor-attachment';
 @import 'editor-navbar';
+@import 'page-content-footer';
 @import 'handsontable';
 @import 'layout';
 @import 'login';

src/client/styles/scss/theme/_apply-colors.scss

@@ -509,9 +509,9 @@ mark.rbt-highlight-text {
 }
 
 /*
- * GROWI page attachments
+ * GROWI page content footer
  */
-.page-attachments-row {
+.page-content-footer {
   background-color: darken($bgcolor-global, 2%);
   border-top-color: $border-color-theme;
 }

src/client/styles/scss/theme/kibela.scss

@@ -32,7 +32,7 @@ $lightthemecolor: rgba(181, 203, 247, 0.61);
   border-radius: 0.35em;
 }
 
-.page-attachments-row {
+.page-content-footer {
   margin-top: 30px;
 }
 

src/server/views/layout-growi/page.html

@@ -16,10 +16,7 @@
 
 {% block content_main_after %}
   {% include 'widget/comments.html' %}
-
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
 {% endblock %}
 
 

src/server/views/layout-growi/page_list.html

@@ -18,9 +18,7 @@
       <div id="trash-page-list"></div>
     </div>
   {% endif %}
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
 {% endblock %}
 
 

src/server/views/layout-growi/user_page.html

@@ -45,7 +45,6 @@
     </div>
   {% endif %}
 
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
+  <div id="page-content-footer"></div>
+
 {% endblock %}

src/server/views/widget/page_attachments.html

@@ -1,10 +0,0 @@
-<div class="page-attachments-row mt-5 py-4 d-edit-none d-print-none">
-  <div class="container-lg">
-    <div class="page-attachments" id="page-attachment"></div>
-
-    <p class="page-meta">
-      <p>Last revision posted at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="picture picture-sm rounded-circle"> {{ page.revision.author.name }}</a></p>
-      <p>Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.creator.username }}"><img src="{{ page.creator|default(page.creator)|picture }}" class="picture picture-sm rounded-circle"> {{ page.creator.name }}</a></p>
-    </p>
-  </div>
-</div>