Misc fixes for Tycho UI and ports from Wondergem to Tycho.

src/main/resources/default/assets/common/core.js

@@ -43,3 +43,31 @@ sirius.addEnterListener = function(_node, listener) {
         }
     });
 }
+
+sirius.getJSON = function(url, params) {
+    let formData = new FormData();
+    params.forEach(function(key, value) {
+        formData.append(key, value);
+    });
+
+    return fetch(url, {
+        method: "get",
+        body: formData
+    }).then(function (response) {
+        return response.json();
+    });
+}
+
+sirius.postJSON = function(url, params) {
+    let formData = new FormData();
+    Object.keys(params).forEach(function(key) {
+        formData.append(key, params[key]);
+    });
+
+    return fetch(url, {
+        method: "post",
+        body: formData
+    }).then(function (response) {
+        return response.json();
+    });
+}

src/main/resources/default/assets/tycho/scripts/clipboard.js

@@ -0,0 +1,16 @@
+function copyToClipboard(value) {
+    if (!navigator.clipboard) {
+        fallbackCopyToClipboard(value);
+    } else {
+        navigator.clipboard.writeText(value)
+    }
+}
+
+function fallbackCopyToClipboard(value) {
+    const fakeElem = document.createElement('textarea');
+    fakeElem.value = value;
+    document.body.appendChild(fakeElem);
+    fakeElem.select();
+    document.execCommand('copy');
+    document.body.removeChild(fakeElem);
+}

src/main/resources/default/assets/tycho/scripts/history.js

