browser: make input number types readonly in share objects modal (#4273)

browser/app/js/components/Browse.js

@@ -722,11 +722,11 @@ export default class Browse extends React.Component {
                 </div>
                 <div className="input-group" style={ { display: web.LoggedIn() ? 'block' : 'none' } }>
                   <label>
-                    Expires in
+                    Expires in (Max 7 days)
                   </label>
                   <div className="set-expire">
                     <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireDays', 1, shareObject.object) }></i>
+                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireDays', 1, shareObject.object) } />
                       <div className="set-expire-title">
                         Days
                       </div>
@@ -735,12 +735,14 @@ export default class Browse extends React.Component {
                           type="number"
                           min={ 0 }
                           max={ 7 }
-                          defaultValue={ 5 } />
+                          defaultValue={ 5 }
+                          readOnly="readOnly"
+                        />
                       </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireDays', -1, shareObject.object) }></i>
+                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireDays', -1, shareObject.object) } />
                     </div>
                     <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireHours', 1, shareObject.object) }></i>
+                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireHours', 1, shareObject.object) } />
                       <div className="set-expire-title">
                         Hours
                       </div>
@@ -749,12 +751,14 @@ export default class Browse extends React.Component {
                           type="number"
                           min={ 0 }
                           max={ 23 }
-                          defaultValue={ 0 } />
+                          defaultValue={ 0 }
+                          readOnly="readOnly"
+                        />
                       </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireHours', -1, shareObject.object) }></i>
+                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireHours', -1, shareObject.object) } />
                     </div>
                     <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireMins', 1, shareObject.object) }></i>
+                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireMins', 1, shareObject.object) } />
                       <div className="set-expire-title">
                         Minutes
                       </div>
@@ -763,9 +767,11 @@ export default class Browse extends React.Component {
                           type="number"
                           min={ 0 }
                           max={ 59 }
-                          defaultValue={ 0 } />
+                          defaultValue={ 0 }
+                          readOnly="readOnly"
+                        />
                       </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireMins', -1, shareObject.object) }></i>
+                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireMins', -1, shareObject.object) } />
                     </div>
                   </div>
                 </div>

browser/app/less/inc/form.less

@@ -183,6 +183,17 @@ select.form-control {
 .set-expire {
     border: 1px solid @input-border;
     margin: 35px 0 30px;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
 }
 
 .set-expire-item {
@@ -191,6 +202,7 @@ select.form-control {
     display: table-cell;
     width: 1%;
     text-align: center;
+    .user-select(none);
 
     &:not(:last-child) {
         border-right: 1px solid @input-border;
@@ -209,6 +221,7 @@ select.form-control {
     left: -8px;
 
     input {
+        .user-select(none);
         font-size: 20px;
         text-align: center;
         position: relative;