Merge pull request #2370 from weseek/imprv/modify-sharelink-modal-layout

Imprv/modify sharelink modal layout

src/client/js/components/OutsideShareLinkModal.jsx

@@ -25,9 +25,9 @@ const OutsideShareLinkModal = (props) => {
       </ModalHeader>
       <ModalBody>
         <div className="container">
-          <div className="row align-items-center mb-3">
-            <h4 className="col-10">Shared Link List</h4>
-            <button className="col btn btn-danger" type="button">Delete all links</button>
+          <div className="form-inline mb-3">
+            <h4>Shared Link List</h4>
+            <button className="ml-auto btn btn-danger" type="button">Delete all links</button>
           </div>
 
           <div>

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

@@ -40,7 +40,7 @@ const PageShareManagement = (props) => {
       <>
         <button
           type="button"
-          className="nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret"
+          className="btn-link nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret"
           data-toggle="dropdown"
         >
           <i className="icon-share"></i>
@@ -54,7 +54,7 @@ const PageShareManagement = (props) => {
       <>
         <button
           type="button"
-          className="nav-link bg-transparent"
+          className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
           id="auth-guest-tltips"
         >
           <i className="icon-share"></i>
@@ -72,7 +72,7 @@ const PageShareManagement = (props) => {
       {currentUser == null ? renderGuestUser() : renderCurrentUser()}
       <div className="dropdown-menu dropdown-menu-right">
         <button className="dropdown-item" type="button" onClick={openOutsideShareLinkModalHandler}>
-          <i className="icon-link"></i>{t('Shere this page link to public')}
+          <i className="icon-fw icon-link"></i>{t('Shere this page link to public')}
           <span className="ml-2 badge badge-info badge-pill">{pageContainer.state.shareLinksNumber}</span>
         </button>
       </div>

src/client/js/components/ShareLinkForm.jsx

@@ -10,47 +10,50 @@ import PageContainer from '../services/PageContainer';
 
 const ShareLinkForm = (props) => {
   return (
-    <div className="share-link-form border">
-      <h4 className="ml-3">Expiration Date</h4>
+    <div className="share-link-form border p-3">
+      <h4>Expiration Date</h4>
       <form>
-        <div className="form-group">
-          <div className="custom-control custom-radio offset-4 mb-2">
-            <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
-            <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
-          </div>
+        <fieldset className="form-group">
+          <div className="row">
+            <legend className="col-form-label col-3"></legend>
+            <div>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
+              </div>
 
-          <div className="custom-control custom-radio offset-4 mb-2">
-            <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
-            <label className="custom-control-label" htmlFor="customRadio2">
-              <div className="row align-items-center m-0">
-                <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
-                <span className="col-auto">Days</span>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio2">
+                  <div className="row align-items-center m-0">
+                    <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
+                    <span className="col-auto">Days</span>
+                  </div>
+                </label>
               </div>
-            </label>
-          </div>
 
-          <div className="custom-control custom-radio offset-4 mb-2">
-            <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
-            <label className="custom-control-label" htmlFor="customRadio3">
-              Custom
-              <div className="date-picker">Date Picker</div>
-            </label>
+              <div className="custom-control custom-radio mb-2">
+                <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
+                <label className="custom-control-label" htmlFor="customRadio3">
+                  Custom
+                  <div className="date-picker">Date Picker</div>
+                </label>
+              </div>
+            </div>
           </div>
+        </fieldset>
 
-          <hr />
+        <hr />
 
-          <div className="form-group row">
-            <label htmlFor="inputDesc" className="col-md-4 col-form-label">Description</label>
-            <div className="col-md-4">
-              <input type="text" className="form-control" id="inputDesc" placeholder="Enter description"></input>
-            </div>
+        <div className="form-group row">
+          <label htmlFor="inputDesc" className="offset-3 col-form-label">Description</label>
+          <div className="col-5">
+            <input type="text" className="form-control" id="inputDesc" placeholder="Enter description"></input>
           </div>
+        </div>
 
-          <div className="form-group row">
-            <div className="offset-8 col">
-              <button type="button" className="btn btn-primary">Issue</button>
-            </div>
-          </div>
+        <div className="form-inline">
+          <button type="button" className="ml-auto btn btn-primary">Issue</button>
         </div>
       </form>
     </div>

src/client/styles/scss/_override-bootstrap.scss

@@ -79,7 +79,9 @@
   // Dropdowns
   .dropdown-toggle {
     &.btn.disabled {
+      pointer-events: auto;
       cursor: not-allowed;
+      opacity: unset;
     }
 
     // hide caret