Share link form

- Design adjustment
-Add translation(ja/zh/en)

resource/locales/ja_JP/translation.json

@@ -212,7 +212,8 @@
     "description": "概要",
     "enter_desc": "概要を入力",
     "Unlimited": "無期限",
-    "Issue": "発行"
+    "Issue": "発行",
+    "Share_settings" :"共有設定"
   },
   "API Settings": "API設定",
   "API Token Settings": "API Token設定",

resource/locales/zh_CN/translation.json

@@ -424,7 +424,8 @@
     "description": "description",
     "enter_desc": "Enter description",
     "Unlimited": "unlimited",
-    "Issue": "Issue"
+    "Issue": "Issue",
+    "Share_settings" :"Share settings"
   },
 	"security_setting": {
 		"Security settings": "安全设置",

src/client/js/components/OutsideShareLinkModal.jsx

@@ -95,10 +95,10 @@ class OutsideShareLinkModal extends React.Component {
         </ModalHeader>
         <ModalBody>
           <div className="container">
-            <div className="form-inline mb-3">
-              <h4>{t('share_links.share_link_list')}</h4>
-              <button className="ml-auto btn btn-danger" type="button" onClick={this.deleteAllLinksButtonHandler}>{t('delete_all')}</button>
-            </div>
+            <h3 className="grw-modal-head  d-flex  pb-2">
+              { t('share_links.share_link_list') }
+              <button className="btn btn-danger ml-auto " type="button" onClick={this.deleteAllLinksButtonHandler}>{t('delete_all')}</button>
+            </h3>
 
             <div>
               <ShareLinkList

src/client/js/components/ShareLinkForm.jsx

@@ -136,75 +136,82 @@ class ShareLinkForm extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="form-group">
-        <div className="custom-control custom-radio offset-4 mb-2">
-          <input
-            type="radio"
-            className="custom-control-input"
-            id="customRadio1"
-            name="expirationType"
-            value="customRadio1"
-            checked={expirationType === 'unlimited'}
-            onChange={() => { this.handleChangeExpirationType('unlimited') }}
-          />
-          <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
-        </div>
-
-        <div className="custom-control custom-radio offset-4 mb-2">
-          <input
-            type="radio"
-            className="custom-control-input"
-            id="customRadio2"
-            value="customRadio2"
-            checked={expirationType === 'numberOfDays'}
-            onChange={() => { this.handleChangeExpirationType('numberOfDays') }}
-            name="expirationType"
-          />
-          <label className="custom-control-label" htmlFor="customRadio2">
-            <div className="row align-items-center m-0">
+      <div className="form-group row">
+        <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.expire')}</label>
+        <div className="col-md-7">
+
+
+          <div className="custom-control custom-radio form-group ">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="customRadio1"
+              name="expirationType"
+              value="customRadio1"
+              checked={expirationType === 'unlimited'}
+              onChange={() => { this.handleChangeExpirationType('unlimited') }}
+            />
+            <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
+          </div>
+
+          <div className="custom-control custom-radio  form-group">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="customRadio2"
+              value="customRadio2"
+              checked={expirationType === 'numberOfDays'}
+              onChange={() => { this.handleChangeExpirationType('numberOfDays') }}
+              name="expirationType"
+            />
+            <label className="custom-control-label" htmlFor="customRadio2">
+              <div className="row align-items-center m-0">
+                <input
+                  type="number"
+                  min="1"
+                  className="col-4"
+                  name="expirationType"
+                  value={this.state.numberOfDays}
+                  onFocus={() => { this.handleChangeExpirationType('numberOfDays') }}
+                  onChange={e => this.handleChangeNumberOfDays(Number(e.target.value))}
+                />
+                <span className="col-auto">{t('share_links.Days')}</span>
+              </div>
+            </label>
+          </div>
+
+          <div className="custom-control custom-radio form-group text-nowrap mb-0">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="customRadio3"
+              name="expirationType"
+              value="customRadio3"
+              checked={expirationType === 'custom'}
+              onChange={() => { this.handleChangeExpirationType('custom') }}
+            />
+            <label className="custom-control-label" htmlFor="customRadio3">
+              {t('share_links.Custom')}
+            </label>
+            <div className="d-inline-flex flex-wrap">
+              <input
+                type="date"
+                className="ml-3 mb-2"
+                name="customExpirationDate"
+                value={this.state.customExpirationDate}
+                onFocus={() => { this.handleChangeExpirationType('custom') }}
+                onChange={e => this.handleChangeCustomExpirationDate(e.target.value)}
+              />
               <input
-                type="number"
-                min="1"
-                className="col-4"
-                name="expirationType"
-                value={this.state.numberOfDays}
-                onFocus={() => { this.handleChangeExpirationType('numberOfDays') }}
-                onChange={e => this.handleChangeNumberOfDays(Number(e.target.value))}
+                type="time"
+                className="ml-3 mb-2"
+                name="customExpiration"
+                value={this.state.customExpirationTime}
+                onFocus={() => { this.handleChangeExpirationType('custom') }}
+                onChange={e => this.handleChangeCustomExpirationTime(e.target.value)}
               />
-              <span className="col-auto">{t('share_links.Days')}</span>
             </div>
-          </label>
-        </div>
-
-        <div className="custom-control custom-radio offset-4 mb-2">
-          <input
-            type="radio"
-            className="custom-control-input"
-            id="customRadio3"
-            name="expirationType"
-            value="customRadio3"
-            checked={expirationType === 'custom'}
-            onChange={() => { this.handleChangeExpirationType('custom') }}
-          />
-          <label className="custom-control-label" htmlFor="customRadio3">
-            {t('share_links.Custom')}
-          </label>
-          <input
-            type="date"
-            className="ml-3"
-            name="customExpirationDate"
-            value={this.state.customExpirationDate}
-            onFocus={() => { this.handleChangeExpirationType('custom') }}
-            onChange={e => this.handleChangeCustomExpirationDate(e.target.value)}
-          />
-          <input
-            type="time"
-            className="ml-3"
-            name="customExpiration"
-            value={this.state.customExpirationTime}
-            onFocus={() => { this.handleChangeExpirationType('custom') }}
-            onChange={e => this.handleChangeCustomExpirationTime(e.target.value)}
-          />
+          </div>
         </div>
       </div>
     );
@@ -214,7 +221,7 @@ class ShareLinkForm extends React.Component {
     const { t } = this.props;
     return (
       <div className="form-group row">
-        <label htmlFor="inputDesc" className="col-md-4 col-form-label">{t('share_links.description')}</label>
+        <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.description')}</label>
         <div className="col-md-4">
           <input
             type="text"
@@ -232,13 +239,15 @@ class ShareLinkForm extends React.Component {
   render() {
     const { t } = this.props;
     return (
-      <div className="share-link-form border p-3">
-        <h4>{t('share_links.expire')}</h4>
-        {this.renderExpirationTypeOptions()}
-        <hr />
-        {this.renderDescriptionForm()}
-        <div className="text-right">
-          <button type="button" className="btn btn-primary" onClick={this.handleIssueShareLink}>
+
+      <div className="share-link-form  p-3">
+        <h3 className="grw-modal-head pb-2"> { t('share_links.Share_settings') }</h3>
+        <div className=" p-3">
+          {this.renderExpirationTypeOptions()}
+          {this.renderDescriptionForm()}
+          {/* <div className="text-right">
+          </div> */}
+          <button type="button" className="btn btn-primary d-block mx-auto px-5" onClick={this.handleIssueShareLink}>
             {t('share_links.Issue')}
           </button>
         </div>