merge

CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.1.0](https://github.com/cloudogu/warp-menu/releases/tag/v1.1.0)
+### Fixed
+- generate valid html (#20)
+- fix displayed quotation marks
+- change css to target fixed html (#20)
+
+### Changed
+- enable opening the warp menu by keyboard (#22)
+- replace empty link to create valid HTML (#18)
+- refactor naming of variables to be more verbose (#18)
+
 ## [v1.0.4](https://github.com/cloudogu/warp-menu/releases/tag/v1.0.4)
 ### Fixed
 - escape special characters like 'ö', 'ä', 'ü' (#15)

README.md

@@ -26,15 +26,15 @@ EOF
 * release build with `gulp`
 
 ---
-### What is Cloudogu?
-Cloudogu is an open platform, which lets you choose how and where your team creates great software. Each service or tool is delivered as a [Dōgu](https://translate.google.com/?text=D%26%23x014d%3Bgu#ja/en/%E9%81%93%E5%85%B7), a Docker container, that can be easily integrated in your environment just by pulling it from our registry. We have a growing number of ready-to-use Dōgus, e.g. SCM-Manager, Jenkins, Nexus, SonarQube, Redmine and many more. Every Dōgu can be tailored to your specific needs. You can even bring along your own Dōgus! Take advantage of a central authentication service, a dynamic navigation, that lets you easily switch between the web UIs and a smart configuration magic, which automatically detects and responds to dependencies between Dōgus. Cloudogu is open source and it runs either on-premise or in the cloud. Cloudogu is developed by Cloudogu GmbH under [MIT License](https://cloudogu.com/license.html) and it runs either on-premise or in the cloud.
+### What is the Cloudogu EcoSystem?
+The Cloudogu EcoSystem is an open platform, which lets you choose how and where your team creates great software. Each service or tool is delivered as a Dogu, a Docker container. Each Dogu can easily be integrated in your environment just by pulling it from our registry. We have a growing number of ready-to-use Dogus, e.g. SCM-Manager, Jenkins, Nexus, SonarQube, Redmine and many more. Every Dogu can be tailored to your specific needs. Take advantage of a central authentication service, a dynamic navigation, that lets you easily switch between the web UIs and a smart configuration magic, which automatically detects and responds to dependencies between Dogus. The Cloudogu EcoSystem is open source and it runs either on-premises or in the cloud. The Cloudogu EcoSystem is developed by Cloudogu GmbH under [MIT License](https://cloudogu.com/license.html).
 
 ### How to get in touch?
 Want to talk to the Cloudogu team? Need help or support? There are several ways to get in touch with us:
 
 * [Website](https://cloudogu.com)
-* [Mailing list](https://groups.google.com/forum/#!forum/cloudogu)
+* [myCloudogu-Forum](https://forum.cloudogu.com/topic/34?ctx=1)
 * [Email [email protected]](mailto:[email protected])
 
 ---
-© 2016 Cloudogu GmbH - MADE WITH :heart: FOR DEV ADDICTS. [Legal notice / Impressum](https://cloudogu.com/imprint.html)
+© 2020 Cloudogu GmbH - MADE WITH :heart: FOR DEV ADDICTS. [Legal notice / Impressum](https://cloudogu.com/imprint.html)

docs/warp-menu_de.md

@@ -0,0 +1,49 @@
+# Warp Menü
+Das Warp Menü hilft Ihnen bei der Navigation durch das Cloudogu EcoSystem. Über das Warp Menü können Sie alle  Dogus erreichen und schnell zwischen diesen wechseln.
+
+Das Warp Menü können Sie in jedem Dogu über die Schaltfläche "Menü" am rechten Bildschirmrand öffnen.
+
+Sollten Sie zum ersten Mal das EcoSystem aufrufen, sehen Sie am rechten Bildschirmrand einen Tooltip, welcher auf das Warp Menü hinweist.
+Durch einen Klick darauf kann dieser dauerhaft ausgeblendet werden.
+
+![Warp Menü Platzierung](figures/warp-menu/WarpMenuFirstView.png)
+
+Wenn sie auf die Schaltfläche "Menü" klicken, wird Ihnen das Warp Menü mit allen installierten Dogus und weiteren konfigurierten
+Links angezeigt. Ein Klick auf den jeweiligen Link leitet Sie auf die entsprechende Anwendung weiter.
+
+Das Warp Menü ist in folgende Bereiche unterteilt:
+
+* Entwicklung
+* Administration
+* Dokumentation
+* Information
+
+Im Bereich Entwicklung befinden sich die Dogus Jenkins, Redmine, SCM-Manager, SonarQube und Sonatype Nexus und Swagger UI. Unter Administration sind die Dogus Cockpit und User Management zu finden. Das Dogu Smeagol befindet sich im Bereich Dokumentation. Unter Information ist die Seite "Über Cloudogu" verlinkt. In diesem Bereich können sich auch weitere Links befinden. Unter anderem ist dort das Benutzerhandbuch zum Cloudogu EcoSystem verlinkt.
+
+![Warp Menü Tools](figures/warp-menu/WarpMenuFocus.png)
+
+
+## Desktopansicht und mobile Ansicht
+
+### Desktopansicht
+
+In der Desktopansicht, also mit einem entsprechend großen Bildschirm, wird Ihnen das Warp Menü am rechten Bildschirmrand angezeigt.
+
+### Mobile Ansicht
+
+In der mobilen Ansicht, also mit entsprechend kleinem Bildschirm, wird Ihnen das Warp Menü am unteren Bildschirmrand angezeigt.
+Abhängig von der Breite Ihres Bildschirmes, wird es entweder in zwei, drei und vier Spalten dargestellt.
+
+
+Mobile Ansicht auf sehr kleinen Geräten, z.B einem Smartphone.
+
+![Warp Menü zwei Spalten: mobil](figures/warp-menu/WarpMenuTwoColumns.png)
+
+
+Mobile Ansicht auf kleinen Geräten, z.B Smartphone im Querformat oder Tablet.
+
+![Warp Menü drei Spalten: mobil](figures/warp-menu/WarpMenuThreeColumns.png)
+
+Mobile Ansicht auf großen mobilen Geräten, z.B Handy im Querformat oder Tablet.
+
+![Warp Menü vier Spalten: mobil](figures/warp-menu/WarpMenuFourColumns.png)

docs/warp-menu_en.md

@@ -0,0 +1,52 @@
+# Warp Menu
+
+Translated with www.DeepL.com/Translator
+
+The Warp Menu helps you navigate through the Cloudogu EcoSystem. The Warp Menu allows you to access all dogus and quickly switch between them.
+
+You can open the Warp Menu in any dogu by clicking the "Menu" button on the right side of the screen.
+
+If you are entering the EcoSystem for the first time, you will see a tooltip on the right side of the screen that points to the Warp Menu.
+By clicking on it, you can hide it permanently.
+
+![Warp Menu Placement](figures/warp-menu/WarpMenuFirstView.png)
+
+If you click on the "Menu" button, you will see the Warp menu with all installed Dogus and other configured
+links are displayed. Clicking on the respective link will redirect you to the corresponding application.
+
+The Warp Menu is divided into the following sections:
+
+* Development
+* Administration
+* Documentation
+* Information
+
+In the development section you can find the Dogus Jenkins, Redmine, SCM-Manager, SonarQube and Sonatype Nexus and Swagger UI. Under Administration you can find the Dogus Cockpit and User Management. The Dogu Smeagol is located in the Documentation section. Under Information, the About Cloudogu page is linked. In this section you can also find other links. Among others, the user manual for the Cloudogu EcoSystem is linked there.
+
+![Warp Menu Tools](figures/warp-menu/WarpMenuFocus.png)
+
+
+## Desktop view and mobile view
+
+### Desktop view
+
+In desktop view, i.e. with an appropriately large screen, the Warp Menu is displayed on the right side of the screen.
+
+### Mobile view
+
+In mobile view, i.e. with an appropriately small screen, the Warp menu will be displayed at the bottom of your screen.
+Depending on the width of your screen, it will be displayed either in two, three and four columns.
+
+
+Mobile view on very small devices, e.g. a smartphone.
+
+![Warp Menu two columns: mobile](images/warp-menu/WarpMenuTwoColumns.png)
+
+
+Mobile view on small devices, e.g. smartphone in landscape mode or tablet.
+
+![Warp menu three columns: mobile](images/warp-menu/WarpMenuThreeColumns.png)
+
+Mobile view on large mobile devices, e.g. cell phone in landscape mode or tablet.
+
+![Warp menu four columns: mobile](figures/warp-menu/WarpMenuFourColumns.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "warp-menu",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudogu/warp-menu"

src/warp.js

@@ -75,7 +75,7 @@ function getTranslations(language) {
             "aboutCloudoguToken": "Über Cloudogu",
             "menuToken": "Menü",
             "ecosystemLogoutToken": "EcoSystem Logout",
-            "onboardingTextToken": "Klicken Sie auf 'Menü', um ihre Tools zu sehen. Das Menü verbindet ihre Toolchain und ist von jedem Tool aus zugänglich.",
+            "onboardingTextToken": "Klicken Sie auf „Menü“, um ihre Tools zu sehen. Das Menü verbindet ihre Toolchain und ist von jedem Tool aus zugänglich.",
             "onboardingHintToken": "Hinweis nicht mehr anzeigen",
             "Development Apps": "Entwicklung",
             "Administration Apps": "Administration",
@@ -86,7 +86,7 @@ function getTranslations(language) {
             "aboutCloudoguToken": "About Cloudogu",
             "menuToken": "Menu",
             "ecosystemLogoutToken": "EcoSystem Logout",
-            "onboardingTextToken": "Click 'Menu' to view all tools. That menu connects your toolchain and is available from any tool.",
+            "onboardingTextToken": "Click “Menu” to view all tools. That menu connects your toolchain and is available from any tool.",
             "onboardingHintToken": "Do not show this hint again",
             "Development Apps": "Development Apps",
             "Administration Apps": "Administration Apps",
@@ -142,8 +142,9 @@ function createToggleButton() {
     var toggleColumn = document.createElement('div');
     addClass(toggleColumn, 'warp-menu-column-toggle');
 
-    var toggle = document.createElement('a');
+    var toggle = document.createElement('button');
     addClass(toggle, 'warpbtn');
+    toggle.setAttribute('aria-haspopup','listbox');
     toggle.id = 'warp-menu-warpbtn';
     toggle.innerHTML = getLocalizedString("menuToken");
     toggleColumn.appendChild(toggle);
@@ -158,7 +159,7 @@ function createTooltip() {
     var tooltipColumn = document.createElement('div');
     addClass(tooltipColumn, 'warp-menu-column-tooltip');
 
-    var tooltipLabel = document.createElement('label');
+    var tooltipLabel = document.createElement('div');
     addClass(tooltipLabel, 'warp-onboarding');
     tooltipColumn.appendChild(tooltipLabel);
 
@@ -170,7 +171,7 @@ function createTooltip() {
     addClass(hint, 'warp-onboarding-hint');
     var checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
-    var hintText = document.createElement('section');
+    var hintText = document.createElement('span');
     hintText.innerHTML = getLocalizedString("onboardingHintToken");
 
     hint.appendChild(hintText);
@@ -340,6 +341,7 @@ function initWarpMenu(categories) {
     var menuContainer = createMenu(categories);
 
     function toggleNav() {
+        var warpButton = document.getElementById("warp-menu-warpbtn");
         if (hasClass(warpMenuContainer, 'collapsing')) {
             return;
         }
@@ -359,6 +361,12 @@ function initWarpMenu(categories) {
         setTimeout(function () {
             addClass(warpMenuContainer, 'notransition')
         }, 600);
+        if (warpButton.hasAttribute('aria-expanded')){
+            warpButton.removeAttribute('aria-expanded');
+        }
+        else {
+            warpButton.setAttribute('aria-expanded', 'true');
+        }
     }
 
     toggleResult.toggle.onclick = toggleNav;

src/warp.scss

@@ -215,7 +215,7 @@ $desktop-view-column-width: 245px;
     pointer-events: none;
     transition: visibility 0.5s, opacity 0.5s linear;
 
-    label.warp-onboarding {
+    div.warp-onboarding {
       flex-basis: auto;
       position: relative;
       margin-right: 1.5em;
@@ -288,13 +288,16 @@ $desktop-view-column-width: 245px;
     pointer-events: none;
     user-select: all;
 
-    a.warpbtn {
+    button.warpbtn {
       pointer-events: all;
       position: relative;
       display: inline-block;
       background-color: $brand-primary-darker;
       cursor: pointer;
     }
+    button.warpbtn:focus, button.warpbtn:hover {
+      background-color: $gradient-darker-darker;
+    }
   }
 
   /*******************************************************************************************/
@@ -481,17 +484,16 @@ $desktop-view-column-width: 245px;
     .warp-menu-column-toggle {
       min-width: 2.13461em;
 
-      a.warpbtn {
+      button.warpbtn {
         top: calc(50vh - 2em);
-        border-bottom-right-radius: 5px;
+        border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        writing-mode: vertical-rl;
         text-align: center;
-        transform: rotate(180deg);
-        border-left: 1px solid $brand-primary !important;
-        height: 4em;
+        transform: rotate(-90deg);
+        border-bottom: 1px solid $brand-primary !important;
+        width: 4em;
         font-size: 16px;
-        right: 0;
+        right: calc(-1em - 1px);
         padding: 0.25em 0.125em;
         -webkit-box-shadow: 2px 0 15px -5px black;
         -moz-box-shadow: 2px 0 15px -5px black;
@@ -599,7 +601,7 @@ $desktop-view-column-width: 245px;
       position: relative;
       font-size: 1.3em;
 
-      a.warpbtn {
+      button.warpbtn {
         display: inline-block;
         border-top-left-radius: 5px;
         position: relative;