Merge branch 'imprv/modify-design-of-link-edit-modal' into imprv/fix-error-popover-not-find-target

# Conflicts:
#	src/client/js/components/PageEditor/LinkEditModal.jsx

.gitignore

@@ -1,23 +1,27 @@
-# Logs
-logs
-*.log
-npm-debug.log.*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# OS generated files #
-.DS_Store
-.Trash-*
-ehthumbs.db
-Thumbs.db
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
 
-# Node Files #
-/node_modules/
-/bower_components/
-npm-debug.log
-/npm-debug.log.*
-package-lock.json
+# next.js
+/.next/
+/out/
 
-# Dist #
+# production
+/build
+
+# dist
+/dist/
 /report/
+/public/uploads
+/tmp/
+
+# dist (for GROWI v4.x and below)
 /public/*.chunk.js
 /public/*.chunk.js.LICENSE
 /public/*.bundle.js
@@ -25,17 +29,30 @@ package-lock.json
 /public/dll
 /public/js
 /public/styles
-/public/uploads
 /src/*/__build__/
 /__build__/**
 /src/*/dist/
 /.awcache
 .webpack.json
 /compiled/
-/tmp/
 
-# Doc #
-/doc/
+# misc
+.DS_Store
+*.pem
+.Trash-*
+ehthumbs.db
+Thumbs.db
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # IDE, dev #
 .idea

src/client/js/components/Page/CopyDropdown.jsx

