You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by aa...@apache.org on 2020/06/09 18:15:04 UTC

[airavata-mft-portal] 20/23: added grid view buttons

This is an automated email from the ASF dual-hosted git repository.

aarushi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-mft-portal.git

commit b89a6b6c7e54d09f007af3481b4e9bf75873ceac
Author: Aarushi Bisht <aa...@gmail.com>
AuthorDate: Sat Apr 25 23:20:32 2020 -0400

    added grid view buttons
---
 .../js/containers/Storage.vue                      | 35 ++++++++++++++++++----
 airavata_mft/apps/workspace/vue.config.js          |  4 +--
 airavata_mft/static/common/vue.config.js           |  2 +-
 airavata_mft/templates/base.html                   |  3 +-
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
index f893fb6..3c9215c 100644
--- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
+++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
@@ -1,10 +1,29 @@
 <template>
 
             <div class="row">
-                <div class="col-8">
+                <div class="col-7">
                     <h1 class="h4 mb-4">{{heading}}</h1>
                 </div>
-                <!-- Add buttons here -->
+                <div class="col-4">
+                    <div class="btn-toolbar">
+                        <div class="btn-group mr-4" role="group">
+                            <div class="dropdown">
+                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
+                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item" href="#">Name</a>
+                                    <a class="dropdown-item" href="#">Size</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="btn-group mr-4" role="group">
+                            <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
+                            <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
+                        </div>
+                        <div class="btn-group mr-4 new-unit" role="group">
+                            <button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
+                        </div>
+                    </div>
+                </div>
                 <!-- Dialog box to show description of each storage unit -->
                 <b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer>
                     <div class="container">
@@ -76,7 +95,13 @@ export default {
 </script>
 
 <style>
-.description{
-    width: 70%;
-}
+    .new-unit{
+        width: 140px;
+    }
+    .plus-icon{
+        padding-right: 15px;
+    }
+    .list{
+        width: 40px;
+    }
 </style>
\ No newline at end of file
diff --git a/airavata_mft/apps/workspace/vue.config.js b/airavata_mft/apps/workspace/vue.config.js
index c16bafc..eafceb7 100644
--- a/airavata_mft/apps/workspace/vue.config.js
+++ b/airavata_mft/apps/workspace/vue.config.js
@@ -4,7 +4,7 @@ const path = require("path");
 module.exports = {
   publicPath:
     process.env.NODE_ENV === "development"
-      ? "http://localhost:9000/static/airavata_mft_workspace/dist/"
+      ? "http://localhost:9001/static/airavata_mft_workspace/dist/"
       : "/static/airavata_mft_workspace/dist/",
   outputDir: "./static/airavata_mft_workspace/dist",
   productionSourceMap: false,
@@ -36,7 +36,7 @@ module.exports = {
       });
   },
   devServer: {
-    port: 9000,
+    port: 9001,
     headers: {
       "Access-Control-Allow-Origin": "*"
     },
diff --git a/airavata_mft/static/common/vue.config.js b/airavata_mft/static/common/vue.config.js
index 1792bd2..7cb5504 100644
--- a/airavata_mft/static/common/vue.config.js
+++ b/airavata_mft/static/common/vue.config.js
@@ -4,7 +4,7 @@ module.exports = {
   publicPath: "/static/common/dist/",
   productionSourceMap: false,
   pages: {
-    app: "./js/main.js",
+    app: "./js/main.js"
   },
   configureWebpack: {
     plugins: [
diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html
index 3c4921f..09b60fb 100644
--- a/airavata_mft/templates/base.html
+++ b/airavata_mft/templates/base.html
@@ -1,3 +1,4 @@
+{% load static %}
 {% load render_bundle from webpack_loader %}
 <!DOCTYPE html>
 <head>
@@ -15,7 +16,7 @@
                 <a class="navbar-brand" href="#">
                     <div class="row">
                         <div class="col-5">
-                            <img class="logo" src="/static/images/airavata-logo.png">
+                            <img class="logo" src="{% static 'images/airavata-logo.png' %}">
                         </div>
                         <div>
                             <div class="col-8">