Adding the metadata controls and the owner controls in the metrics well.

Adding the metadata controls and the owner controls in the metrics well. TODO: The Success message on copy citation button. TODO: Discuss current styling with the team. Refernce : #594 , #641 , #642
NCEAS · Jun 11, 2018 · ff36f6f · ff36f6f
1 parent c8352a1
commit ff36f6f
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 55 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -1644,10 +1644,13 @@ body > .alert-container {
 /* Style for the metric button */
 a.btn.metrics {
     display: inline-block;
-    width: 145px;
+    width: 164px;
     padding-right: 0px;
     margin-top: -14px;
     margin-left: -5px;
+    color: #888888;
+    border-color: #C3C3C3;
+    background-color: #FFFFFF;
 }
 i.icon.icon-cloud-download {
     font-size: 1.2em; !important;
@@ -1677,18 +1680,71 @@ i.icon.metric-icon.icon-spinner.icon-spin {
 .metric-value.badge {
     float: right;
     color: #FFFFFF;
-    background-color: #1C6E84;
+    background-color: #888888;
     margin-top: 2px;
 }
 
 /* Style for the toolbars that contains buttons in the well on either side. */
 .metric-toolbar {
     float: left;
-    width: 70%;
+    width: auto;
 }
 .edit-toolbar {
+    border-left: 1px solid #E3E3E3;
     float: right;
-    width: 30%;
+    margin-top: -15px;
+    width: auto;
+    height: 50px;
+
+}
+
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container {
+    margin-left: 15px;
+    margin-top: 10px;
+    margin-right: -10px;
+    width: auto;
+    height: 38px;
+    display: inline-block;
+    position: relative;
+}
+
+.metric-well >
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container >
+span.copy-success
+{
+    font-size: .9em;
+    top: -40px;
+    left: 17px;
+    position: absolute;
+}
+
+.edit-toolbar >
+#owner-controls-container >
+.authority-controls {
+    width: auto;
+    height: 38px;
+    margin-top: -38px;
+    margin-right: -20px;
+    margin-left: 170px;
+}
+
+.edit-toolbar >
+#owner-controls-container >
+.authority-controls >
+#editMetadata {
+    margin-right: 15px;
+}
+
+/* Making the publish button consistent size as the downloads all*/
+.edit-toolbar >
+#owner-controls-container >
+.authority-controls >
+#publish {
+    width: 138px;
 }
 
 /* Disabling the hover features of the button for a while. Once, the Modals are ready, we'll enable
@@ -1698,9 +1754,10 @@ a.btn.metrics:hover .metric-value.badge {
     color: #1C6E84;
     background-color: #FFFFFF;
 }*/
-a.btn.metrics:hover {
-    color: #1C6E84;
+a.btn.metrics:hover, a.btn.metrics:click {
+    color: #888888;
     background-color: #FFFFFF;
+    border-color: #C3C3C3;
 }
 
 /******************************************

diff --git a/src/js/models/AppModel.js b/src/js/models/AppModel.js
@@ -101,16 +101,15 @@ define(['jquery', 'underscore', 'backbone'],
 			// dataset landing page
 			displayMetricWell: true,
 			displayDatasetMetrics: true,
-			displayDatasetMetricsTooltip: true,
+			displayDatasetMetricsTooltip: false,
 			displayDatasetCitationMetric: true,
 			displayDatasetDownloadMetric: true,
 			displayDatasetViewMetric: true,
-			displayDatasetEditButton: false,
+			displayDatasetEditButton: true,
 			displayDatasetQualityMetric: false,
 			displayDatasetAnalyzeButton: false,
-			displayMetricModals: false
-
-
+			displayMetricModals: false,
+			displayDatasetControls: true
 		},
 
 		defaultView: "data",

diff --git a/src/js/themes/arctic/css/metacatui.css b/src/js/themes/arctic/css/metacatui.css
@@ -2926,4 +2926,67 @@ iframe classes
 }
 
 .col-1-4 + .col-1-4 + .col-1-4 + .col-1-4:nth-child(3n+1){ clear: right; }
-.col-1-4 + .col-1-4 + .col-1-4 + .col-1-4 + .col-1-4:nth-child(4n+1){ clear: left; }
+.col-1-4 + .col-1-4 + .col-1-4 + .col-1-4 + .col-1-4:nth-child(4n+1){ clear: left; }
+
+
+/******************************************
+* Metrics Controller Styling
+********************************************/
+/* Style for the metric button */
+a.btn.metrics {
+    margin-top: -20px;
+}
+
+/* Style for the toolbars that contains buttons in the well on either side. */
+.metric-toolbar {
+    float: left;
+    width: auto;
+}
+.edit-toolbar {
+    border-left: 1px solid #E3E3E3;
+    float: right;
+    margin-top: -15px;
+    padding-left: 0px;
+    width: auto;
+
+}
+
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container {
+    margin-top: 10px;
+    margin-right: -10px;
+    margin-left: 0px;
+    width: auto;
+    height: 38px;
+    display: inline-block;
+    position: relative;
+}
+
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container >
+a {
+    margin-left: 15px;
+}
+
+.metric-well >
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container >
+span.copy-success
+{
+    font-size: .9em;
+    top: -40px;
+    left: 17px;
+    position: absolute;
+}
+
+.edit-toolbar >
+#owner-controls-container >
+.authority-controls {
+    float: right;
+    width: auto;
+    margin-right: -25px;
+    margin-left: 290px;
+}
diff --git a/src/js/themes/arctic/models/AppModel.js b/src/js/themes/arctic/models/AppModel.js
@@ -106,16 +106,15 @@ define(['jquery', 'underscore', 'backbone'],
 			// dataset landing page
 			displayMetricWell: true,
 			displayDatasetMetrics: true,
-			displayDatasetMetricsTooltip: true,
+			displayDatasetMetricsTooltip: false,
 			displayDatasetCitationMetric: true,
 			displayDatasetDownloadMetric: true,
 			displayDatasetViewMetric: true,
-			displayDatasetEditButton: false,
+			displayDatasetEditButton: true,
 			displayDatasetQualityMetric: false,
 			displayDatasetAnalyzeButton: false,
-			displayMetricModals: false
-
-
+			displayMetricModals: false,
+			displayDatasetControls: true
 		},
 
 		defaultView: "data",

diff --git a/src/js/themes/dataone/models/AppModel.js b/src/js/themes/dataone/models/AppModel.js
@@ -77,16 +77,15 @@ define(['jquery', 'underscore', 'backbone'],
 			// dataset landing page
 			displayMetricWell: true,
 			displayDatasetMetrics: true,
-			displayDatasetMetricsTooltip: true,
+			displayDatasetMetricsTooltip: false,
 			displayDatasetCitationMetric: true,
 			displayDatasetDownloadMetric: true,
 			displayDatasetViewMetric: true,
 			displayDatasetEditButton: false,
 			displayDatasetQualityMetric: false,
 			displayDatasetAnalyzeButton: false,
-			displayMetricModals: false
-
-
+			displayMetricModals: false,
+			displayDatasetControls: true
 		},
 
 		defaultView: "data",

diff --git a/src/js/themes/knb/css/metacatui.css b/src/js/themes/knb/css/metacatui.css
@@ -3008,4 +3008,59 @@ iframe classes
 
 #loading-app{
 	display: none;
-}
+}
+
+/******************************************
+* Metrics Controller Styling
+********************************************/
+/* Style for the metric button */
+a.btn.metrics {
+    margin-top: 0px;
+}
+.metric-well.well.well-lg {
+    height: 55px;
+}
+
+/* Style for the toolbars that contains buttons in the well on either side. */
+.metric-toolbar {
+    float: left;
+    width: auto;
+}
+.edit-toolbar {
+    border-left: 1px solid #E3E3E3;
+    float: right;
+    margin-top: -15px;
+    padding-left: 0px;
+    height: 85px;
+}
+
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container {
+    margin-top: 10px;
+    margin-left: 0px;
+    width: auto;
+    float: right;
+    margin-right: -35px;
+    position: relative;
+}
+
+.edit-toolbar >
+#metadata-controls-container >
+.metadata-controls-container >
+a {
+    margin-left: 15px;
+    width: 138px;
+}
+
+
+.edit-toolbar >
+#owner-controls-container >
+.authority-controls {
+    float: right;
+    position: relative;
+    width: auto;
+    margin-right: -25px;
+    margin-left: 0px;
+    margin-top: auto;
+}
diff --git a/src/js/themes/knb/models/AppModel.js b/src/js/themes/knb/models/AppModel.js
@@ -111,16 +111,15 @@ define(['jquery', 'underscore', 'backbone'],
 			// dataset landing page
 			displayMetricWell: true,
 			displayDatasetMetrics: true,
-			displayDatasetMetricsTooltip: true,
+			displayDatasetMetricsTooltip: false,
 			displayDatasetCitationMetric: true,
 			displayDatasetDownloadMetric: true,
 			displayDatasetViewMetric: true,
-			displayDatasetEditButton: false,
+			displayDatasetEditButton: true,
 			displayDatasetQualityMetric: false,
 			displayDatasetAnalyzeButton: false,
-			displayMetricModals: false
-
-
+			displayMetricModals: false,
+			displayDatasetControls: true
 		},
 
 		defaultView: "data",

diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js
@@ -219,16 +219,24 @@ define(['jquery',
 			this.insertDataSource();
 			// is this the latest version? (includes DOI link when needed)
 			this.showLatestVersion();
-			//Insert controls
-			this.insertControls();
+
 
+            // If we're displaying the metrics well then display copy citation and edit button
+            // inside the well
 			if (MetacatUI.appModel.get("displayDatasetMetrics")) {
 				//Insert Metrics Stats into the dataset landing pages
 				this.insertMetricsControls();
 			}
+            else {
+                // Copy Citation button
+                this.insertControls();
+
+                // Edit button and the publish button
+                this.insertOwnerControls();
+            }
 
 
-			this.insertOwnerControls();
+
 
 			//Show loading icon in metadata section
 			this.$(this.metadataContainer).html(this.loadingTemplate({ msg: "Retrieving metadata ..." }));
@@ -1014,31 +1022,26 @@ define(['jquery',
 
 				metrics.append(buttonToolbar);
 			}
-
-			if (MetacatUI.appModel.get("displayDatasetEditButton")) {
-				var editToolbar = $(document.createElement("div")).addClass("edit-toolbar btn-toolbar");
-				//Save some references
-				var pid     = this.model.get("id") || this.pid,
-					model   = this.model,
-					viewRef = this;
-
-				// this.listenToOnce(this.model, "change", function(){
-					//Insert an Edit button
-					if( _.contains(MetacatUI.appModel.get("editableFormats"), this.model.get("formatId")) ){ 
-						editToolbar.append(
-							this.editMetadataTemplate({
-								identifier: pid,
-								supported: true
-							}));
-					}
-					else{
-						editToolbar.append(this.editMetadataTemplate({
-							supported: false
-						}));
-					}
-				// });
-				metrics.append(editToolbar);
-			}
+
+
+            if(MetacatUI.appModel.get("displayDatasetControls")) {
+                var controlsToolbar = $(document.createElement("div")).addClass("edit-toolbar btn-toolbar");
+                var copyCitationToolbar = this.$(this.controlsContainer);
+
+                //Insert controls
+                this.insertControls();
+                controlsToolbar.append(copyCitationToolbar)
+
+                if(MetacatUI.appModel.get("displayDatasetEditButton")) {
+                    var editToolbar = this.$(this.ownerControlsContainer);
+
+                    // Insert Owner Controls
+                    this.insertOwnerControls();
+                    controlsToolbar.append(editToolbar)
+                }
+
+				metrics.append(controlsToolbar);
+            }
 
 			self.$(self.tableContainer).before(metrics);
 		},