Merge branch '5-about-dialog' into 'master'

Resolve "about dialog"

Closes #5

See merge request troebs/pycs!20

webui/src/App.vue

@@ -27,6 +27,7 @@
                                    :current-project-path="currentProjectPath"
                                    :status="status"
                                    :socket="socket"/>
+          <about-window v-if="window.content === 'about'"/>
         </template>
       </div>
     </div>
@@ -39,10 +40,12 @@ import ProjectOpenWindow from "@/components/projects/project-open-window";
 import TopNavigationBar from "@/components/window/top-navigation-bar";
 import SideNavigationBar from "@/components/window/side-navigation-bar";
 import ProjectSettingsWindow from "@/components/projects/project-settings-window";
+import AboutWindow from "@/components/other/about-window";
 
 export default {
   name: 'App',
   components: {
+    AboutWindow,
     ProjectSettingsWindow,
     SideNavigationBar,
     TopNavigationBar,

webui/src/assets/icons/info.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path fill-rule="evenodd"
+          d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path>
+</svg>

webui/src/components/other/about-window.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="about-window">
+    <img src="/logo.png"> <br>
+    &copy; 2017 <br>
+    Clemens-Alexander Brust, Eric Tröbs <br>
+    Computer Vision Group <br>
+    Friedrich-Schiller-Universität Jena
+  </div>
+</template>
+
+<script>
+export default {
+  name: "about-window"
+}
+</script>
+
+<style scoped>
+.about-window {
+  padding: 1rem;
+}
+
+img {
+  max-width: 100%;
+  margin-bottom: 1rem;
+}
+</style>

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

@@ -22,6 +22,13 @@
         <span>Close</span>
       </div>
 
+      <div class="item"
+           :class="{active: window.content === 'about', inactive: !projectPath}"
+           @click="ifProjectIsOpened(show, 'about')">
+        <img src="@/assets/icons/info.svg">
+        <span>About PyCS</span>
+      </div>
+
       <div v-if="window.wide"
            class="item"
            :class="{rotate: !collapsed}"
@@ -137,6 +144,10 @@ export default {
   transform: rotate(180deg);
 }
 
+.item.inactive img {
+  opacity: 0.5;
+ }
+
 .item span {
   margin: 1rem 4rem 1rem 0.75rem
 }