feat: wiki-side-panel-menu

frontend/src/pages/wiki2/css/view-structure.css

@@ -248,6 +248,15 @@
   margin-top: 4px;
 }
 
+.view-operation-dropdown-menu .sf3-font {
+  font-size: 10px;
+  margin-right: 10px;
+}
+
+.view-operation-dropdown-menu .divider {
+  margin: 0.2rem 0;
+}
+
 /* folders dropdown */
 .view-structure .more-view-operation .btn-move-to-folder {
   display: flex;
@@ -264,7 +273,7 @@
 
 .view-structure .more-view-operation .folders-dropdown-menu {
   margin-top: -16px;
-  margin-left: -12px;
+  margin-left: 10px;
 }
 
 .view-structure .folders-dropdown-menu .dropdown-item {
@@ -299,7 +308,7 @@
 .view-structure .folders-dropdown .dropdown-menu {
   max-width: 180px;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .view-structure .folders-dropdown .dropdown-menu .folder-name {

frontend/src/pages/wiki2/utils/index.js

@@ -43,8 +43,21 @@ const getIconURL = (repoId, fileName) => {
   return serviceURL + '/lib/' + repoId + '/file/_Internal/Wiki/Icon/' + fileName + '?raw=1';
 };
 
-const getCurrentPageConfig = (pages,pageId) => {
+const getCurrentPageConfig = (pages, pageId) => {
   return pages.filter(page => page.id === pageId)[0];
 };
 
-export { generatorBase64Code, generateUniqueId, isObjectNotEmpty, getIconURL, getCurrentPageConfig };
+const getWikPageLink = (pageId) => {
+  const { origin, pathname } = window.location;
+
+  return `${origin}${pathname}?page_id=${pageId}`;
+};
+
+export {
+  generatorBase64Code,
+  generateUniqueId,
+  isObjectNotEmpty,
+  getIconURL,
+  getCurrentPageConfig,
+  getWikPageLink,
+};

frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js

@@ -4,6 +4,7 @@ import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap
 import toaster from '../../../../components/toast';
 import { gettext } from '../../../../utils/constants';
 import Icon from '../../../../components/icon';
+import { getWikPageLink } from '../../utils';
 
 export default class PageDropdownMenu extends Component {
 
@@ -103,11 +104,31 @@ export default class PageDropdownMenu extends Component {
     this.setState({ isShowMenu: false });
   };
 
+  handleCopyLink = () => {
+    const { view } = this.props;
+    const wikiLink = getWikPageLink(view.id);
+    const successText = gettext('Copied link to clipboard');
+    const failedText = gettext('Copy failed');
+
+    navigator.clipboard.writeText(wikiLink).then(() => {
+      toaster.success(successText);
+    }, () => {
+      toaster.error(failedText);
+    }).catch(void 0);
+  };
+
+  handleOpenInNewTab = () => {
+    const { view } = this.props;
+    const wikiLink = getWikPageLink(view.id);
+    window.open(wikiLink);
+  };
+
   render() {
     const {
       folderId, canDelete, canDuplicate, renderFolderMenuItems, pagesLength, isOnlyOneView,
     } = this.props;
     const folderMenuItems = renderFolderMenuItems && renderFolderMenuItems({ currentFolderId: folderId, onMoveViewToFolder: this.onMoveViewToFolder });
+
     return (
       <Dropdown
         isOpen={true}
@@ -122,6 +143,10 @@ export default class PageDropdownMenu extends Component {
           positionFixed={true}
           style={{ zIndex: 1051 }}
         >
+          <DropdownItem onClick={this.handleCopyLink}>
+            <i className="sf3-font sf3-font-sdoc-link" />
+            <span className="item-text">{gettext('Copy link')}</span>
+          </DropdownItem>
           <DropdownItem onClick={this.onRenameView}>
             <Icon symbol={'edit'}/>
             <span className="item-text">{gettext('Modify name')}</span>
@@ -183,6 +208,11 @@ export default class PageDropdownMenu extends Component {
               </Dropdown>
             </DropdownItem>
           }
+          < hr className='divider' />
+          <DropdownItem onClick={this.handleOpenInNewTab}>
+            <i className='sf3-font sf3-font-open-in-new-tab' />
+            <span className="item-text">{gettext('Open in new tab')}</span>
+          </DropdownItem>
         </DropdownMenu>
       </Dropdown>
     );

media/css/sf_font3/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sf3-font"; /* Project id 1230969 */
-  src: url('iconfont.eot?t=1717754578668'); /* IE9 */
+  src: url('iconfont.eot?t=1718430387468'); /* IE9 */
-  src: url('iconfont.eot?t=1717754578668#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  src: url('iconfont.eot?t=1718430387468#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1717754578668') format('woff2'),
+       url('iconfont.woff2?t=1718430387468') format('woff2'),
-       url('iconfont.woff?t=1717754578668') format('woff'),
+       url('iconfont.woff?t=1718430387468') format('woff'),
-       url('iconfont.ttf?t=1717754578668') format('truetype'),
+       url('iconfont.ttf?t=1718430387468') format('truetype'),
-       url('iconfont.svg?t=1717754578668#sf3-font') format('svg');
+       url('iconfont.svg?t=1718430387468#sf3-font') format('svg');
 }
 
 .sf3-font {
@@ -16,6 +16,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sf3-font-open-in-new-tab:before {
+  content: "\e620";
+}
+
+.sf3-font-sdoc-link:before {
+  content: "\e61f";
+}
+
+.sf3-font-files2:before {
+  content: "\e828";
+}
+
+.sf3-font-file:before {
+  content: "\e829";
+}
+
 .sf3-font-monitor:before {
   content: "\e827";
 }

media/css/sf_font3/iconfont.svg

@@ -14,6 +14,14 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="open-in-new-tab" unicode="&#58912;" d="M70.4 19.2L809.6 761.6H358.4c-28.8 0-51.2 22.4-51.2 51.2S329.6 864 358.4 864h556.8C956.8 864 992 828.8 992 787.2v-556.8c0-28.8-22.4-51.2-51.2-51.2-28.8 0-51.2 22.4-51.2 51.2V694.4L147.2-57.6c-22.4-22.4-54.4-22.4-76.8 0s-22.4 54.4 0 76.8z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-link" unicode="&#58911;" d="M614.4 489.6l35.2-35.2-67.2-67.2-35.2 35.2c-67.2 67.2-176 70.4-246.4 9.6l-6.4-6.4-147.2-147.2c-35.2-35.2-54.4-80-54.4-128s19.2-92.8 54.4-128l3.2-3.2c35.2-35.2 80-54.4 128-54.4s92.8 19.2 128 54.4l73.6 73.6 6.4 6.4 28.8 35.2 73.6-57.6-28.8-35.2-12.8-12.8-73.6-73.6c-51.2-51.2-121.6-80-192-80-73.6 0-144 28.8-195.2 80l-3.2 3.2C28.8 6.4 0 76.8 0 150.4s28.8 144 80 195.2l147.2 147.2c3.2 3.2 9.6 6.4 12.8 12.8 108.8 92.8 272 86.4 374.4-16zM745.6 896c73.6 0 144-28.8 195.2-80l3.2-3.2c51.2-51.2 80-121.6 80-195.2s-28.8-144-80-195.2L796.8 275.2c-3.2-3.2-9.6-6.4-12.8-12.8-51.2-44.8-115.2-67.2-182.4-67.2-73.6 0-140.8 28.8-192 80l-35.2 35.2 67.2 67.2 35.2-35.2c67.2-67.2 176-70.4 246.4-9.6l6.4 6.4 3.2 3.2L880 489.6c35.2 35.2 54.4 80 54.4 128s-19.2 92.8-54.4 128l-3.2 3.2c-35.2 35.2-80 54.4-128 54.4s-92.8-19.2-128-54.4l-73.6-73.6-6.4-6.4-28.8-35.2-73.6 57.6 28.8 35.2 12.8 12.8 73.6 73.6C604.8 867.2 675.2 896 745.6 896z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="files2" unicode="&#59432;" d="M768-96H256c-73.6 0-128 57.6-128 131.2V732.8C128 806.4 182.4 864 256 864h297.6c12.8 0 22.4-3.2 28.8-12.8l297.6-304c9.6-9.6 12.8-16 12.8-32v-480C896-38.4 841.6-96 768-96zM265.6 768C240 768 224 752 224 726.4v-681.6c0-28.8 16-44.8 41.6-44.8h492.8c25.6 0 41.6 16 41.6 41.6V496L537.6 768H265.6zM822.4 448h-297.6c-25.6 0-41.6 16-41.6 41.6V790.4c-3.2 25.6 12.8 41.6 38.4 41.6s41.6-16 41.6-41.6v-256h256c25.6 0 41.6-16 41.6-41.6s-12.8-44.8-38.4-44.8zM368 352h288c25.6 0 48-22.4 48-48s-22.4-48-48-48h-288c-25.6 0-48 22.4-48 48s22.4 48 48 48zM368 192h288c25.6 0 48-22.4 48-48s-22.4-48-48-48h-288c-25.6 0-48 22.4-48 48s22.4 48 48 48z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="file" unicode="&#59433;" d="M768-96H256c-73.6 0-128 57.6-128 131.2V732.8C128 806.4 182.4 864 256 864h297.6c12.8 0 22.4-3.2 28.8-12.8l297.6-304c9.6-9.6 12.8-16 12.8-32v-480C896-38.4 841.6-96 768-96zM265.6 768C240 768 224 752 224 726.4v-681.6c0-28.8 16-44.8 41.6-44.8h492.8c25.6 0 41.6 16 41.6 41.6V496L537.6 768H265.6zM822.4 448h-297.6c-25.6 0-41.6 16-41.6 41.6V790.4c-3.2 25.6 12.8 41.6 38.4 41.6s41.6-16 41.6-41.6v-256h256c25.6 0 41.6-16 41.6-41.6s-12.8-44.8-38.4-44.8z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="monitor" unicode="&#59431;" d="M620.8-16c0-28.8-12.8-57.6-32-80s-48-32-76.8-32-57.6 12.8-76.8 32-32 48-32 80h217.6zM512 768c28.8 0 54.4-25.6 54.4-57.6v-35.2c124.8-25.6 220.8-137.6 220.8-275.2v-44.8c0-80 25.6-156.8 73.6-217.6l25.6-32c9.6-12.8 12.8-28.8 6.4-44.8-6.4-16-22.4-22.4-38.4-22.4H169.6c-16 0-28.8 9.6-38.4 22.4-6.4 16-6.4 32 6.4 44.8l25.6 32c48 60.8 73.6 137.6 73.6 217.6v44.8c0 134.4 92.8 249.6 220.8 275.2V710.4c0 32 25.6 57.6 54.4 57.6z m0-166.4c-105.6 0-192-86.4-192-195.2v-44.8c0-83.2-22.4-166.4-67.2-236.8h521.6c-44.8 70.4-67.2 150.4-67.2 236.8v44.8C704 512 617.6 601.6 512 601.6z m438.4 28.8c25.6 12.8 51.2 0 64-22.4 12.8-25.6 0-51.2-22.4-64l-115.2-54.4c-25.6-12.8-51.2 0-64 22.4s0 51.2 22.4 64l115.2 54.4z m-876.8 32L188.8 608c25.6-12.8 35.2-38.4 22.4-64-12.8-25.6-38.4-35.2-64-22.4L35.2 576C9.6 585.6 0 614.4 9.6 640c12.8 22.4 41.6 35.2 64 22.4zM243.2 832l73.6-105.6c16-22.4 9.6-51.2-12.8-67.2s-51.2-9.6-67.2 12.8L163.2 777.6c-16 22.4-9.6 51.2 12.8 67.2s51.2 9.6 67.2-12.8z m505.6 0c16 22.4 44.8 25.6 67.2 12.8s25.6-44.8 12.8-67.2L755.2 672c-16-22.4-44.8-25.6-67.2-12.8s-28.8 44.8-12.8 67.2L748.8 832z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="star-empty" unicode="&#59429;" d="M512 832c16 0 32-9.6 38.4-25.6l124.8-256 278.4-41.6c16-3.2 28.8-12.8 35.2-28.8s0-32-9.6-44.8l-201.6-201.6 48-281.6c3.2-16-3.2-32-19.2-41.6-12.8-9.6-32-9.6-44.8-3.2L512 38.4 262.4-96c-16-6.4-32-6.4-44.8 3.2-12.8 9.6-19.2 25.6-19.2 41.6l48 281.6-201.6 201.6c-12.8 16-16 32-9.6 48s19.2 25.6 35.2 28.8l278.4 41.6 124.8 256c6.4 16 22.4 25.6 38.4 25.6z m0-144l-96-198.4c-6.4-12.8-19.2-22.4-32-25.6l-214.4-32 156.8-153.6c9.6-9.6 16-25.6 12.8-38.4l-38.4-217.6 192 102.4c12.8 6.4 28.8 6.4 41.6 0l192-102.4-35.2 217.6c-3.2 12.8 3.2 28.8 12.8 38.4l156.8 153.6-214.4 32c-12.8 3.2-25.6 9.6-32 25.6L512 688z"  horiz-adv-x="1024" />