trestle-mobility 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1d5aa705c867a39c105fcdc6e621d783f6485d40347ca6c62ebdbe5b9cd0fe7
-  data.tar.gz: 958dfef164ef8b039adaa59e347644f84bdb4c341db3b6aa41a5d98381612177
+  metadata.gz: 534bbecb7fccb11699d0fbfc244f64bbf0655cde3acc2374c3673d1aa4697082
+  data.tar.gz: 51120c779a740d504aa7e9e29d74c68a855323a8e7bff76845a393c39e2f7446
 SHA512:
-  metadata.gz: ad09d055e86c09e63e1b29a13e787757afd0247b99f2c5c74257c7823b5dbbbf5b2540fa3d5287011d04772c584c82d3dd7a940e0ba671273b934e2c60550e00
-  data.tar.gz: 40636a3d7d8763c587e04d852e83d0cb786bba4eb2757131efae349a9564d26f9446bd2d311d82636dadb67ce73b9af3e4a4a44e9c1afc2c2e9be9c0f953f258
+  metadata.gz: 80ca367f0af684735c30f2170f2008c5aaed9392a1f184b2d9c52b1894fe87c821269c01d90a0f7eb0ddc8ab7abc02e8276e7b115b3301d5fe88dac55a12d96b
+  data.tar.gz: 634582ad49e6fd9865bf0278a470b17c37ce5c0ea3cdfcad9663c85a820dfbf9a6281a23fa27040f2c364011154c5a61b71791c6efbb09a27bd34eb2363a5e94

data/CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.0] - 2019-11-08
+### Added
+- Support for Bootstrap 4 (that comes with Trestle 0.9.0)
+
 ## [1.2.0] - 2019-08-14
 ### Added
 - Start documenting changes

data/README.md

