support for desktop versions #20

src/presentation/TheFooter/DownloadUrlList.vue

@@ -0,0 +1,51 @@
+<template>
+  <span v-bind:class="{ 'unsupported': !hasCurrentOsDesktopVersion, 'supported': hasCurrentOsDesktopVersion }">
+    For desktop:
+    <span class="urls">
+      <span class="urls__url" v-for="os of supportedDesktops" v-bind:key="os">
+        <DownloadUrlListItem :operatingSystem="os" />
+      </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Environment } from '@/application/Environment/Environment';
+import { OperatingSystem } from '@/application/Environment/OperatingSystem';
+import DownloadUrlListItem from './DownloadUrlListItem.vue';
+
+@Component({
+  components: { DownloadUrlListItem },
+})
+export default class DownloadUrlList extends Vue {
+  public readonly supportedDesktops: ReadonlyArray<OperatingSystem>;
+  public readonly hasCurrentOsDesktopVersion: boolean = false;
+
+  constructor() {
+    super();
+    const supportedOperativeSystems = [OperatingSystem.Windows, OperatingSystem.Linux, OperatingSystem.macOS];
+    const currentOs = Environment.CurrentEnvironment.os;
+    this.supportedDesktops = supportedOperativeSystems.sort((os) => os === currentOs ? 0 : 1);
+    this.hasCurrentOsDesktopVersion = supportedOperativeSystems.includes(currentOs);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.unsupported {
+  font-size: 0.85em;
+}
+.supported {
+  font-size: 1em;
+}
+.urls {
+  &__url {
+    &:not(:first-child)::before {
+      content: "|";
+      font-size: 0.6rem;
+      padding: 0 5px;
+    }
+  }
+}
+</style>

src/presentation/TheFooter/DownloadUrlListItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <span class="url">
+    <a :href="downloadUrl"
+        v-bind:class="{
+            'url__active': hasCurrentOsDesktopVersion && isCurrentOs,
+            'url__inactive': hasCurrentOsDesktopVersion && !isCurrentOs,
+            }">{{ operatingSystemName }}</a>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import { Environment } from '@/application/Environment/Environment';
+import { OperatingSystem } from '@/application/Environment/OperatingSystem';
+
+@Component
+export default class DownloadUrlListItem extends StatefulVue {
+  @Prop() public operatingSystem!: OperatingSystem;
+  public OperatingSystem = OperatingSystem;
+
+  public downloadUrl: string = '';
+  public operatingSystemName: string = '';
+  public isCurrentOs: boolean = false;
+  public hasCurrentOsDesktopVersion: boolean = false;
+
+  public async mounted() {
+      await this.onOperatingSystemChangedAsync(this.operatingSystem);
+  }
+
+  @Watch('operatingSystem')
+  public async onOperatingSystemChangedAsync(os: OperatingSystem) {
+    const currentOs = Environment.CurrentEnvironment.os;
+    this.isCurrentOs = os === currentOs;
+    this.downloadUrl = await this.getDownloadUrlAsync(os);
+    this.operatingSystemName = getOperatingSystemName(os);
+    this.hasCurrentOsDesktopVersion = hasDesktopVersion(currentOs);
+  }
+
+  private async getDownloadUrlAsync(os: OperatingSystem): Promise<string> {
+    const state = await this.getCurrentStateAsync();
+    return `${state.app.repositoryUrl}/releases/download/${state.app.version}/${getFileName(os, state.app.version)}`;
+  }
+}
+
+function hasDesktopVersion(os: OperatingSystem): boolean {
+    return os === OperatingSystem.Windows
+        || os === OperatingSystem.Linux
+        || os === OperatingSystem.macOS;
+}
+
+function getOperatingSystemName(os: OperatingSystem): string {
+    switch (os) {
+        case OperatingSystem.Linux:
+            return 'Linux';
+        case OperatingSystem.macOS:
+            return 'macOS';
+        case OperatingSystem.Windows:
+            return 'Windows';
+        default:
+            throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
+    }
+}
+
+function getFileName(os: OperatingSystem, version: string): string {
+    switch (os) {
+        case OperatingSystem.Linux:
+            return `privacy.sexy-${version}.dmg`;
+        case OperatingSystem.macOS:
+            return `privacy.sexy-${version}-mac.zip`;
+        case OperatingSystem.Windows:
+            return `privacy.sexy-Setup-${version}.exe`;
+        default:
+            throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.url {
+    &__active {
+        font-size: 1em;
+    }
+    &__inactive {
+        font-size: 0.70em;
+    }
+    a {
+        color:inherit;
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+}
+</style>

src/presentation/TheFooter/PrivacyPolicy.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="privacy-policy">
+      <div v-if="!isDesktop" class="line">
+          <div class="line__emoji">🚫🍪</div>
+          <div>No cookies!</div>
+      </div>
+      <div v-if="isDesktop" class="line">
+          <div class="line__emoji">🚫🌐</div>
+          <div>Everything is offline, except single request GitHub toto check for updates on application start.</div>
+      </div>
+      <div class="line">
+          <div class="line__emoji">🚫👀</div>
+          <div>No user behavior / IP adress collection!</div>
+      </div>
+      <div class="line">
+          <div class="line__emoji">🤖</div>
+          <div>All transparent: Deployed automatically from master branch
+          of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
+      </div>
+      <div v-if="!isDesktop" class="line">
+          <div class="line__emoji">📈</div>
+          <div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
+          are collected by AWS but they cannot be related to you or your behavior. You can download the offline version if you don't want CDN data collection.</div>
+      </div>
+      <div class="line">
+          <div class="line__emoji">🎉</div>
+          <div>As almost no data is colected, the application gets better only with your active feedback.
+          Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
+      </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import { Environment } from '@/application/Environment/Environment';
+
+@Component
+export default class TheFooter extends StatefulVue {
+  public repositoryUrl: string = '';
+  public feedbackUrl: string = '';
+  public isDesktop: boolean = false;
+
+  constructor() {
+    super();
+    this.isDesktop = Environment.CurrentEnvironment.isDesktop;
+  }
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.repositoryUrl = state.app.repositoryUrl;
+    this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/fonts.scss";
+.privacy-policy {
+    display: flex;
+    flex-direction: column;
+    font-family: $normal-font;
+    text-align:center;
+
+    .line {
+        display: flex;
+        flex-direction: column;
+
+        &:not(:first-child) {
+          margin-top:0.2rem;
+        }
+    }
+
+    a {
+      color:inherit;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+}
+</style>

src/presentation/TheFooter/TheFooter.vue

@@ -1,14 +1,24 @@
 <template>
-  <div class="footer">
-    <div class="item">
-      <a :href="releaseUrl" target="_blank">{{ version }}</a>
+  <div>
+    <div class="footer">
+      <div class="footer__section">
+        <div class="item">
+          <a :href="releaseUrl" target="_blank">{{ version }}</a>
+        </div>
+        <div class="item">
+          <a @click="$modal.show(modalName)">Privacy</a>
+        </div>
+      </div>
+      <div class="footer__section">
+        <span v-if="isDesktop">
+          Online version at <a href="https://privacy.sexy" target="_blank">https://privacy.sexy</a>
+        </span>
+        <DownloadUrlList v-else />
       </div>
-    <div class="item">
-      <a @click="$modal.show(modalName)">Privacy</a> <!-- href to #privacy to avoid scrolling to top -->
     </div>
     <modal :name="modalName" height="auto" :scrollable="true" :adaptive="true">
       <div class="modal">
-        <ThePrivacyPolicy class="modal__content"/>
+        <PrivacyPolicy class="modal__content"/>
         <div class="modal__close-button">
           <font-awesome-icon :icon="['fas', 'times']"  @click="$modal.hide(modalName)"/>
         </div>
@@ -19,18 +29,28 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { StatefulVue } from './StatefulVue';
-import ThePrivacyPolicy from './ThePrivacyPolicy.vue';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import { Environment } from '@/application/Environment/Environment';
+import PrivacyPolicy from './PrivacyPolicy.vue';
+import DownloadUrlList from './DownloadUrlList.vue';
+import { OperatingSystem } from '@/application/Environment/OperatingSystem';
 
 @Component({
   components: {
-    ThePrivacyPolicy,
+    PrivacyPolicy, DownloadUrlList,
   },
 })
 export default class TheFooter extends StatefulVue {
-  private readonly modalName = 'privacy-policy';
-  private version: string = '';
-  private releaseUrl: string = '';
+  public readonly modalName = 'privacy-policy';
+  public readonly isDesktop: boolean;
+
+  public version: string = '';
+  public releaseUrl: string = '';
+
+  constructor() {
+    super();
+    this.isDesktop = Environment.CurrentEnvironment.isDesktop;
+  }
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
@@ -43,13 +63,26 @@ export default class TheFooter extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/fonts.scss";
+
+$medium-screen-width: 767px;
+
+
 .footer {
+  display: flex;
+  justify-content: space-between;
+  @media screen and (max-width: $medium-screen-width) {  
+    flex-direction: column;
+    align-items: center;
+  }
+  flex-wrap: wrap;
+  &__section {
     display: flex;
     color: $dark-gray;
     font-size: 1rem;
     font-family: $normal-font;
-    align-self: center;
-    
+    &:not(:first-child) {
+      padding-top: 3px;
+    }
     a {
       color:inherit;
       text-decoration: underline;
@@ -63,6 +96,7 @@ export default class TheFooter extends StatefulVue {
       content: "|";
       padding: 0 5px;
     }
+  }
 }
 .modal {
     margin-bottom: 10px;

src/presentation/ThePrivacyPolicy.vue

@@ -1,70 +0,0 @@
-<template>
-    <div class="privacy-policy">
-        <div class="line">
-            <div class="line__emoji">🚫🍪</div>
-            <div>No cookies!</div>
-        </div>
-        <div class="line">
-            <div class="line__emoji">🚫👀</div>
-            <div>No user behavior / IP adress collection!</div>
-        </div>
-        <div class="line">
-            <div class="line__emoji">🤖</div>
-            <div>Website is deployed automatically from master branch
-            of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
-        </div>
-        <div class="line">
-            <div class="line__emoji">📈</div>
-            <div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
-            are collected by AWS but they cannot be related to you or your behavior.</div>
-        </div>
-        <div class="line">
-            <div class="line__emoji">🎉</div>
-            <div>As almost no data is colected, the website gets better only with your active feedback.
-            Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
-
-@Component
-export default class TheFooter extends StatefulVue {
-  private repositoryUrl: string = '';
-  private feedbackUrl: string = '';
-
-  public async mounted() {
-    const state = await this.getCurrentStateAsync();
-    this.repositoryUrl = state.app.repositoryUrl;
-    this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
-  }
-}
-</script>
-
-<style scoped lang="scss">
-@import "@/presentation/styles/fonts.scss";
-.privacy-policy {
-    display: flex;
-    flex-direction: column;
-    font-family: $normal-font;
-    text-align:center;
-
-    .line {
-        display: flex;
-        flex-direction: column;
-
-        &:not(:first-child) {
-          margin-top:0.2rem;
-        }
-    }
-
-    a {
-      color:inherit;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-}
-</style>