YDA-5946 - Made changes according to feedback. Added the dynamic divi…

…sion of grid for long folder names in vault space. Added dynamic css for top attribute of card header if maintenance banner is set.
UtrechtUniversity · Oct 27, 2024 · 4b0eb20 · 4b0eb20
1 parent d39f3fb
commit 4b0eb20
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 56 deletions.
diff --git a/research/metadata-form/src/index.js b/research/metadata-form/src/index.js
@@ -537,7 +537,7 @@ class YodaButtons extends React.Component {
     }
 
     renderCloseButton() {
-        return(<a class="btn btn-secondary" href={"/research/browse?dir=" + encodeURIComponent(path)}>Close</a>);
+        return(<a class="btn btn-secondary" href={"/research/browse?dir=" + encodeURIComponent(path)} title="Close metadata form">Close</a>);
     }
 
     renderCompletenessBar() {
@@ -571,14 +571,14 @@ class YodaButtons extends React.Component {
 
     render() {
         return (
-            <div className="form-group sticky-top">
-                <div className="row card-header metadata-card">
+            <div className="card-header bg-body sticky-top">
+                <div className="row">
                     <h5 className="col-sm-4 float-start">
                         Metadata form - {path}
                     </h5>
                     <div className="col-sm-8 yodaButtons">
                         {this.renderCompletenessBar()}
-                        <div class="float-end">
+                        <div className="float-end">
                             {this.renderButtons()}
                         </div>
                     </div>
@@ -628,7 +628,9 @@ class Container extends React.Component {
                 <YodaButtons saveMetadata={this.saveMetadata}
                              deleteMetadata={deleteMetadata}
                              cloneMetadata={this.cloneMetadata} />
-                <YodaForm ref={(form) => {this.form=form;}}/>
+                <div className="card-body">
+                    <YodaForm ref={(form) => {this.form=form;}}/>
+                </div>
             </div>
         );
     }
@@ -753,7 +755,8 @@ function loadForm() {
 
                 // If maintenance banner is visible, add padding to metadata form header
                 if ($('div[name="banner head"]').length) {
-                    $('#metadata-form .card-header').addClass('pt-4 pb-3')
+                    $('#metadata-form .card-header').addClass('pt-4 pb-3');
+                    $('#metadata-form .card-header').css('top', '0.5rem');
                 }
 
                 // Specific required textarea handling

diff --git a/research/static/research/css/metadata/form.css b/research/static/research/css/metadata/form.css
@@ -22,7 +22,3 @@
 #metadata-form .d-flex, #metadata-form  .col {
     padding: 0 15px;
 }
-
-.metadata-card {
-    background-color: rgba(var(--bs-body-bg-rgb), 1);
-}
diff --git a/research/static/research/js/metadata-form.js b/research/static/research/js/metadata-form.js
diff --git a/research/templates/research/metadata-form.html b/research/templates/research/metadata-form.html
@@ -75,19 +75,17 @@ <h5 class="card-title float-start">
 <div id="metadata-form" class="row hide">
     <div class="col-md-12">
         <div class="card">
-            <div class="card-body">
-                <div id="no-metadata" class="hide">
-                    <p>There is no metadata present for this folder.</p>
-                </div>
-                <div id="no-metadata-and-locked" class="hide">
-                    <p>There is no metadata present for this folder and the folder is locked.</p>
-                </div>
-                <div id="form"
-                     data-path="{{ path }}"
-                     data-csrf_token_name="{{ tokenName | urlencode }}"
-                     data-csrf_token_hash="{{ tokenHash | urlencode }}">
-                    <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
-                </div>
+            <div id="no-metadata" class="hide card-body">
+                <p>There is no metadata present for this folder.</p>
+            </div>
+            <div id="no-metadata-and-locked" class="hide card-body">
+                <p>There is no metadata present for this folder and the folder is locked.</p>
+            </div>
+            <div id="form"
+                    data-path="{{ path }}"
+                    data-csrf_token_name="{{ tokenName | urlencode }}"
+                    data-csrf_token_hash="{{ tokenHash | urlencode }}">
+                <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
             </div>
         </div>
     </div>

diff --git a/vault/metadata-form/src/index.js b/vault/metadata-form/src/index.js
@@ -98,7 +98,7 @@ const enumWidget = (props) => {
         neutral90: 'var(--neutral-10)',
 
          /*
-          * One of the few bootstrap variables we can use with themeing react-select!
+          * One of the few bootstrap variables we can use with theming react-select!
           * control/boxShadow(focused)
           * control/borderColor(focused)
           * control/borderColor:hover(focused)
@@ -146,7 +146,7 @@ const enumWidget = (props) => {
     });
 
     // If the final item was not numeric, it is not yet added to the name_hierarchy array
-    // Therefore, do it now explicitely
+    // Therefore, do it now explicitly
     if (!last_was_numeric) {
         name_hierarchy[level_counter] = level_name;
     }
@@ -521,19 +521,32 @@ class YodaButtons extends React.Component {
     }
 
     renderSaveButton() {
-        return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start">Save</button>);
+        return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start me-3" title="Save metadata">Save</button>);
     }
 
     renderUpdateButton() {
-        return (<button onClick={this.props.updateMetadata} type="button" className="btn btn-primary">Update metadata</button>);
+        return (<button onClick={this.props.updateMetadata} type="button" className="btn btn-primary me-3" title="Update metadata">Update</button>);
     }
 
     renderFormCompleteness() {
-        return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for the vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
+        return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for Vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
     }
 
     renderCloseButton() {
-        return(<div class="input-group-sm has-feedback float-end"><a class="btn btn-secondary" href={"/research/browse?dir=" + encodeURIComponent(path)}>Close</a></div>);
+        return(<a class="btn btn-secondary" href={"/vault/browse?dir=" + encodeURIComponent(path)} title="Close metadata form">Close</a>);
+    }
+
+    renderCompletenessBar() {
+        let completenessBar = [];
+
+        if (formProperties.data.can_edit) {
+            if (actual_edit_mode) {
+                completenessBar.push(this.renderFormCompleteness());
+            }
+        }
+
+        return (<div>{completenessBar}</div>);
+
     }
 
     renderButtons() {
@@ -544,33 +557,32 @@ class YodaButtons extends React.Component {
                 buttons.push(this.renderUpdateButton());
             } else {
                 buttons.push(this.renderSaveButton());
-                buttons.push(this.renderFormCompleteness());
             }
+            buttons.push(this.renderCloseButton());
         }
         return (<div>{buttons}</div>);
     }
 
     render() {
         return (
-            <div className="form-group sticky-top">
+            <div className="card-header bg-body sticky-top">
                 <div className="row">
-                    <div className="col-sm-12 card-header metadata-card">
-                        <h5 className="card-title float-start">
-                            Metadata form - {path}
-                        </h5>
-                        {this.renderCloseButton()}
-                    </div>
-                </div>
-                <div className="row yodaButtons metadata-card pt-2 pb-2">
-                    <div className="col-sm-12">
-                        {this.renderButtons()}
+                    <h5 className="col-sm-8 pt-1 float-start">
+                       Metadata form - {path}
+                    </h5>
+                    <div className="col-sm-4 yodaButtons">
+                        {this.renderCompletenessBar()}
+                        <div className="float-end">
+                            {this.renderButtons()}
+                        </div>
                     </div>
                 </div>
             </div>
         );
     }
 }
 
+
 class Container extends React.Component {
     constructor(props) {
         super(props);
@@ -593,7 +605,9 @@ class Container extends React.Component {
             <div>
                 <YodaButtons saveMetadata={this.saveMetadata}
                              updateMetadata={this.updateMetadata} />
-                <YodaForm ref={(form) => {this.form=form;}}/>
+                <div className="card-body">
+                    <YodaForm ref={(form) => {this.form=form;}}/>
+                </div>
             </div>
         );
     }
@@ -693,7 +707,14 @@ function loadForm() {
 
             // If maintenance banner is visible, add padding to metadata form header
             if ($('div[name="banner head"]').length) {
-                $('#metadata-form .card-header').addClass('pt-4 pb-3')
+                $('#metadata-form .card-header').addClass('pt-4 pb-3');
+                $('#metadata-form .card-header').css('top', '0.5rem');
+            }
+
+            // If progress bar is visible, change division of grid
+            if ($('.form-completeness').length > 0) {
+                $('#metadata-form .card-header .row h5').addClass('col-sm-4').removeClass('col-sm-8');
+                $('#metadata-form .card-header .yodaButtons').addClass('col-sm-8').removeClass('col-sm-4');
             }
 
             // Specific required textarea handling

diff --git a/vault/static/vault/css/metadata/form.css b/vault/static/vault/css/metadata/form.css
@@ -23,6 +23,3 @@
     padding: 0 15px;
 }
 
-.metadata-card {
-    background-color: rgba(var(--bs-body-bg-rgb), 1);
-}
diff --git a/vault/static/vault/js/metadata-form.js b/vault/static/vault/js/metadata-form.js
diff --git a/vault/templates/vault/metadata-form.html b/vault/templates/vault/metadata-form.html
@@ -43,14 +43,12 @@ <h3 class="card-title float-start">
 <div id="metadata-form" class="row hide">
     <div class="col-md-12">
         <div class="card">
-            <div class="card-body">
-                <div id="no-metadata" class="hide">
-                    <p>There is no metadata present for this folder.</p>
-                </div>
-                <div id="form"
-                     data-path="{{ path }}">
-                    <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
-                </div>
+            <div id="no-metadata" class="hide card-body">
+                <p>There is no metadata present for this folder.</p>
+            </div>
+            <div id="form"
+                    data-path="{{ path }}">
+                <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
             </div>
         </div>
     </div>