@@ -9,8 +9,6 @@
 - Manage Mobility translations with a space-efficient dropdown interface in Trestle
 - Supports text fields, text area's and check boxes
 - Integrates with [DeepL Pro](https://www.deepl.com/pro.html) to automatically translate fields
-- Developed for usage with Mobility's Postgres container back-end
-- Probably works with other back-ends but has not been tested
 
 <img src="/screenshot.png?raw=true" width="529" height="242" alt="Trestle Mobility screenshot" />
 

data/app/assets/javascript/trestle/mobility.js

@@ -22,7 +22,7 @@ Trestle.init(function(e, root) {
     this.$inputFields.each(function() {
       var field = $(this);
       var active = field.data('locale') !== self.activeLocale;
-      field.toggleClass('hidden', active)
+      field.toggleClass('mobility-field--hidden', active)
     })
 
     this.$dropdownItems.each(function() {

data/app/assets/stylesheets/trestle/mobility.scss

@@ -1,28 +1,64 @@
 .mobility {
+  .input-group-prepend {
+    display: flex;
+
+    .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .dropdown-toggle {
+    border-width: 1px;
+  }
+
+  .dropdown-item {
+    display: block;
+    width: 100%;
+    padding: .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: nowrap;
+    border: 0;
+
+    &:not(:hover, .active) {
+      color: #212529;
+      background-color: transparent;
+    }
+  }
+
   .dropdown-item.disabled,
   .dropdown-item.disabled:visited,
   .dropdown-item.disabled:active,
   .dropdown-item.disabled:hover {
-    background-color:#d9d9d9 !important;
-    color:#aaa !important;
+    background-color: #d9d9d9 !important;
+    color: #aaa !important;
     opacity: 0.7;
     cursor: default;
   }
-}
 
-.mobility-checkbox {
-  display: flex;
-  align-items:center;
+  .form-control {
+    border-left-width: 0;
+    border-top-right-radius: .25rem !important;
+    border-bottom-right-radius: .25rem !important;
+  }
 }
 
-.mobility-checkbox__label {
-  margin-left: 8px;
+.mobility-field {
+  &--hidden {
+    display: none !important;
+  }
 }
 
-
-.mobility__deepl-progress {
-  display: none;
-  margin-right: 4px;
+.mobility-checkbox {
+  margin-right: 0;
+  flex: 1;
+  padding: 0 8px;
+  border: solid #ccc;
+  border-width: 1px 1px 1px;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
 }
 
 .mobility__deepl {
@@ -30,10 +66,8 @@
   margin-top: 4px;
   text-align: right;
 
-  .progress {
-    display: inline-block;
-    width: 97px;
-    margin-right: 4px;
+  .spinner-border {
+    display: none;
   }
 
   &--actionable {
@@ -41,7 +75,7 @@
   }
 
   &--active {
-    .mobility__deepl-progress {
+    .spinner-border {
       display: inline-block;
     }
   }

data/app/views/trestle/mobility/_check_box.html.erb

@@ -1,20 +1,20 @@
 <div class="form-group mobility" data-active="<%= selected %>">
   <div class="input-group">
-    <div class="input-group-btn">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu mobility__languages">
+      <div class="dropdown-menu mobility__languages">
         <% locales.each do |locale| %>
-          <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
         <% end %>
-      </ul>
+      </div>
     </div>
     <% locales.each do |locale| %>
       <%=
-        content_tag(:div, "#{field_name.to_s.humanize} (#{locale.upcase})", { class: "form-control mobility-checkbox mobility-field#{locale == selected ? '' : ' hidden'}", data: { locale: locale } }) do
-          builder.raw_check_box("#{field_name}_#{locale}", { class: "mobility-checkbox__input" }, "1", "0") +
-          builder.label("#{field_name}_#{locale}", "#{label} (#{locale.upcase})", class: "mobility-checkbox__label")
+        content_tag(:div, "#{field_name.to_s.humanize} (#{locale.upcase})", { class: "form-check form-check-inline mobility-checkbox mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}", data: { locale: locale } }) do
+          builder.raw_check_box("#{field_name}_#{locale}", { class: "form-check-input mobility-checkbox__input" }, "1", "0") +
+          builder.label("#{field_name}_#{locale}", "#{label} (#{locale.upcase})", class: "form-check-label mobility-checkbox__label")
         end
       %>
     <% end %>

data/app/views/trestle/mobility/_deepl_translation_action.html.erb

@@ -1,14 +1,13 @@
 <div class="mobility__deepl" data-remote-path="<%= trestle.translate_path %>" data-deepl-query-params="<%= deepl_query_params %>">
-  <small class="mobility__deepl-progress">Translating…</small>
-
   <div class="btn-group">
-    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      Translate from <span class="caret"></span>
+    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      Translate from
     </button>
-    <ul class="dropdown-menu mobility__deepl-languages">
+    <div class="dropdown-menu mobility__deepl-languages">
       <% locales.each do |locale| %>
-        <li><a href="javascript:void(0)" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
+        <a href="javascript:void(0)" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
       <% end %>
-    </ul>
+    </div>
   </div>
 </div>

data/app/views/trestle/mobility/_text_area.html.erb

@@ -1,19 +1,21 @@
 <div class="form-group mobility" data-active="<%= selected %>">
   <div class="input-group">
-    <button type="button" class="btn btn-default dropdown-toggle input-group-addon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu mobility__languages">
-      <% locales.each do |locale| %>
-        <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
-      <% end %>
-    </ul>
-    <% locales.each do |locale, index| %>
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
+      </button>
+      <div class="dropdown-menu mobility__languages">
+        <% locales.each do |locale| %>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
+        <% end %>
+      </div>
+    </div>
+    <% locales.each do |locale| %>
       <%=
         builder.raw_text_area(
           "#{field_name}_#{locale}",
           options.merge(
-            class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}",
+            class: "form-control mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}",
             placeholder: "#{label} (#{locale.upcase})",
             data: { locale: locale }
           )

data/app/views/trestle/mobility/_text_field.html.erb

@@ -1,21 +1,21 @@
 <div class="form-group mobility" data-active="<%= selected %>">
   <div class="input-group">
-    <div class="input-group-btn">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="mobility-active"><%= "#{EmojiFlag.new(selected)} #{selected.upcase}" %></span> <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu mobility__languages">
+      <div class="dropdown-menu mobility__languages">
         <% locales.each do |locale| %>
-          <li><a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a></li>
+          <a href="#<%= "#{field_name}_#{locale}" %>" class="dropdown-item" data-locale="<%= locale %>"><%= "#{EmojiFlag.new(locale)} #{locale.upcase}" %></a>
         <% end %>
-      </ul>
+      </div>
     </div>
     <% locales.each do |locale| %>
       <%=
         builder.raw_text_field(
           "#{field_name}_#{locale}",
           options.merge(
-            class: "form-control mobility-field#{locale == selected ? '' : ' hidden'}",
+            class: "form-control mobility-field#{locale == selected ? '' : ' mobility-field--hidden'}",
             placeholder: "#{label} (#{locale.upcase})",
             data: { locale: locale }
           )

data/lib/trestle/mobility/version.rb

@@ -1,5 +1,5 @@
 module Trestle
   module Mobility
-    VERSION = "1.2.0"
+    VERSION = "1.3.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: trestle-mobility
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Richard Venneman
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-08-14 00:00:00.000000000 Z
+date: 2019-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: emoji_flag