gdk-toogle 0.9.3 → 0.9.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b41975a3c2a35c12eecaad91aa7bfd949d68d0132576d1f68ecca48987abf641
-  data.tar.gz: ad9ede84ae8f37f9286699d33163f360a04854a00abb3fbfb4ec6b07e3ec386f
+  metadata.gz: 126d3207f78acad2e5a2af3959117efd93a9a6b210187afafb4b4b69e1db33b9
+  data.tar.gz: 26b6411779359a408db3f218e3e9d71d5f33538277c9cf276183c8756c63ede8
 SHA512:
-  metadata.gz: 20a49dff67060c27ab608f9851570494726856f34e0deb11ad3c60266b72a3af13260384c63ddf3afe3284449e9984e03f3fd345a9302c6e132760a515c124eb
-  data.tar.gz: 1d372ec1b321404ad287154a027aef0a1732116ffedd449602bcd57f57e4d4d77b0a0e5ea11f2e5ed5e7c5caf3901ae99569485f3db8c0e50c7bc5f581ba5957
+  metadata.gz: 19cd5ab3ca2ecf53b0f4712ada95810c468a37e963d70cf726081dacf6797ce2cf63d9cc193c79d924a658e7d5effcb4042f1e5cc0f0210a11b4cc077a45b04a
+  data.tar.gz: 9f88ab74e9ed65a6ccdc031378d59b3310b52f2cdd0a8703d58f837cf7c357f9f2679b754fb525c99c1e7d934e81ef10e1c775f627ecad8c13da108b6aece209

data/README.md

@@ -8,14 +8,7 @@ This gem was written specifically for the GitLab codebase. It won't work in any
 
 ### Usage within the GitLab Development Kit
 
-This gem is still an experiment and not yet part of our `Gemfile`. So for now, to try out this gem, take the following steps:
-
-- `git clone` this repository to your machine.
-- Add `gem 'toogle', path: 'local_toogle_path_here'` to the Gemfile and `bundle`.
-- Add `mount Toogle::Engine, at: '/rails/toogle'` to `config/routes/development.rb`.
-- Restart the rails server to pick up the new route: `gdk restart rails-web`
-
-The UI is now availabe at http://gdk.test:3000/rails/toogle.
+The UI is availabe at http://gdk.test:3000/rails/features.
 
 ## Contributing
 
@@ -29,6 +22,23 @@ The system specs in `spec/system` are configured to use Firefox as headless brow
 
 **Tip:** If you don't have Firefox installed on your machine, or if you are on Ubuntu and have Firefox installed only via Snap, you can switch to Chrome by changing the `driven_by` to `:selenium_chrome_headless` in `spec/rails_helper.rb`.
 
+## Tech stack
+
+One design goal of this little Rails engine was to keep it free of any dependencies, that GitLab uses today.
+Because, tomorrow we might decide to ditch one or the other tech we use today, and Toogle shouldn't break just because GitLab removes `sassc`, as an example (that actually happened during development).
+
+That's why Toogle only depends on the bare basics: `rails`, `sprockets` and `haml`.
+
+### Javascript
+
+Toogle uses [Alpine.js](https://alpinejs.dev/) from a `<script>` tag so it does not use or depend on our Vue.js usage or any bundler. Alpine is very similar to Vue, so it's really easy to pick up. Give it a try!
+
+### CSS
+
+Toogle uses native unprocessed CSS to not depend on any specific preprocessor. Modern CSS is awesome, and all modern browsers support things like nested selectors today.
+
+For theming and dark mode, it uses CSS variables and HSL colors, which makes it super easy to switch from light to dark by just changing the variable that makes up the _Lightness_. Check it out!
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/stylesheets/toogle/components/card.css

@@ -4,7 +4,8 @@
     var(--saturation-bg),
     var(--lightness-bg1)
   );
-  border-radius: 5px;
-  padding: 2rem;
   box-shadow: 0 10px 16px var(--color-shadow);
+  border-radius: 5px;
+  padding: 1rem;
+  max-width: 100%;
 }

data/app/assets/stylesheets/toogle/components/toggle.css

@@ -4,6 +4,7 @@
   width: 60px;
   height: 34px;
   margin: 4px;
