pg_rails 7.0.8.pre.alpha.100 → 7.0.8.pre.alpha.102

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0896ed88c290ad3d15d1b4edc18af987081ce34e1a0ae2cbf9e3620b4f217d04'
-  data.tar.gz: 9fa01a280e302e3f9f5c01edadf6cc5d526637e944b312162fe54c3518219794
+  metadata.gz: b4a985ed6d5c8db53c3fcfba554f3f3d51ae978a8ac3f11466f0395beda84732
+  data.tar.gz: f193f6098fbc5142b28ba3f2c8b548da56d00365884de5314bda20aaefb481b0
 SHA512:
-  metadata.gz: 2304afeed57445774e783dd2e14be001b3b732564b7d212cd4fe79f5d26f45a3f770f8b7ca1789e6ce12656c16c228afba2b2c483ea20f53f1c552a2c82aff0e
-  data.tar.gz: 5212a262a94cf9a81d140cedde07d16e719d5731913c80106265c94c7b1abc2c5719c65face0257381c42252285fb7c3f96c60e4f79d0f9e4119e0d2a51eb2e0
+  metadata.gz: f1ae6ad8fadcc741bca839466c9becafe82aa29741406faa321de9f812e084609151e8fd4750514be88c1204b4c3b17931e0feba6d4541fa54b061bce4ca1629
+  data.tar.gz: ee6d5de059cfa776d6373bf57d1ca7ccb7a70fbd3a5c7b72677a0daffe4b9269faad2379554a9622ac1e544353f62c27152dfbd7c497951f0697b6c2ba0c1afc

data/pg_engine/spec/components/previews/alert_component_preview/tooltips.html.slim

@@ -0,0 +1 @@
+span#tooltip data-bs-toggle="tooltip" data-bs-title="El tooltip" las cosas

data/pg_engine/spec/components/previews/alert_component_preview.rb

@@ -7,4 +7,6 @@ class AlertComponentPreview < ViewComponent::Preview
   def dismisible; end
 
   def colours; end
+
+  def tooltips; end
 end

data/pg_engine/spec/system/tooltips_spec.rb

@@ -0,0 +1,34 @@
+require 'rails_helper'
+
+describe 'Tooltips' do
+  context 'en desktop' do
+    before do
+      # byebug
+      driven_by :selenium_chrome_headless
+      # Capybara.current_driver = :selenium_chrome
+    end
+
+    it 'se activan con hover' do
+      visit '/rails/view_components/alert_component/tooltips'
+      expect(page).to have_no_text('tooltip')
+      find_by_id('tooltip').hover
+      expect(page).to have_text('tooltip')
+    end
+  end
+
+  context 'en mobile' do
+    before do
+      # driven_by :selenium_chrome_headless_iphone
+      driven_by :selenium_chrome_iphone
+      # driven_by :selenium_chrome_headless_notebook
+      # Capybara.current_driver = :selenium_chrome_headless_iphone
+    end
+
+    it 'se activan con click' do
+      visit '/rails/view_components/alert_component/tooltips'
+      expect(page).to have_no_text('tooltip')
+      find_by_id('tooltip').click
+      expect(page).to have_text('tooltip')
+    end
+  end
+end

data/pg_layout/app/assets/stylesheets/sidebar.scss

@@ -46,9 +46,9 @@ $chevron-color: 200,200,200,.5;
   // background-color: #d2f4ea;
 }
 
-#sidebar li a.active {
-  font-weight: bold;
+.pg--nav-button.active {
   --bs-link-color-rgb: white!important;
+  background-color: tint-color($primary, 17%);
 }
 // Los small-items están deprecados
 #sidebar {
@@ -94,11 +94,29 @@ $chevron-color: 200,200,200,.5;
     flex-basis: 10em;
   }
   & > * {
-    width: 9em;
+    width: 10em;
     position:fixed;
   }
 }
 
