diff --git a/app/assets/images/pzsh_skills_logo.svg b/app/assets/images/pzsh_skills_logo.svg new file mode 100644 index 000000000..7d087d738 --- /dev/null +++ b/app/assets/images/pzsh_skills_logo.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss index 7fbf53980..96255ae85 100644 --- a/app/assets/stylesheets/styles.scss +++ b/app/assets/stylesheets/styles.scss @@ -19,8 +19,7 @@ $skills-dark-blue: #1e5a96; } .content { - max-width: 80%; - flex-grow: 1; + width: 80%; } .cursor-pointer { @@ -58,10 +57,6 @@ $skills-dark-blue: #1e5a96; } } -pzsh-topbar { - background-color: $skills-blue; -} - .text-gray { color: $skills-text-gray; } @@ -298,7 +293,7 @@ pzsh-topbar { .profile-header-and-tabs { position: sticky; - top: 80px; + top: 98px; background-color: white; z-index: 2; } @@ -411,3 +406,13 @@ a > img { .model-form-container label { margin-bottom: 0; } + +.z-top { + z-index: 9999999; +} + +@media (max-width: 800px) { + .go-crazy { + display: none !important; + } +} \ No newline at end of file diff --git a/app/javascript/controllers/scroll_controller.js b/app/javascript/controllers/scroll_controller.js index 8533bdfdd..013208296 100644 --- a/app/javascript/controllers/scroll_controller.js +++ b/app/javascript/controllers/scroll_controller.js @@ -3,14 +3,17 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["list", "listItem", "scrollItem", "parent"] currentSelectedIndex = -1; - offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY; + offsetY = 0; connect() { - this.listTarget.style.top = `${this.offsetY}px`; - document.addEventListener("scroll", () => { - this.highlight(); - }); - this.highlight() + addEventListener('turbo:load', (event) => { + this.offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY; + this.listTarget.style.top = `${this.offsetY}px`; + document.addEventListener("scroll", () => { + this.highlight(); + }); + this.highlight() + }) } disconnect() { diff --git a/app/views/application/_header_tabbar.html.haml b/app/views/application/_header_tabbar.html.haml new file mode 100644 index 000000000..59945b547 --- /dev/null +++ b/app/views/application/_header_tabbar.html.haml @@ -0,0 +1,7 @@ +%pzsh-nav{slot: "nav"} + - tabs.each do |tab| + - unless tab[:admin_only] && !admin? + %pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})} + = tab[:title] +%div + = yield if defined?(do_yield) && do_yield|| false \ No newline at end of file diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 7f9907fd8..68af3d124 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,61 +9,61 @@ %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/ = csrf_meta_tags = csp_meta_tag + = stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.css" + = javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module" = stylesheet_link_tag "application", "data-turbo-track": "reload" = javascript_include_tag "application", "data-turbo-track": "reload", type: "module" - = javascript_include_tag "application", "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module" = favicon_link_tag "favicon.png" %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"} %div.content{"data-skills-empty-space-target": "container"} - %div.position-sticky.top-0.z-3 - %div.d-flex.justify-content-between.bg-white.flex-wrap - = link_to root_path, class: "text-decoration-none text-dark" do - %div.d-flex - %div.mb-1.mt-1 - %img{:src=> "/assets/logo.svg",:height=>"32"} - %text.d-flex.align-items-end.ms-2.small= "5.1.0" - %ul.navbar.text-gray - -# Language selector - %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"} + %div.position-sticky.top-0.z-top + %pzsh-topbar{href: people_path} + %img{:src=> "/assets/pzsh_skills_logo.svg"} + %div.d-flex + %div.mb-1.mt-1 + %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0" + %pzsh-banner + %pzsh-menu + %div{slot: 'actions'} + %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2.go-crazy{"data-action": "click->skills-empty-space#goCrazy"} + %pzsh-menu-action{'data-controller': 'dropdown', href: 'javascript:void(0);'} + -# Language selector = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"} -# Devise/Mockdata - if Rails.env.development? - %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100 - %span#username - - if devise? - = ti("devise.devise") - - else - = ti("devise.mockdata") + %span.text-white + - if devise? + = ti("devise.devise") + - else + = ti("devise.mockdata") -# Admin panel - if conf_admin? - %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100 - = link_to ti("devise.admin_panel"), admin_index_path - -# Username + %pzsh-menu-action{href: admin_index_path} + %pzsh-icon{name: 'sliders-v-alt'} + = ti("devise.admin_panel") + -# Help area + %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'} + %pzsh-icon{name: 'question-circle'} + Help + -# User profile dropdown - if auth_user_signed_in? - %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100 - %div.scale-icon-06(name="user") - %span#username - - if find_person_by_auth_user.nil? - = link_to current_auth_user&.name || current_auth_user&.email, people_path(alert: "true") - - else - = link_to find_person_by_auth_user.name, person_path(find_person_by_auth_user) - - if admin? - = ti "devise.admin" - -# Login/Logout - - if devise? - %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2 - - if auth_user_signed_in? - =link_to ti("devise.sign_out"), destroy_auth_user_session_path, data: { "turbo-method": :delete}, class: "btn btn-link" - - elsif devise_mapping.omniauthable? - =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"} - -# Help - %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.h-100 - %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"} - %pzsh-icon.scale-icon-08.text-gray(name="question-circle") - %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"} - %div.puzzle-header - %div.d-flex.h-100 - = render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path + %pzsh-menu-dropdown{href: '#', id: 'username'} + %div{slot: 'toggle'} + %pzsh-icon{name: 'user'} + = current_auth_user&.name || current_auth_user&.email + = ti 'devise.admin' if admin? + %div{slot: 'items'} + - unless find_person_by_auth_user.nil? + %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)} + %pzsh-icon{name: 'setting'} + = ti('devise.profile') + - if devise? + %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }} + %pzsh-icon{name: 'sign-out-alt'} + = ti("devise.sign_out") + - elsif devise? && devise_mapping.omniauthable? + =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"} + = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path %div.container-fluid %div.row.d-flex.justify-content-center %span#flash-messages @@ -73,4 +73,4 @@ = yield :actions = content_for?(:content) ? yield(:content) : yield - = turbo_frame_tag "remote_modal", target: "_top" \ No newline at end of file + = turbo_frame_tag "remote_modal", target: "_top" diff --git a/config/locales/de-CH.yml b/config/locales/de-CH.yml index 3ecebd76a..da8f2e71b 100644 --- a/config/locales/de-CH.yml +++ b/config/locales/de-CH.yml @@ -207,6 +207,7 @@ de-CH: devise: Devise mockdata: Mockdata no_omniauth_providers: Ä Fähler ist uftretä, es si ke Omniauth-Abieter verfügbar, bitte kontaktieren Sie dr Administrator. + profile: Mis Profil sign_in: Amäudä sign_in_with: Mit %{provider} amäudä sign_out: Abmäudä diff --git a/config/locales/de.yml b/config/locales/de.yml index ba39c1e87..d46c34318 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -192,6 +192,7 @@ de: devise: Devise mockdata: Mockdata no_omniauth_providers: Ein Fehler ist aufgetreten, es sind keine Omniauth-Anbieter verfügbar, bitte kontaktieren Sie den Administrator. + profile: Mein Profil sign_in: Anmelden sign_in_with: Mit %{provider} anmelden sign_out: Abmelden diff --git a/config/locales/en.yml b/config/locales/en.yml index d78dde159..684873e57 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -188,6 +188,7 @@ en: devise: Devise mockdata: Mockdata no_omniauth_providers: An error has occurred, there are no Omniauth providers available, please contact the administrator. + profile: My Profile sign_in: Log in sign_in_with: 'Log in with %{provider} ' sign_out: Log out diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 10d145aa9..cf3a9e8e6 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -188,6 +188,7 @@ fr: devise: Devise mockdata: Mockdata no_omniauth_providers: Une erreur s'est produite, aucun fournisseur Omniauth n'est disponible, veuillez contacter l'administrateur. + profile: Mon profil sign_in: S'inscrire sign_in_with: 'S''inscrire avec %{provider} ' sign_out: Se désinscrire diff --git a/config/locales/it.yml b/config/locales/it.yml index 9fdd053fd..d15463a04 100644 --- a/config/locales/it.yml +++ b/config/locales/it.yml @@ -188,6 +188,7 @@ it: devise: Motto mockdata: Mockdata no_omniauth_providers: Si è verificato un errore, non sono disponibili provider Omniauth, contattare l'amministratore. + profile: Il mio profilo sign_in: Accedi sign_in_with: "%{provider} Accedere con" sign_out: Disconnettersi diff --git a/spec/features/auth_spec.rb b/spec/features/auth_spec.rb index 32563c148..64bf7e577 100644 --- a/spec/features/auth_spec.rb +++ b/spec/features/auth_spec.rb @@ -28,7 +28,7 @@ end it 'Username field contains admin tag' do - expect(page.find('#username').text).to end_with("(Admin)") + expect(page).to have_css('#username', text: /\(Admin\)/) end it 'Admin can create new skill' do diff --git a/spec/features/edit_people_skills_spec.rb b/spec/features/edit_people_skills_spec.rb index ef1124a44..78527e6ca 100644 --- a/spec/features/edit_people_skills_spec.rb +++ b/spec/features/edit_people_skills_spec.rb @@ -12,8 +12,8 @@ bob = people(:bob) visit person_path(bob) - expect(page).to have_css('.nav-link', text: 'Skills', count: 2) - page.all('.nav-link', text: 'Skills')[1].click + expect(page).to have_css('.nav-link', text: 'Skills') + page.first('.nav-link', text: 'Skills').click end it 'displays people-skills' do diff --git a/spec/features/routing_spec.rb b/spec/features/routing_spec.rb index 7c27ce3ef..65163777e 100644 --- a/spec/features/routing_spec.rb +++ b/spec/features/routing_spec.rb @@ -32,7 +32,7 @@ end it "Should open profile with correct language and preserve language in cookie" do - select 'Italiano', from: "i18n_language" + select 'Italiano', from: 'i18n_language' select_from_slim_select("#person_id_person", bob.name) expect(page).to have_text("Dati personali") diff --git a/spec/features/tabbar_spec.rb b/spec/features/tabbar_spec.rb index 2266ba211..2fbb38fea 100644 --- a/spec/features/tabbar_spec.rb +++ b/spec/features/tabbar_spec.rb @@ -41,7 +41,7 @@ title = hash[:title] it "Should highlight '#{hash[:title]}' tab using click" do - click_link(href: eval(path_helper)) + page.find("pzsh-nav-item[href='#{eval(path_helper)}']").click check_highlighted_tab(t title) end @@ -52,7 +52,7 @@ end def check_highlighted_tab(text) - expect(page).to have_selector("div.skills-navbar .btn .nav-link.active", text: text) + expect(page).to have_selector("pzsh-nav-item[active]", text: text) end end @@ -96,7 +96,7 @@ def check_highlighted_tab(text) admin_only = hash[:admin_only] it "should #{'not' if admin_only} display #{title} tab as user" do - expect(page.has_selector?("div.skills-navbar .btn", text: (t title), wait: 0.1)).to eql(!admin_only) + expect(page.has_selector?("pzsh-nav-item", text: (t title), wait: 0.1)).to eql(!admin_only) end end