@@ -0,0 +1,88 @@
+/*
+ * Made with all the love in the world
+ * by scireum in Remshalden, Germany
+ *
+ * Copyright by scireum GmbH
+ * http://www.scireum.de - info@scireum.de
+ */
+
+function currentUri() {
+    return location.pathname + location.search;
+}
+
+function fetchTychoHistory() {
+    try {
+        let urls = JSON.parse(window.localStorage.getItem("tycho-history"));
+        if (urls == null || typeof urls !== "object") {
+            return [];
+        } else {
+            return urls;
+        }
+    } catch (e) {
+        console.log(e);
+        return [];
+    }
+}
+
+function storeTychoHistory(urls) {
+    try {
+        while(urls.length > 25) {
+            urls.shift()
+        }
+
+        window.localStorage.setItem("tycho-history", JSON.stringify(urls));
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+function appendHistoryUrl(url) {
+    // No explicit URL is given, use the current one...
+    if (url === '') {
+        url = currentUri();
+    }
+    let urls = fetchTychoHistory();
+    if (urls.length === 0 || urls[urls.length - 1] !== url) {
+        urls.push(url);
+        storeTychoHistory(urls);
+    }
+
+    // We just create a fake entry so that a popstate event is created if the back button is pressed...
+    window.history.pushState({}, document.title, window.location.href);
+}
+
+function hasHistoryUrls() {
+    let urls = fetchTychoHistory();
+    for (let i = urls.length - 1; i >= 0; i--) {
+        if (urls[i] !== currentUri()) {
+            return true;
+        }
+    }
+    return false;
+}
+
+window.addEventListener("popstate", function (e) {
+    let urls = fetchTychoHistory();
+    while (urls.length > 0) {
+        let url = urls.pop();
+        if (url !== currentUri()) {
+            window.location.href = url;
+            storeTychoHistory(urls);
+            return;
+        }
+    }
+    storeTychoHistory(urls);
+
+    // We couldn't go anywhere, use the real history...
+    window.history.back();
+});
+
+sirius.ready(function() {
+    if (hasHistoryUrls()) {
+        document.querySelectorAll('.back-button').forEach(function (_node) {
+            _node.style.display = 'inline-block';
+            _node.parentNode.classList.remove('d-none');
+        });
+    }
+
+})

src/main/resources/default/assets/tycho/scripts/messages.js

@@ -0,0 +1,29 @@
+function addTextMessage(color, message) {
+    let msg = document.createElement('div');
+    msg.innerHTML = '<div class="card full-border border-sirius-' + color + '-dark mb-4"><div class="card-body msgContent"></div></div>'
+    msg.querySelector('.msgContent').textContent = message;
+    document.querySelector('#message-box').appendChild(msg)
+}
+
+function addHtmlMessage(color, htmlMessage) {
+    let msg = document.createElement('div');
+    msg.innerHTML = '<div class="card full-border border-sirius-' + color + '-dark mb-4"><div class="card-body msgContent"></div></div>'
+    msg.querySelector('.msgContent').innerHTML = htmlMessage;
+    document.querySelector('#message-box').appendChild(msg)
+}
+
+function addErrorMessage(message) {
+    addTextMessage('red', message);
+}
+
+function addSuccessMessage(message) {
+    addTextMessage('green', message);
+}
+
+function addInfoMessage(message) {
+    addTextMessage('blue', message);
+}
+
+function clearMessages() {
+    document.querySelector('#message-box').innerHTML = '';
+}

src/main/resources/default/assets/tycho/scripts/tycho.js.pasta

@@ -3,3 +3,8 @@ ___include("/assets/tycho/scripts/sidebar.js")
 ___include("/assets/tycho/scripts/cycle.js")
 ___include("/assets/tycho/scripts/tooltips.js")
 ___include("/assets/tycho/scripts/focus.js")
+___include("/assets/tycho/scripts/history.js")
+___include("/assets/tycho/scripts/clipboard.js")
+___include("/assets/tycho/scripts/messages.js")
+
+<i:extensions target="tycho-script" point="tycho-script" />

src/main/resources/default/assets/tycho/styles/border.scss

@@ -0,0 +1,23 @@
+/*!
+ * Made with all the love in the world
+ * by scireum in Remshalden, Germany
+ *
+ * Copyright by scireum GmbH
+ * http://www.scireum.de - info@scireum.de
+ */
+
+.bl-gray {
+  border-left: 1px solid rgba(0,0,0, 0.25);
+}
+
+.br-gray {
+  border-right: 1px solid rgba(0,0,0, 0.25);
+}
+
+.bt-gray {
+  border-top: 1px solid rgba(0,0,0, 0.25);
+}
+
+.bb-gray {
+  border-bottom: 1px solid rgba(0,0,0, 0.25);
+}

src/main/resources/default/assets/tycho/styles/card.scss

@@ -15,6 +15,10 @@
   border-width: 0;
   border-radius: 0;
 
+  .card-img, .card-img-top {
+    border-radius: 0;
+  }
+
 }
 
 .card.card-border {

src/main/resources/default/assets/tycho/styles/page.scss

@@ -14,6 +14,10 @@ body {
   display: grid;
   height: 100vh;
   grid-template-rows: 80px 1fr 40px;
+
+  #wrapper-body {
+    min-width: 0;
+  }
 }
 
 

src/main/resources/default/assets/tycho/styles/tycho.scss

@@ -13,6 +13,7 @@
 @import "/assets/tycho/styles/buttons";
 @import "/assets/tycho/styles/sidebar";
 @import "/assets/tycho/styles/typeface";
+@import "/assets/tycho/styles/border";
 
 
 @import "/assets/tycho/styles/sirius-colors";

src/main/resources/default/assets/tycho/styles/typeface.scss

@@ -5,3 +5,7 @@
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
+
+.text-black-75 {
+  color: rgba(0,0,0,0.75) !important;
+}

src/main/resources/default/taglib/t/backbutton.html.pasta

@@ -0,0 +1,6 @@
+<i:pragma name="description" value="Renders a back button within a Tycho template. This is only shown, if a tycho history is present." />
+
+<a href="javascript:window.history.back()" class="btn btn-outline-secondary back-button">
+    <i class="fa fa-chevron-left"></i>
+    @i18n("NLS.back")
+</a>

src/main/resources/default/taglib/t/heading.html.pasta

@@ -0,0 +1,12 @@
+<i:arg type="String" name="titleKey" default=""/>
+<i:arg type="String" name="title" default="@i18n(titleKey)"/>
+<i:arg type="String" name="class" default="" />
+<i:local name="markupTitle" value="@renderToString('body')" />
+<i:if test="isFilled(title)">
+    <div class="bb-gray pb-2 mb-4 h5 text-black-75 @class">@title</div>
+    <i:else>
+        <i:if test="isFilled(markupTitle)">
+            <div class="bb-gray pb-2 mb-4 h5 text-black-75 @class"><i:raw>@markupTitle</i:raw></div>
+        </i:if>
+    </i:else>
+</i:if>

src/main/resources/default/taglib/t/page.html.pasta

@@ -3,6 +3,7 @@
 <i:arg type="boolean" name="ignoreDisasterMode" default="false"/>
 <i:arg type="boolean" name="noindex" default="false"
        description="if set to true, search engine bots are advised to not index this page"/>
+<i:arg type="String" name="historyUri" default="" description="Permits to specify a custom history URI for this page." />
 
 
 <i:pragma name="description" value="Provides the base layout for a Tycho page"/>
@@ -90,5 +91,10 @@
 
 <i:invoke template="/templates/tycho/page-dialogs.html.pasta"/>
 <i:extensions target="tycho-page" point="footer"/>
+<i:if test="historyUri != '-'">
+    <script type="text/javascript">
+        appendHistoryUrl('@historyUri');
+    </script>
+</i:if>
 </body>
 </html>

src/main/resources/default/templates/http/not-found.html.pasta

@@ -1,6 +1,6 @@
 <i:arg type="sirius.kernel.async.CallContext" name="ctx" />
 <i:arg type="String" name="message" />
-<t:page title="@i18n('BasicController.404')">
+<t:page title="@i18n('BasicController.404')" historyUri="-">
     <i:block name="breadcrumbBar" />
 
     <i:block name="page-header">
@@ -16,4 +16,8 @@
         </div>
     </div>
 
+    <div class="mt-4">
+        <t:backbutton />
+    </div>
+
 </t:page>

src/main/resources/default/templates/tycho/page-footer.html.pasta

@@ -3,12 +3,14 @@
         <div>
             <i:invoke template="/templates/tycho/page-footer-menu.html.pasta"  />
         </div>
-        <div class="text-right text-muted small">
+        <div class="text-right">
+            <i:extensions target="tycho-page-menu" point="footer-right-start"/>
             <span class="d-none d-md-inline-block">
-                <a class="cycle cursor-pointer" data-cycle="@CallContext.getCurrent().getWatch().elapsedMillis() ms (@const(sirius.kernel.info.Product.getProduct().getDetails()))">
+                <a class="text-muted small cycle cursor-pointer" data-cycle="@CallContext.getCurrent().getWatch().elapsedMillis() ms (@const(sirius.kernel.info.Product.getProduct().getDetails()))">
                     @CallContext.getNodeName()
                 </a>
             </span>
+            <i:extensions target="tycho-page-menu" point="footer-right-end"/>
         </div>
     </div>
 </div>