Add dashboard settings for shared dashboard

Author: Simrayz

python/nav/web/sass/nav/custom.scss

@@ -156,9 +156,12 @@
   .widget-action {
     border-bottom: none;
   }
-  .popover-content {
+  .settings-popover {
     width: 800px;
   }
+  .shared-settings-popover {
+    width: 600px;
+  }
   .row {
     margin-bottom: 1em;
     &:last-child {

python/nav/web/templates/webfront/_dashboard_settings_form.html

@@ -7,7 +7,8 @@
     >
         <i class="fa fa-gear fa-lg"></i>
     </div>
-    <div class="popover-content large">
+    <div class="popover-content large {% if can_edit %}settings-popover{% else %}shared-settings-popover{% endif %}">
+        {% if can_edit %}
         <form id="form-rename-dashboard"
               method="post"
               data-dashboard="{{ dashboard.pk }}"
@@ -17,10 +18,13 @@
                    value="{{ dashboard.name }}">
             <input type="submit" class="small button" value="Rename dashboard">
         </form>
+        {% else %}
+        <p aria-label="Dashboard name">{{ dashboard.name }}</p>
+        {% endif %}
 
         <div class="row">
 
-            <div class="column medium-4">
+            <div class="column medium-6">
                 <div id="default-dashboard-container"
                      data-is-default-dashboard="{{ dashboard.is_default|yesno:'1,0' }}">
                     <div class="alert-box">This is the default dashboard</div>
@@ -32,8 +36,7 @@
                     </form>
                 </div>
             </div>
-
-            <div class="column medium-4">
+            <div class="column medium-6">
                 <a href="{% url 'export-dashboard' dashboard.pk %}" class="small button expand">Export dashboard
                 </a><br/>
                 <div class="nav-tooltip">
@@ -44,7 +47,8 @@
                 </div>
             </div>
 
-            <div class="column medium-4">
+            {% if can_edit %}
+            <div class="column medium-6">
                 {% if request.account.account_dashboards.count > 1 and not dashboard.is_default %}
                 <form id="form-delete-dashboard" method="post" action="{% url 'delete-dashboard' dashboard.pk %}">
                     {% csrf_token %}
@@ -53,8 +57,9 @@
                 {% endif %}
 
             </div>
-
+            {% endif %}
         </div>
+        {% if can_edit %}
         <div class="row">
             <div class="column medium-4">
                 <h5>Columns</h5>
@@ -72,6 +77,7 @@ <h5>Sharing</h5>
             </div>
             <div class="column medium-4"></div>
         </div>
+        {% endif %}
         <div id="dashboard-settings-feedback">
         </div>
     </div>

python/nav/web/templates/webfront/index.html

@@ -64,24 +64,7 @@
            title="Use compact layout for dashboard">
         <i class="fa fa-compress"></i>
       </div>
-
-      {% if can_edit %}
-          {% include 'webfront/_dashboard_settings_form.html' %}
-      {% else %}
-        <div class="nav-tooltip export-action">
-            <a
-                class="widget-action"
-                href="{% url 'export-dashboard' dashboard.pk %}"
-                aria-describedby="#export-action-tooltip"
-            >
-              <i class="fa fa-download" title="Export dashboard"></i>
-            </a>
-            <div id="export-action-tooltip" role="tooltip">
-                 Download this dashboard's definition into a file that can later be imported by pressing the + next to the tab list
-            </div>
-        </div>
-      {% endif %}
-
+      {% include 'webfront/_dashboard_settings_form.html' %}
     </div>
 
     {# Buttons for selecting dashboards #}