things: provide a simple way to follow links

Signed-off-by: Miquel Sabaté Solà <msabate@suse.com>

5 files changed, 72 insertions, 3 deletions

diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index 484265e..1facc96 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -49,3 +49,50 @@
     left: -5px;
     bottom: 4px
 }
+
+/*
+ * External link.
+ */
+
+.gg-external {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    transform: scale(var(--ggs,1));
+    width: 12px;
+    height: 12px;
+    box-shadow:
+        -2px 2px 0 0,
+        -4px -4px 0 -2px,
+        4px 4px 0 -2px;
+    margin-left: 6px;
+    margin-top: 1px
+}
+
+.gg-external::after,
+.gg-external::before {
+    content: "";
+    display: inline-block;
+    box-sizing: border-box;
+    position: absolute;
+    right: -4px
+}
+
+.gg-external::before {
+    background: currentColor;
+    transform: rotate(-45deg);
+    width: 12px;
+    height: 2px;
+    top: 1px
+}
+.gg-external::after {
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid;
+    border-top: 2px solid;
+    top: -4px
+}
+
+.gg-external:hover {
+    color: var(--text);
+}
diff --git a/app/javascript/controllers/thing_controller.js b/app/javascript/controllers/thing_controller.js
new file mode 100644
index 0000000..1518216
--- /dev/null
+++ b/app/javascript/controllers/thing_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Gathers all the methods that are relevant when manipulating things.
+export default class extends Controller {
+  // Update the external link depending on the changed value. The link will also
+  // be hidden/shown depending if the current URL is empty or not.
+  updateLink() {
+    let cur = document.getElementById("thing_url").value.trim();
+
+    if (cur === "") {
+      document.getElementById("thing-external-url-id").classList.add('hidden');
+    } else {
+      document.getElementById("thing-external-url-id").classList.remove('hidden');
+      document.getElementById("thing-external-url-id").href = cur;
+    }
+  }
+}
diff --git a/app/views/things/_form.html.erb b/app/views/things/_form.html.erb
index 62058a9..4aa3dc7 100644
--- a/app/views/things/_form.html.erb
+++ b/app/views/things/_form.html.erb
@@ -39,9 +39,12 @@
       <%= form.text_field :address, autocapitalize: 'on' %>
     </div>
 
-    <div>
-      <%= form.label :url %>
-      <%= form.text_field :url %>
+    <div data-controller="thing">
+      <%= form.label :url do %>
+        <%= I18n.t('activerecord.attributes.thing.url') %>
+        <a id="thing-external-url-id" href="<%= thing.url %>" target="_blank" title="<%= I18n.t('things.go-to') %>" class="<%= 'hidden' if thing.url.blank? %>"><i class="gg-external"></i></a>
+      <% end %>
+      <%= form.text_field :url, "data-action": "thing#updateLink" %>
     </div>
 
     <div>
diff --git a/config/locales/ca.yml b/config/locales/ca.yml
index 15a110d..5cc7f78 100644
--- a/config/locales/ca.yml
+++ b/config/locales/ca.yml
@@ -117,6 +117,7 @@ ca:
     object: font
     destroy-success: Font esborrada correctament
     none: Encara no hi ha cap font. Pots crear-ne una fent click
+    go-to: Segueix l'enllaç en una nova pestanya
 
     create-another: Afegeix-ne una altra
     create-success: Nova font creada correctament
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2209eee..c5a12c8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -117,6 +117,7 @@ en:
     object: source
     create-another: Create another one
     none: There are no sources yet. You can add a new one by clicking
+    go-to: Follow external link
 
     create-success: New source was successfully created
     update-success: Source was successfully updated