+  flex-shrink: 0;
 
   input {
     opacity: 0;

data/app/assets/stylesheets/toogle/elements.css

@@ -1,11 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 html {
   color: var(--color-text);
   transition: 0.2s;
-  background-image: radial-gradient(
-    circle at 10vh 10vw,
-    hsl(var(--hue-primary), var(--saturation-bg), var(--lightness-bg1)),
-    hsl(var(--hue-primary), var(--saturation-bg), var(--lightness-bg0))
-  );
+  background-color: var(--color-page-bg);
 }
 
 body {

data/app/assets/stylesheets/toogle/layout.css

@@ -12,7 +12,6 @@ body {
     gap: 1rem;
 
     padding: 1rem;
-    z-index: 2;
 
     a,
     span {
@@ -25,15 +24,30 @@ body {
 
   > main {
     display: flex;
-    flex-direction: column-reverse;
-    align-items: stretch;
-    justify-content: start;
-    width: 100ch;
-    max-width: 95%;
-    margin: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     gap: 3rem;
-    padding: 2rem 0;
+
+    padding: 0 1rem;
     flex-grow: 1;
+
+    &.with-sticky-search {
+      margin-top: 4rem;
+
+      .sticky-search {
+        align-self: center;
+        position: sticky;
+        width: min(100%, 80ch);
+        top: 0;
+        background-image: linear-gradient(
+          var(--color-page-bg) 90%,
+          transparent 100%
+        );
+        padding-bottom: 0.5rem;
+        z-index: 2;
+      }
+    }
   }
 
   > footer {

data/app/assets/stylesheets/toogle/utilities.css

@@ -35,3 +35,8 @@
 .w-100 {
   width: 100%;
 }
+
+.ellipsis {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}

data/app/assets/stylesheets/toogle/variables.css

@@ -10,6 +10,11 @@ html {
   --color-primary: hsl(var(--hue-primary), 90%, 50%);
   --color-text: hsl(var(--hue-primary), 0%, var(--lightness-fg));
   --color-shadow: hsl(0, var(--saturation-bg), var(--lightness-shadow));
+  --color-page-bg: hsl(
+    var(--hue-primary),
+    var(--saturation-bg),
+    var(--lightness-bg0)
+  );
 }
 
 @media (prefers-color-scheme: dark) {

data/app/views/layouts/toogle/application.html.haml

@@ -16,12 +16,6 @@
       %nav.d-flex.gap
         = link_to main_app.root_path do
           = render partial: "shared/logo", formats: :svg
-        %span ›
-        = link_to_unless_current "Feature flags", features_path do
-          %span Feature flags
-        - if @feature
-          %span ›
-          %span= @feature.name
 
       %button(x-data="darkModeSwitcher" x-bind="button")
         %svg(x-show="isDark" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
@@ -39,7 +33,7 @@
           -# 🌙
           %path(d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z")
 
-    %main
+    %main.with-sticky-search
       = yield
       - if notice.present?
         #notice.d-flex.row.center.gap

data/app/views/toogle/features/index.html.haml

@@ -1,3 +1,24 @@
+.sticky-search
+  .d-flex.col{
+    "x-data": "{query: '', show: false}",
+    "@click.outside": "show = false",
+    "@keyup.esc": "show = false"}
+    %input.large.w-100#search{
+      "type": "search",
+      "placeholder": "Search and toggle feature flags",
+      "x-model.debounce.400ms": "query",
+      "x-ref": "search",
+      "x-on:input": "show = true",
+      "x-on:focus": "show = true"}
+    %template(x-if="show")
+      .d-flex.col.stretch{
+        "x-anchor.bottom-start.offset.5" => "$refs.search",
+        "x-transition": nil}
+        .grow{
+          "data-url": definitions_path,
+          "x-data": "{}",
+          "x-init": "$el.innerHTML = await (await fetch($el.dataset.url)).text()"}
+
 .card
   %h3 My feature flags
   %small These features already use custom settings in this GDK.
@@ -5,7 +26,7 @@
   %ul(x-data="features('#{features_url}')")
     %template(x-for="feature in features" :key="feature.name")
       %li.feature-toggle(x-data="{ showMore: false }"){"@click.outside": "showMore = false"}
-        .d-flex.row
+        .d-flex.row.nowrap
           %template(x-if="feature.state === 'unknown'")
             %label.toggle(title="This feature does not exist on the current branch.")
               %input(type="checkbox" disabled :name="feature.name")
@@ -15,7 +36,7 @@
               %input(type="checkbox" x-on:change="toggleFeature(feature)" :checked="feature.state === 'enabled'" :name="feature.name")
               %span.handle.round
 
-          %code.grow(x-text="feature.name")
+          %code.grow.ellipsis(x-text="feature.name")
 
           %button(title="Show more" x-on:click="showMore = !showMore")
             %svg(xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
@@ -52,25 +73,4 @@
             %button(x-on:click="$refs.copyText.select(); document.execCommand('copy');") Copy
     %p(x-show="!features.length") No active feature flags in this GDK yet.
 
-.card(style="margin: 8vh 0 5vh;")
-  %h3 Search and toggle feature flags
-  .d-flex.col{
-    "x-data": "{query: '', show: false}",
-    "@click.outside": "show = false",
-    "@keyup.esc": "show = false"}
-    %input.large.w-100#search{
-      "type": "search",
-      "x-model.debounce.400ms": "query",
-      "x-ref": "search",
-      "x-on:input": "show = true",
-      "x-on:focus": "show = true"}
-    %template(x-if="show")
-      .d-flex.col.stretch{
-        "x-anchor.bottom-start.offset.5" => "$refs.search",
-        "x-transition": nil}
-        .grow{
-          "data-url": definitions_path,
-          "x-data": "{}",
-          "x-init": "$el.innerHTML = await (await fetch($el.dataset.url)).text()"}
-
 = render "dialog"

data/lib/toogle/version.rb

@@ -1,3 +1,3 @@
 module Toogle
-  VERSION = "0.9.3"
+  VERSION = "0.9.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: gdk-toogle
 version: !ruby/object:Gem::Version
-  version: 0.9.3
+  version: 0.9.5
 platform: ruby
 authors:
 - Thomas Hutterer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-03-15 00:00:00.000000000 Z
+date: 2024-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails