head 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fed25e922ef5971cee84f0a126455fc7905b22cad95e682bc7d4ec9d73e45a67
-  data.tar.gz: 92b16e33d79efbc6f61a8eed32e1ddacdae0895c87b275b6e2639df3ab5786c4
+  metadata.gz: 64555f34c0083982a934eab9077ed59c080d25e5c30d649c45bb72f91d5a4d7d
+  data.tar.gz: 7d56527224c27361e457345eabeea6fedacda3d820608f50bd0e2afd2463f59a
 SHA512:
-  metadata.gz: c34f9d1f4238f5bf21a93f278e39aebce14701ba695c3a14d8992c939249cd212259993b2483940c8a89de7ff9d0b79e1c64ad777eaa3f2c9d4f4bb00eea2d9e
-  data.tar.gz: 1ba05cbd6fb2cf090759eee12f0a782ad232c3dfe70c40b00bee4b5bacf6cecc8045e1fdf1ef62eabbab276020f17b5cb3fd25568390206fa2b616e01a7593ca
+  metadata.gz: d755be54df9724b2c9dea550f04bb10d3c211ea6d06028eb6dedee133f603ab80a614515f2e038a651ff6cd5c83c18598bbb14098b7f0032f7e5d52c61606629
+  data.tar.gz: 23c1c19da4691d95d45411ae3c13c15ddc847d0dfa9767d415569c2e994119015dcbe9e3daf47979d4340c1f9feaf33fdd57a377df5b5ad7238cc9a72f3402e3

data/app/assets/javascript/head/index.js

@@ -1,2 +1,3 @@
 import "head/knob"
 import "head/wing"
+import "head/sidebar"

data/app/assets/javascript/head/knob.js

@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       // Check screen size
       const mainMenuWing = document.querySelector(`.js-head-wing[data-identifier="mainmenu"]`)
-      const tight = getComputedStyle(mainMenuWing).getPropertyValue('position') == 'absolute'
+      const tight = mainMenuWing ? getComputedStyle(mainMenuWing).getPropertyValue('position') === 'absolute' : false
 
       // Handle current wing
       const wing = document.querySelector(`.js-head-wing[data-identifier="${identifier}"]`)

data/app/assets/javascript/head/sidebar.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('.js-head-sidebar__category').forEach(function (category) {
+    console.debug("Binding to Sidebar Category")
+    const href = category.getAttribute('href')
+
+    // If this category doesn't open a secondary sidebar, it is a standalone link.
+    if (href != '#') return
+
+    category.addEventListener('click', function(event) {
+      event.preventDefault()
+      const category = event.currentTarget
+
+      // The identifier of a category always matches that of its links list.
+      const identifier = category.dataset.identifier
+      const active = category.classList.contains('is-active')
+      const links = document.querySelector(`.js-head-sidebar__links[data-identifier="${identifier}"]`)
+
+      // Close all others
+      document.querySelectorAll('.js-head-sidebar__links').forEach((someLinks) => {
+        if (links == someLinks) return
+
+        someLinks.classList.remove('is-active')
+          const categoryClass = `.js-head-sidebar__category[data-identifier="${someLinks.dataset.identifier}"]`
+          document.querySelectorAll(categoryClass).forEach((someCategory) => {
+            someCategory.classList.remove('is-active')
+          })
+      })
+
+      // Now toggle the desired one.
+      if (active) {
+        category.classList.remove('is-active')
+        links.classList.remove('is-active')
+      } else {
+        category.classList.add('is-active')
+        links.classList.add('is-active')
+      }
+    })
+  })
+})

data/app/assets/stylesheets/head/components/knob.sass

@@ -1,3 +1,4 @@
+@use "iglu/responsive"
 @use "iglu/font-size"
 @use "iglu/spacing"
 @use "head/settings/colors"
@@ -9,7 +10,7 @@
   padding-right: 0.25em
   text-decoration: none
   +spacing.padding-vertical--tiny
-  +font-size.huge
+  +font-size.gigantic
 
   +link.states
     color: colors.$steel-gray
@@ -20,6 +21,9 @@
   &:active
     color: colors.$white
 
+  &--mainmenu
+    display: grid
+
   &--identicon
     max-width: 1em
     aspect-ratio: 1
@@ -48,3 +52,12 @@
       object-fit: contain
       clip-path: circle()
       background-color: #fff
+
+
+// Keep this breakpoint analogous to wing.sass
++responsive.xlarge
+  .c-head-knob
+
+    &--mainmenu
+      display: none
+

data/app/assets/stylesheets/head/components/sidebar.sass

@@ -0,0 +1,99 @@
+@use "iglu/spacing"
+@use "iglu/font-size"
+@use "head/settings/colors"
+@use "head/tools/link"
+
+.c-head-sidebar
+  display: grid
+  grid-template-columns: auto 1fr
+  height: 100%
+  align-items: start
+  +font-size.default
+
+  &__categories
+    display: grid
+
+  &--right
+    .c-head-sidebar__categories
+      order: 2
+
+  &__secondary
+    overflow: hidden
+    background-color: rgba(255, 255, 255, 0.14) // Corrsponds to 10% change in underlying color
+    height: 100%
+
+  &__category
+    display: grid
+    justify-content: center
+    grid-template-areas: "icon" "name"
+    padding-top: 0.2em
+    padding-bottom: 0.2em
+    position: relative
+    text-decoration: none
+    +spacing.padding-horizontal--tiny
+
+    @each $column in category-icon category-name
+      &__#{$column}
+        grid-area: #{$column}
+
+    +link.states
+      color: colors.$moon-gray
+
+    &:hover
+      color: colors.$white
+
+    &.is-active
+      color: colors.$white
+      background-color: rgba(255, 255, 255, 0.14) // Corrsponds to 10% change in underlying color
+
+    &-icon
+      text-align: center
+      +font-size.huge
+
+    &-name
+      +font-size.smaller
+
+  &__links
+    display: none
+
+    &.is-active
+      display: block
+
+  &__link
+    grid-column-gap: 0.6rem
+    display: grid
+    align-items: center
+    grid-template-columns: auto 1fr
+    grid-template-areas: "icon name"
+    padding-right: 0.5rem
+    padding-left: 0.5rem
+    text-decoration: none
+    height: 100%
+    +spacing.padding-vertical--tiny
+
+    @each $column in link-icon link-name
+      &__#{$column}
+        grid-area: #{$column}
+
+    +link.states
+      color: colors.$moon-gray
+
+    &:hover
+      color: colors.$white
+
+    &:active
+      color: colors.$white
+
+    &.is-active
+      color: colors.$white
+      background-color: rgba(255, 255, 255, 0.14)
+
+    &-name
+      white-space: nowrap
+      +font-size.small
+
+    &-icon
+      +font-size.larger
+
+    &-separator
+      +spacing.margin-top--smaller

data/app/assets/stylesheets/head/components/theater.sass

@@ -8,11 +8,12 @@
   grid-template-rows: auto 1fr
 
   &__roof
-    background-color: #444
+    background-color: colors.$granite-gray
     display: grid
     line-height: 1 // Conformity of knobs
     align-items: center
-    grid-template-columns: auto 1fr auto
+    // Keep Logo centered even if left and right menus differ in width
+    grid-template-columns: 1fr 1fr 1fr
     grid-template-areas: "knobs--left logo knobs--right"
 
   @each $column in knobs--left logo knobs--right

data/app/assets/stylesheets/head/components/wing.sass

@@ -4,8 +4,9 @@
 .c-head-wing
   display: none
   // 320px is the min screen width we support.
-  // Our sidebar cannot be bigger, and it needs to leave some space
-  // at the right so that a click/tap there can close the sidebar.
+  // On devices that are that narrow, the sidebar needs to fit in,
+  // as well as a blank area on the right to close the sidebar with a tap.
+  // So the sidebar is limited to less than 320px on narrow devices.
   max-width: 265px
   height: 100%
   z-index: 1000