+.pg--nav-button {
+  padding: 0.4em 1.7em;
+  width: 100%;
+  text-align: right;
+  display: inline-block !important;
+}
+.offcanvas-body {
+  padding: 0!important;
+}
+.pg--nav-button:hover {
+  background-color: tint-color($primary, 20%);
+}
+
+.offcanvas .pg--nav-button {
+  padding: 0.7em 1.7em;
+  text-align: right;
+}
+
 .with-sidebar > :last-child {
   flex-basis: 0;
   flex-grow: 999;

data/pg_layout/app/javascript/config/index.js

@@ -2,3 +2,4 @@ import './cable_ready'
 import './turbo_rails'
 import './rollbar'
 import './bootstrap'
+import './tooltips'

data/pg_layout/app/javascript/config/tooltips.js

@@ -0,0 +1,13 @@
+import * as bootstrap from 'bootstrap'
+
+document.addEventListener('turbo:load', bindTooltips)
+document.addEventListener('turbo:render', bindTooltips)
+
+function bindTooltips () {
+  const tooltipsQuery = '[data-bs-toggle="tooltip"]'
+
+  const toastElList = document.querySelectorAll(tooltipsQuery)
+  Array.from(toastElList).map(tooltipEl => {
+    return new bootstrap.Tooltip(tooltipEl)
+  })
+}

data/pg_layout/app/views/pg_layout/_navbar.html.erb

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-<%= @breakpoint_navbar_expand %>" data-bs-theme="dark">
-  <div class="container-fluid">
+  <div class="container-fluid gap-2">
     <% unless @sidebar == false %>
       <button data-controller="navbar" data-action="navbar#expandNavbar"
               class="btn btn-outline-light me-2 d-none d-<%= @breakpoint_navbar_expand %>-inline-block">

data/pg_layout/app/views/pg_layout/_sidebar.html.erb

@@ -4,7 +4,7 @@
       <%= @navbar.logo if @navbar.logo.present? %>
     </div>
     <% if user_signed_in? %>
-      <span class="ms-3 text-light"><%= Current.user %></span>
+      <span class="d-inline-block px-3 text-end text-light"><%= Current.user %></span>
       <hr>
     <% end %>
     <ul class="list-unstyled ps-0">
@@ -15,7 +15,7 @@
           <a
             href="<%= entry[:path] %>"
             class="
-              d-inline-flex text-decoration-none ms-3
+              d-inline-flex text-decoration-none pg--nav-button
               <%= @navbar.active_entry?(entry, request) ? 'active' : '' %>"
             <%= entry[:attributes] %>
           >

data/pg_layout/app/views/pg_layout/_sidebar_mobile.html.erb

@@ -3,9 +3,9 @@
     <h5 class="offcanvas-title" id="offcanvasExampleLabel"></h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
-  <div class="offcanvas-body">
+  <div class="offcanvas-body text-end">
     <% if user_signed_in? %>
-      <span class="text-light"><%= Current.user %></span>
+      <span class="text-light pe-4 mt-4 d-inline-block"><%= Current.user %></span>
       <hr>
     <% end %>
     <ul class="list-unstyled mt-4">
@@ -15,7 +15,7 @@
         <li>
           <a
             href="<%= entry[:path] %>"
-            class="text-light <%= @navbar.active_entry?(entry, request) ? 'active' : '' %>"
+            class="pg--nav-button pe-4 text-light <%= @navbar.active_entry?(entry, request) ? 'active' : '' %>"
             <%= entry[:attributes] %>
           >
             <%= entry[:title] %>
@@ -30,6 +30,6 @@
     text-decoration: none;
   }
   .offcanvas li {
-    margin-top: 0.75em;
+    xmargin-top: 0.75em;
   }
 </style>

data/pg_rails/lib/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PgRails
-  VERSION = '7.0.8-alpha.100'
+  VERSION = '7.0.8-alpha.102'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pg_rails
 version: !ruby/object:Gem::Version
-  version: 7.0.8.pre.alpha.100
+  version: 7.0.8.pre.alpha.102
 platform: ruby
 authors:
 - Martín Rosso
@@ -1122,6 +1122,7 @@ files:
 - pg_engine/spec/components/previews/alert_component_preview/colours.html.slim
 - pg_engine/spec/components/previews/alert_component_preview/default.html.slim
 - pg_engine/spec/components/previews/alert_component_preview/dismisible.html.slim
+- pg_engine/spec/components/previews/alert_component_preview/tooltips.html.slim
 - pg_engine/spec/components/previews/internal_error_preview.rb
 - pg_engine/spec/components/previews/internal_error_preview/default.html.slim
 - pg_engine/spec/controllers/admin/accounts_controller_spec.rb
@@ -1166,6 +1167,7 @@ files:
 - pg_engine/spec/system/noticed_spec.rb
 - pg_engine/spec/system/send_mail_spec.rb
 - pg_engine/spec/system/signup_spec.rb
+- pg_engine/spec/system/tooltips_spec.rb
 - pg_layout/app/assets/stylesheets/animations.scss
 - pg_layout/app/assets/stylesheets/sidebar.scss
 - pg_layout/app/javascript/application.js
@@ -1175,6 +1177,7 @@ files:
 - pg_layout/app/javascript/config/cable_ready.js
 - pg_layout/app/javascript/config/index.js
 - pg_layout/app/javascript/config/rollbar.js
+- pg_layout/app/javascript/config/tooltips.js
 - pg_layout/app/javascript/config/turbo_rails/index.js
 - pg_layout/app/javascript/config/turbo_rails/set_consumer.js
 - pg_layout/app/javascript/controllers/application.js