Merge branch '41-project-overview-as-separate-entry-in-side-navigation-bar' into 'master'

Resolve "project overview as separate entry in side-navigation-bar"

Closes #41

See merge request troebs/pycs!32

webui/src/App.vue

@@ -12,31 +12,30 @@
                            :socket="socket"
                            :status="status"
                            :current-project="currentProject"
-                           v-on:close="closeProject"></side-navigation-bar>
+                           v-on:close="window.menu = false"/>
 
       <!-- actual content -->
       <div class="content">
-        <project-open-window v-if="!currentProject"
+        <project-open-window v-if="window.content === 'projects'"
                              :projects="projects"
                              :status="status"
                              :socket="socket"
                              :window="window"
                              v-on:open="openProject"/>
 
-        <template v-else>
-          <project-settings-window v-if="window.content === 'settings'"
-                                   :current-project="currentProject"
-                                   :status="status"
-                                   :socket="socket"
-                                   v-on:close="closeProject"/>
+        <project-settings-window v-if="window.content === 'settings'"
+                                 :current-project="currentProject"
+                                 :status="status"
+                                 :socket="socket"
+                                 v-on:close="closeProject"/>
 
-          <project-data-window v-if="window.content === 'add_data'"
-                               :current-project="currentProject"
-                               :status="status"
-                               :socket="socket"/>
+        <project-data-window v-if="window.content === 'add_data'"
+                             :current-project="currentProject"
+                             :status="status"
+                             :socket="socket"/>
 
-          <about-window v-if="window.content === 'about'"/>
-        </template>
+        <about-window v-if="window.content === 'about'"/>
+        <!-- </template> -->
       </div>
     </div>
   </div>
@@ -88,7 +87,7 @@ export default {
       window: {
         wide: true,
         menu: false,
-        content: 'settings',
+        content: 'projects',
         project: null
       }
     }
@@ -116,10 +115,6 @@ export default {
       this.window.project = project.id;
       this.show('settings');
     },
-    closeProject: function() {
-      this.window.project = false;
-      this.window.menu = false;
-    }
   },
   created: function() {
     this.socket.io.on('app_status', status => {

webui/src/assets/icons/rocket.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill-rule="evenodd"
+        d="M20.322.75a10.75 10.75 0 00-7.373 2.926l-1.304 1.23A23.743 23.743 0 0010.103 6.5H5.066a1.75 1.75 0 00-1.5.85l-2.71 4.514a.75.75 0 00.49 1.12l4.571.963c.039.049.082.096.129.14L8.04 15.96l1.872 1.994c.044.047.091.09.14.129l.963 4.572a.75.75 0 001.12.488l4.514-2.709a1.75 1.75 0 00.85-1.5v-5.038a23.741 23.741 0 001.596-1.542l1.228-1.304a10.75 10.75 0 002.925-7.374V2.499A1.75 1.75 0 0021.498.75h-1.177zM16 15.112c-.333.248-.672.487-1.018.718l-3.393 2.262.678 3.223 3.612-2.167a.25.25 0 00.121-.214v-3.822zm-10.092-2.7L8.17 9.017c.23-.346.47-.685.717-1.017H5.066a.25.25 0 00-.214.121l-2.167 3.612 3.223.679zm8.07-7.644a9.25 9.25 0 016.344-2.518h1.177a.25.25 0 01.25.25v1.176a9.25 9.25 0 01-2.517 6.346l-1.228 1.303a22.248 22.248 0 01-3.854 3.257l-3.288 2.192-1.743-1.858a.764.764 0 00-.034-.034l-1.859-1.744 2.193-3.29a22.248 22.248 0 013.255-3.851l1.304-1.23zM17.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm-11 13c.9-.9.9-2.6 0-3.5-.9-.9-2.6-.9-3.5 0-1.209 1.209-1.445 3.901-1.49 4.743a.232.232 0 00.247.247c.842-.045 3.534-.281 4.743-1.49z"></path>
+</svg>

webui/src/assets/icons/sign-in.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
-    <path fill-rule="evenodd"
-          d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm6.56 4.5l1.97-1.97a.75.75 0 10-1.06-1.06L6.22 7.47a.75.75 0 000 1.06l3.25 3.25a.75.75 0 101.06-1.06L8.56 8.75h5.69a.75.75 0 000-1.5H8.56z"></path>
-</svg>

webui/src/components/window/side-navigation-bar.vue

@@ -7,12 +7,18 @@
          collapsed: collapsed
        }">
     <div class="items">
-      <!-- project settings -->
+      <div class="item"
+           :class="{active: window.content === 'projects'}"
+           @click="show('projects')">
+        <img src="@/assets/icons/rocket.svg">
+        <span>Projects</span>
+      </div>
+
       <div class="item"
            :class="{active: window.content === 'settings', inactive: !currentProject}"
            @click="ifProjectIsOpened(show, 'settings')">
         <img src="@/assets/icons/gear.svg">
-        <span>Project Settings</span>
+        <span>Settings</span>
       </div>
 
       <div class="item"
@@ -23,15 +29,8 @@
       </div>
 
       <div class="item"
-           :class="{inactive: !currentProject}"
-           @click="close">
-        <img src="@/assets/icons/sign-in.svg">
-        <span>Close</span>
-      </div>
-
-      <div class="item"
-           :class="{active: window.content === 'about', inactive: !currentProject}"
-           @click="ifProjectIsOpened(show, 'about')">
+           :class="{active: window.content === 'about'}"
+           @click="show('about')">
         <img src="@/assets/icons/info.svg">
         <span>About PyCS</span>
       </div>
@@ -55,7 +54,7 @@
     <!-- clickable overlay -->
     <div class="overlay"
          v-if="!window.wide"
-         @click="$emit('close', null);"/>
+         @click="closeSelf"/>
   </div>
 </template>
 
@@ -72,17 +71,16 @@ export default {
     }
   },
   methods: {
+    closeSelf: function() {
+      this.$emit('close', null);
+    },
     ifProjectIsOpened: function(fun, ...args) {
       if (this.currentProject)
         fun.bind(fun)(...args);
     },
     show: function(value) {
       this.window.content = value;
-    },
-    close: function() {
-      if (this.currentProject) {
-        this.$emit('close', null);
-      }
+      this.closeSelf();
     },
     collapse: function() {
       this.socket.post('/settings', {