@@ -13,22 +14,12 @@
   background: colors.$granite-gray
   color: colors.$white
 
-  &--left
-    // On rather large screens, always show the main menu in left sidebar
-    +responsive.xlarge-container
-      position: static
-
-      &[data-identifier="mainmenu"]
-        // We "force" this item to be active without having the `is-active` class.
-        display: block
-        // So we need some way to deactivate it again using JS.
-        &.is-force-deactive
-          display: none
-
   &--right
     right: 0
+    position: inherit
 
-    // On very very large screens, show notifications sidebar on the right.
+    // On very very large screens, permanently show notifications sidebar on the right.
+    // Using container queries for this, because the main menu on the left may affect the layout.
     +responsive.xxlarge-container
       position: static
 
@@ -57,14 +48,19 @@
     +responsive.xlarge-container
       display: none
 
+// Keep this breakpoint analogous to knob.sass
++responsive.xlarge
+  .c-head-wing
 
-// +responsive.xxlarge
-//   .c-head-wing
-
-//     // We "force" this item to be active without having the `is-active` class.
-//     &[data-identifier="mainmenu"]
-//       display: block
+    &--left
+      // On rather large screens, always show the main menu in left sidebar
+      position: static
+      // On wide screens, it's ok to have a wider sidebar to fit all text.
+      max-width: 350px
 
-//       // So we need some way to deactivate it again using JS.
-//       &.is-force-deactive
-//         display: none
+      &[data-identifier="mainmenu"]
+        // We "force" this item to be active without having the `is-active` class.
+        display: block
+        // // So we need some way to deactivate it again using JS.
+        // &.is-force-deactive
+        //   display: none

data/app/assets/stylesheets/head/generics/fonts.sass

@@ -2,5 +2,5 @@
   font-family: 'headicons'
   font-weight: normal
   font-style: normal
-  src: url('head/headicons.woff') format('woff')
+  src: url('/head/headicons.woff') format('woff')
 

data/app/assets/stylesheets/head/index.sass

@@ -3,6 +3,7 @@
 @use "./generics/flip"
 @use "./generics/fonts"
 
+@use "./components/sidebar"
 @use "./components/theater"
 @use "./components/knob"
 @use "./components/wing"

data/app/assets/stylesheets/head/objects/headicon.sass

@@ -27,6 +27,14 @@
   &:before
     content: headicons.$bell
 
+.o-headicon--bell-ringing
+  &:before
+    content: headicons.$bell-ringing
+
 .o-headicon--gear
   &:before
     content: headicons.$gear
+
+.o-headicon--question-mark
+  &:before
+    content: headicons.$question-mark

data/app/assets/stylesheets/head/settings/_colors.sass

@@ -10,5 +10,6 @@ $jade-green: rgb(0, 190, 130)
 $granite-gray: rgb(70, 70, 70)
 $steel-gray: color.adjust($granite-gray, $lightness: 25%)
 $silver-gray: color.adjust($granite-gray, $lightness: 50%)
+$moon-gray: color.adjust($granite-gray, $lightness: 65%)
 
 $transparent-gray: rgba(100, 100, 100, 0.5)

data/app/components/head/knob.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Head
-  class Knob < ApplicationComponent
+  class Knob < ::Head::ApplicationComponent
     erb_template <<~ERB
       <%= link_to(url, class: classes, data: { identifier: id, group: group }, **options.except(:url)) do %>
         <% if icon %>
-          <i class="o-headicon <%= icon_class%><%=  %>"></i>
+          <i class="o-headicon <%= icon_class%>"></i>
         <% end %>
 
         <%= content %>
@@ -28,6 +28,7 @@ module Head
       return :'bars-thin' if preset_mainmenu?
       return :bell if preset_notifications?
       return :gear if preset_settings?
+      return :'question-mark' if preset_help?
 
       :magnifier if preset_search?
     end
@@ -44,6 +45,7 @@ module Head
       result = %w[c-head-knob js-head-knob]
       result.push 'c-head-knob--identicon' if preset_identicon?
       result.push 'c-head-knob--avatar' if preset_avatar?
+      result.push 'c-head-knob--mainmenu' if preset_mainmenu?
       result
     end
 
@@ -67,6 +69,10 @@ module Head
       preset == :search
     end
 
+    def preset_help?
+      preset == :help
+    end
+
     def preset_identicon?
       preset == :identicon
     end

data/app/components/head/sidebar.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Head
+  class Sidebar < ::Head::ApplicationComponent
+    erb_template <<~ERB
+      <div data-group="<%= right ? :right : :left %>" class="c-head-sidebar <%= 'c-head-sidebar--right' if right %> ">
+        <% if categories.any? %>
+          <div class="c-head-sidebar__categories">
+            <% categories.each do |category| %>
+              <%= category %>
+            <% end %>
+          </div>
+
+          <div class="c-head-sidebar__secondary">
+            <% categories.select(&:submenu?).each do |category| %>
+              <div class="c-head-sidebar__links js-head-sidebar__links" data-identifier="<%= category.identifier %>">
+                <% category.links.each do |link| %>
+                  <%= link %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    ERB
+
+    renders_many :categories, -> (**options) do
+      ::Head::Sidebars::Category.new(icon_class_prefix:, **options)
+    end
+
+    option :right, default: -> { false }
+    option :icon_class_prefix, default: -> {}
+  end
+end

data/app/components/head/sidebars/category.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Category < ::Head::ApplicationComponent
+      erb_template <<~ERB
+        <%= link_to(url, data:,
+                         class: 'c-head-sidebar__category js-head-sidebar__category', **link) do %>
+          <%= content_tag :i, nil, class: icon_classes %>
+          <%= content_tag :div, name, class: 'c-head-sidebar__category-name' %>
+        <% end %>
+      ERB
+
+      renders_many :links, -> (**options) do
+        ::Head::Sidebars::Link.new(icon_class_prefix:, **options)
+      end
+
+      option :url, default: -> { '#' }
+      option :icon_class_prefix, default: -> {}
+      option :name
+      option :icon
+      option :link, default: -> { {} }
+
+      def css_classes
+        "c-head-sidebar__category #{'js-head-sidebar__category' if submenu?}"
+      end
+
+      def icon_classes
+        "#{icon_class_prefix}#{icon.to_s.gsub('_', '-')} c-head-sidebar__category-icon"
+      end
+
+      def data
+        return unless submenu?
+
+        { identifier: }
+      end
+
+      def submenu?
+        url == '#'
+      end
+
+      def with_separator
+        with_link(name: nil, icon: nil)
+      end
+
+      def identifier
+        @identifier ||= SecureRandom.hex
+      end
+    end
+  end
+end

data/app/components/head/sidebars/headline.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Headline < ::Head::ApplicationComponent
+      erb_template <<~ERB
+       Headline
+      ERB
+    end
+  end
+end

data/app/components/head/sidebars/link.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Link < ::Head::ApplicationComponent
+      erb_template <<~ERB
+        <%= link_to(url, class: link_classess, **link) do %>
+          <% if icon %>
+            <%= content_tag :i, nil, class: icon_classes %>
+            <% end %>
+          <%= content_tag :div, name, class: 'c-head-sidebar__link-name' %>
+        <% end %>
+      ERB
+
+      option :url, default: -> { '#' }
+      option :name
+      option :icon
+      option :link, default: -> { {} }
+      option :icon_class_prefix, default: -> {}
+      option :active, default: -> {}
+
+      def link_classess
+        "c-head-sidebar__link #{'c-head-sidebar__link-separator' unless icon}  #{active?}".squish
+      end
+
+      def icon_classes
+        "#{icon_class_prefix}#{icon.to_s.gsub('_', '-')} c-head-sidebar__link-icon"
+      end
+
+      def active?
+        ::Head::Active.call(url: url_for(url),
+                            condition: active,
+                            current_path: request.original_fullpath)
+      end
+    end
+  end
+end

data/app/components/head/theater.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Head
-  class Theater < ApplicationComponent
+  class Theater < ::Head::ApplicationComponent
     erb_template <<~ERB
       <div class="c-head-theater">
         <div class="c-head-theater__roof">
@@ -50,6 +50,11 @@ module Head
       with_wing(id: :mainmenu, &)
     end
 
+    def with_help(&)
+      with_knob(preset: :help, right: true)
+      with_wing(id: :help, right: true, &)
+    end
+
     def with_notifications(&)
       with_knob(preset: :notifications, right: true)
       with_wing(id: :notifications, right: true, &)

data/app/components/head/wing.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Head
-  class Wing < ApplicationComponent
+  class Wing < ::Head::ApplicationComponent
     erb_template <<~ERB
       <div class="<%= classes.join(' ') %>" data-identifier="<%= id %>" data-group="<%= group %>">
         <%= content %>

data/config/importmap.rb

@@ -4,3 +4,4 @@ pin 'head', to: 'head/index.js'
 
 pin 'head/knob', to: 'head/knob.js'
 pin 'head/wing', to: 'head/wing.js'
+pin 'head/sidebar', to: 'head/sidebar.js'

data/lib/head/active.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Head
+  class Active
+    include Calls
+
+    option :url
+    option :current_path
+    option :condition
+
+    def call
+      :'is-active' if active?
+    end
+
+    private
+
+    def linked_path
+      ::URI.parse(url).path
+    end
+
+    def active?
+      return false if url == '#'
+
+      # Adapted from https://github.com/comfy/active_link_to (MIT license)
+      case condition
+
+      when :inclusive, nil # default
+        !current_path.match(%r{^#{Regexp.escape(linked_path).chomp('/')}(/.*|\?.*)?$}).blank?
+
+      when :exclusive
+        !current_path.match(%r{^#{Regexp.escape(linked_path)}/?(\?.*)?$}).blank?
+
+      when :exact
+        current_path == linked_path
+
+      when Regexp
+        !current_path.match(condition).blank?
+
+      when Array
+        controllers = [*condition[0]]
+        actions     = [*condition[1]]
+        ((controllers.blank? || controllers.member?(params[:controller])) &&
+          (actions.blank? || actions.member?(params[:action]))) ||
+          controllers.any? do |controller, action|
+            params[:controller] == controller.to_s && params[:action] == action.to_s
+          end
+
+      when TrueClass
+        true
+
+      when FalseClass
+        false
+
+      when Hash
+        condition.all? do |key, value|
+          params[key].to_s == value.to_s
+        end
+      end
+    end
+  end
+end

data/lib/head/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Head
-  VERSION = '0.0.2'
+  VERSION = '0.0.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: head
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - halo
@@ -121,8 +121,10 @@ files:
 - app/assets/fonts/head/icomoon.json
 - app/assets/javascript/head/index.js
 - app/assets/javascript/head/knob.js
+- app/assets/javascript/head/sidebar.js
 - app/assets/javascript/head/wing.js
 - app/assets/stylesheets/head/components/knob.sass
+- app/assets/stylesheets/head/components/sidebar.sass
 - app/assets/stylesheets/head/components/theater.sass
 - app/assets/stylesheets/head/components/wing.sass
 - app/assets/stylesheets/head/generics/flip.sass
@@ -140,11 +142,16 @@ files:
 - app/assets/stylesheets/head/utilities/smokescreen.sass
 - app/components/head/application_component.rb
 - app/components/head/knob.rb
+- app/components/head/sidebar.rb
+- app/components/head/sidebars/category.rb
+- app/components/head/sidebars/headline.rb
+- app/components/head/sidebars/link.rb
 - app/components/head/theater.rb
 - app/components/head/wing.rb
 - config/importmap.rb
 - config/locales/head.en.yml
 - lib/head.rb
+- lib/head/active.rb
 - lib/head/css.rb
 - lib/head/engine.rb
 - lib/head/identicon.rb