From 72390d61768ffb8553d6a3bdda6aa4291c190a7b Mon Sep 17 00:00:00 2001
From: reglim <mauro.regli@roche.com>
Date: Tue, 4 Oct 2022 07:25:53 +0200
Subject: [PATCH 1/2] Feat: Add hideui queryparameter to hide controls

The default value is false, and not shown in the url.

fixes: #123
---
 web/src/pages/Docs.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Docs.vue b/web/src/pages/Docs.vue
index dbf0f6d1a..f35e4babf 100644
--- a/web/src/pages/Docs.vue
+++ b/web/src/pages/Docs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <iframe id="docs" :src="docURL" @load="onChange()"></iframe>
-    <div class="controls">
+    <div class="controls" v-if="showControls">
       <md-button to="/" class="home-button md-fab md-primary">
         <md-icon>home</md-icon>
         <md-tooltip md-direction="left">docs overview</md-tooltip>
@@ -37,7 +37,8 @@ export default {
       selectedVersion: this.$route.params.version,
       dropdownVersion: null,
       versions: [],
-      docURL: undefined
+      docURL: undefined,
+      showControls: String(this.$route.query.hideui).toLocaleLowerCase() !== 'true',
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -127,8 +128,10 @@ export default {
           docPath
         )
       }
+      const hideUiParam = this.showControls ? '' : '?hideui=true';
+
       this.$router.replace(
-        `/${this.$route.params.project}/${this.selectedVersion}/${docPath || ''}`
+        `/${this.$route.params.project}/${this.selectedVersion}/${docPath || ''}${hideUiParam}`
       ).catch(() => {})  // NavigationDuplicate
     }
   }

From a367130b7633ea874b098bfc273eadae712f4bd9 Mon Sep 17 00:00:00 2001
From: reglim <mauro.regli@roche.com>
Date: Wed, 5 Oct 2022 09:48:47 +0200
Subject: [PATCH 2/2] Feat(web): Add Button to hide controls on docs page

Now you don't have to set the query parameter manually, and just copy
the link after clicking

fixes: #123
---
 web/src/pages/Docs.vue | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/Docs.vue b/web/src/pages/Docs.vue
index f35e4babf..24e28596b 100644
--- a/web/src/pages/Docs.vue
+++ b/web/src/pages/Docs.vue
@@ -23,6 +23,11 @@
           </md-option>
         </md-select>
       </md-field>
+
+      <md-button class="hide-controls-button md-fab md-secondary" @click="onHideControlsClick()">
+        <md-icon>visibility_off</md-icon>
+        <md-tooltip md-direction="bottom">Hide Controls</md-tooltip>
+      </md-button>
     </div>
   </div>
 </template>
@@ -133,6 +138,10 @@ export default {
       this.$router.replace(
         `/${this.$route.params.project}/${this.selectedVersion}/${docPath || ''}${hideUiParam}`
       ).catch(() => {})  // NavigationDuplicate
+    },
+    onHideControlsClick(){
+      this.showControls = false;
+      this.load()
     }
   }
 }
@@ -154,14 +163,10 @@ body,
 
 .version-select {
   width: 200px;
-  float: right;
   background: white;
-  border-radius: 7px;
+  border-radius: 0px;
   padding: 9px;
-  margin-bottom: 0px;
   border: 1px solid rgba(0, 0, 0, 0.42);
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
 }
 
 .md-field {
@@ -174,19 +179,31 @@ body,
   position: absolute;
   bottom: 32px;
   right: 50px;
+  display: flex;
 }
 
 .home-button {
   border-radius: 7px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
-  margin-right: -1px;
-  height: 52px;
+  margin-right: 0px;
+  height: 53px;
   margin-top: 4px;
   box-shadow: none;
   border: 1px solid rgba(0, 0, 0, 0.42);
 }
 
+.hide-controls-button {
+  border-radius: 7px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  height: 53px;
+  box-shadow: none;
+  margin-top: 4px;
+  margin-left: 0px;
+  border: 1px solid rgba(0, 0, 0, 0.42);
+}
+
 #docs,
 .container {
   width: 100%;