@@ -75,6 +75,7 @@ class CopyDropdown extends React.Component {
   }
 
   generatePermalink() {
+    const { origin } = window.location;
     const { pageId, isShareLinkMode } = this.props;
 
     if (pageId == null) {

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -209,7 +209,7 @@ class LinkEditModal extends React.PureComponent {
     const linkText = linker.generateMarkdownText();
     return (
       <div className="d-flex justify-content-between mb-3">
-        <div className="card w-100 bg-muted p-1 mb-0">
+        <div className="card bg-disabled w-100 p-1 mb-0">
           <p className="text-left text-muted mb-1 small">Markdown</p>
           <p className="text-center text-truncate text-muted">{linkText}</p>
         </div>
@@ -293,6 +293,135 @@ class LinkEditModal extends React.PureComponent {
     this.setState({ isPreviewOpen: !this.state.isPreviewOpen });
   }
 
+  renderLinkAndLabelForm() {
+    return (
+      <>
+        <h3 className="grw-modal-head">Set link and label</h3>
+        <form className="form-group">
+          <div className="form-gorup my-3">
+            <div className="input-group flex-nowrap">
+              <div className="input-group-prepend">
+                <span className="input-group-text">link</span>
+              </div>
+              <SearchTypeahead
+                onChange={this.handleChangeTypeahead}
+                onInputChange={this.handleChangeLinkInput}
+                inputName="link"
+                placeholder="Input page path or URL"
+                keywordOnInit={this.state.linkInputValue}
+              />
+              <div className="input-group-append">
+                <button type="button" id="preview-btn" className="btn btn-info btn-page-preview">
+                  <PagePreviewIcon />
+                </button>
+                <Popover trigger="focus" placement="right" isOpen={this.state.isPreviewOpen} target="preview-btn" toggle={this.toggleIsPreviewOpen}>
+                  <PopoverBody>
+                    {this.renderPreview()}
+                  </PopoverBody>
+                </Popover>
+              </div>
+            </div>
+          </div>
+          <div className="form-gorup my-3">
+            <div className="input-group flex-nowrap">
+              <div className="input-group-prepend">
+                <span className="input-group-text">label</span>
+              </div>
+              <input
+                type="text"
+                className="form-control"
+                id="label"
+                value={this.state.labelInputValue}
+                onChange={e => this.handleChangeLabelInput(e.target.value)}
+                disabled={this.state.linkerType === Linker.types.growiLink}
+              />
+            </div>
+          </div>
+        </form>
+      </>
+    );
+  }
+
+  renderPathFormatForm() {
+    return (
+      <div className="card well pt-3">
+        <form className="form-group mb-0">
+          <div className="form-group row">
+            <label className="col-sm-3">Path format</label>
+            <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
+              <input
+                className="custom-control-input"
+                id="relativePath"
+                type="checkbox"
+                checked={this.state.isUseRelativePath}
+                onChange={this.toggleIsUseRelativePath}
+                disabled={!this.state.linkInputValue.startsWith('/') || this.state.linkerType === Linker.types.growiLink}
+              />
+              <label className="custom-control-label" htmlFor="relativePath">
+                Use relative path
+              </label>
+            </div>
+            <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
+              <input
+                className="custom-control-input"
+                id="permanentLink"
+                type="checkbox"
+                checked={this.state.isUsePermanentLink}
+                onChange={this.toggleIsUsePamanentLink}
+                disabled={this.state.permalink === '' || this.state.linkerType === Linker.types.growiLink}
+              />
+              <label className="custom-control-label" htmlFor="permanentLink">
+                Use permanent link
+              </label>
+            </div>
+          </div>
+          <div className="form-group row mb-0">
+            <label className="col-sm-3">Notation</label>
+            <div className="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="markdownType"
+                value={Linker.types.markdownLink}
+                checked={this.state.linkerType === Linker.types.markdownLink}
+                onChange={e => this.handleSelecteLinkerType(e.target.value)}
+              />
+              <label className="custom-control-label" htmlFor="markdownType">
+                Markdown
+              </label>
+            </div>
+            <div className="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="growiType"
+                value={Linker.types.growiLink}
+                checked={this.state.linkerType === Linker.types.growiLink}
+                onChange={e => this.handleSelecteLinkerType(e.target.value)}
+              />
+              <label className="custom-control-label" htmlFor="growiType">
+                Growi original
+              </label>
+            </div>
+            <div className="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="pukiwikiType"
+                value={Linker.types.pukiwikiLink}
+                checked={this.state.linkerType === Linker.types.pukiwikiLink}
+                onChange={e => this.handleSelecteLinkerType(e.target.value)}
+              />
+              <label className="custom-control-label" htmlFor="pukiwikiType">
+                Pukiwiki
+              </label>
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
   render() {
     return (
       <Modal className="link-edit-modal" isOpen={this.state.show} toggle={this.cancel} size="lg">
@@ -303,123 +432,8 @@ class LinkEditModal extends React.PureComponent {
         <ModalBody className="container">
           <div className="row">
             <div className="col-12">
-              <h3 className="grw-modal-head">Set link and label</h3>
-              <form className="form-group">
-                <div className="form-gorup my-3">
-                  <div className="input-group flex-nowrap">
-                    <div className="input-group-prepend">
-                      <span className="input-group-text">link</span>
-                    </div>
-                    <SearchTypeahead
-                      onChange={this.handleChangeTypeahead}
-                      onInputChange={this.handleChangeLinkInput}
-                      inputName="link"
-                      placeholder="Input page path or URL"
-                      keywordOnInit={this.state.linkInputValue}
-                    />
-                    <div className="input-group-append">
-                      <button type="button" id="preview-btn" className="btn btn-info btn-page-preview">
-                        <PagePreviewIcon />
-                      </button>
-                      <Popover trigger="focus" placement="right" isOpen={this.state.isPreviewOpen} target="preview-btn" toggle={this.toggleIsPreviewOpen}>
-                        <PopoverBody>
-                          {this.renderPreview()}
-                        </PopoverBody>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
-                <div className="form-gorup my-3">
-                  <div className="input-group flex-nowrap">
-                    <div className="input-group-prepend">
-                      <span className="input-group-text">label</span>
-                    </div>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="label"
-                      value={this.state.labelInputValue}
-                      onChange={e => this.handleChangeLabelInput(e.target.value)}
-                      disabled={this.state.linkerType === Linker.types.growiLink}
-                    />
-                  </div>
-                </div>
-              </form>
-              <div className="card well pt-3">
-                <form className="form-group mb-0">
-                  <div className="form-group row">
-                    <label className="col-sm-3">Path format</label>
-                    <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
-                      <input
-                        className="custom-control-input"
-                        id="relativePath"
-                        type="checkbox"
-                        checked={this.state.isUseRelativePath}
-                        onChange={this.toggleIsUseRelativePath}
-                        disabled={!this.state.linkInputValue.startsWith('/') || this.state.linkerType === Linker.types.growiLink}
-                      />
-                      <label className="custom-control-label" htmlFor="relativePath">
-                          Use relative path
-                      </label>
-                    </div>
-                    <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
-                      <input
-                        className="custom-control-input"
-                        id="permanentLink"
-                        type="checkbox"
-                        checked={this.state.isUsePermanentLink}
-                        onChange={this.toggleIsUsePamanentLink}
-                        disabled={this.state.permalink === '' || this.state.linkerType === Linker.types.growiLink}
-                      />
-                      <label className="custom-control-label" htmlFor="permanentLink">
-                          Use permanent link
-                      </label>
-                    </div>
-                  </div>
-                  <div className="form-group row mb-0">
-                    <label className="col-sm-3">Notation</label>
-                    <div className="custom-control custom-radio custom-control-inline">
-                      <input
-                        type="radio"
-                        className="custom-control-input"
-                        id="markdownType"
-                        value={Linker.types.markdownLink}
-                        checked={this.state.linkerType === Linker.types.markdownLink}
-                        onChange={e => this.handleSelecteLinkerType(e.target.value)}
-                      />
-                      <label className="custom-control-label" htmlFor="markdownType">
-                          Markdown
-                      </label>
-                    </div>
-                    <div className="custom-control custom-radio custom-control-inline">
-                      <input
-                        type="radio"
-                        className="custom-control-input"
-                        id="growiType"
-                        value={Linker.types.growiLink}
-                        checked={this.state.linkerType === Linker.types.growiLink}
-                        onChange={e => this.handleSelecteLinkerType(e.target.value)}
-                      />
-                      <label className="custom-control-label" htmlFor="growiType">
-                          Growi original
-                      </label>
-                    </div>
-                    <div className="custom-control custom-radio custom-control-inline">
-                      <input
-                        type="radio"
-                        className="custom-control-input"
-                        id="pukiwikiType"
-                        value={Linker.types.pukiwikiLink}
-                        checked={this.state.linkerType === Linker.types.pukiwikiLink}
-                        onChange={e => this.handleSelecteLinkerType(e.target.value)}
-                      />
-                      <label className="custom-control-label" htmlFor="pukiwikiType">
-                          Pukiwiki
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
+              {this.renderLinkAndLabelForm()}
+              {this.renderPathFormatForm()}
             </div>
           </div>
           <div className="row">

src/client/styles/scss/_linkedit-preview.scss

@@ -1,16 +1,12 @@
-.popover {
-  .popover-body {
-    .linkedit-preview {
-      .page-editor-preview-body {
-        max-height: 70vh;
-        padding-top: 0px;
-        margin: 0px -10px 0px -10px;
-        .wiki {
-          width: 200%;
-          overflow-y: scroll;
-          transform: scale(0.5) translate(-50%, -50%);
-        }
-      }
+.linkedit-preview {
+  .page-editor-preview-body {
+    max-height: 70vh;
+    padding-top: 0px;
+    margin: 0px -10px 0px -10px;
+    .wiki {
+      width: 200%;
+      overflow-y: scroll;
+      transform: scale(0.5) translate(-50%, -50%);
     }
   }
 }

src/client/styles/scss/atoms/_buttons.scss

@@ -85,10 +85,3 @@
     }
   }
 }
-
-// page preview button in link form
-.btn-page-preview svg {
-  width: 18px;
-  height: 18px;
-  fill: white;
-}

src/client/styles/scss/molecules/page-preview-btn.scss

@@ -0,0 +1,5 @@
+// page preview button
+.btn-page-preview svg {
+  width: 18px;
+  height: 18px;
+}

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

@@ -23,6 +23,7 @@
 
 // molecules
 @import 'molecules/copy-dropdown';
+@import 'molecules/page-preview-btn';
 
 // growi component
 @import 'admin';

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

@@ -57,6 +57,10 @@ textarea.form-control {
   border-right: none;
 }
 
+.input-group input {
+  border-color: $secondary;
+}
+
 /*
  * Dropdown
  */
@@ -81,10 +85,20 @@ textarea.form-control {
 /*
  * Card
  */
-.card:not([class*='bg-']) {
+.card:not([class*='bg-']):not(.well) {
   @extend .bg-dark;
 }
 
+// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
+.card.well {
+  border-color: $secondary;
+}
+
+.card.bg-disabled {
+  background-color: lighten($dark, 10%);
+  border-color: $secondary;
+}
+
 /*
  * Pagination
  */
@@ -242,39 +256,20 @@ body.on-edit {
   }
 }
 
-/*
- * Link Edit Modal
- */
-.link-edit-modal {
-  .card,
-  input {
-    border-color: $secondary;
-  }
-  .card.bg-muted {
-    background-color: lighten($dark, 10%);
-    border-color: $secondary;
-  }
-  .input-group {
-    .input-group-text {
-      color: $light;
-      background-color: $secondary;
-    }
-  }
-}
-
 /*
  * Popover
  */
 .popover {
   background-color: $bgcolor-global;
   border-color: $secondary;
+  .popover-header {
+    color: $white;
+    background-color: $secondary;
+    border-color: $secondary;
+  }
   .popover-body {
     color: inherit;
   }
-  .arrow::after {
-    border-right-color: $secondary;
-    border-left-color: $secondary;
-  }
 }
 
 /*

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

@@ -181,21 +181,19 @@ $table-hover-bg: $bgcolor-table-hover;
  * Link Edit Modal
  */
 .link-edit-modal {
-  .card.bg-muted {
-    background-color: darken($bgcolor-card, 5%);
-    border-color: $gray-200;
-  }
-  .input-group {
-    .input-group-text {
-      color: $secondary;
-      background-color: $light;
-    }
-  }
   span i {
     color: $gray-400;
   }
 }
 
+/*
+ * card
+ */
+.card.bg-disabled {
+  background-color: darken($bgcolor-card, 5%);
+  border-color: $gray-200;
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -233,6 +233,11 @@ pre:not(.hljs):not(.CodeMirror-line) {
   fill: $color-editor-icons;
 }
 
+// page preview button in link form
+.btn-page-preview svg {
+  fill: white;
+}
+
 /*
  * Modal
  */

src/server/routes/page.js

@@ -229,6 +229,11 @@ module.exports = function(crowi, app) {
     renderVars.hasDraftOnHackmd = page.hasDraftOnHackmd;
   }
 
+  function addRenderVarsForPresentation(renderVars, page) {
+    renderVars.page = page;
+    renderVars.revision = page.revision;
+  }
+
   async function addRenderVarsForUserPage(renderVars, page, requestUser) {
     const userData = await User.findUserByUsername(User.getUsernameByPath(page.path));
 
@@ -286,7 +291,7 @@ module.exports = function(crowi, app) {
 
   async function showPageForPresentation(req, res, next) {
     const path = getPathFromRequest(req);
-    const revisionId = req.query.revision;
+    const { revisionId } = req.query;
 
     let page = await Page.findByPathAndViewer(path, req.user);
 
@@ -298,7 +303,11 @@ module.exports = function(crowi, app) {
 
     // populate
     page = await page.populateDataToMakePresentation(revisionId);
-    addRenderVarsForPage(renderVars, page);
+
+    if (page != null) {
+      addRenderVarsForPresentation(renderVars, page);
+    }
+
     return res.render('page_presentation', renderVars);
   }
 

src/server/views/widget/page_tabs.html

@@ -50,7 +50,7 @@
   <!-- presentation -->
   {% if not page.isTopPage() %}
     <li class="nav-item d-edit-none">
-      <a href="?presentation=1" class="nav-link toggle-presentation">
+      <a href="?presentation=1&revisionId={{revision.id}}" class="nav-link toggle-presentation">
         <i class="icon-film icon-fw"></i><span class="d-none d-sm-inline">{{ t('Presentation Mode') }}</span>
       </a>
     </li>