From aa236d0604c1ccb6634fc35accef02deb75d05ec Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 6 Apr 2021 13:24:07 +0200 Subject: [PATCH] fix: various menu fixes & improvements --- src/images/magnify-white.svg | 1 + src/scripts/menu-search-control.js | 38 +++++++-- src/styles/admin-circles/_index.scss | 55 +++++++++++++ src/styles/index.scss | 55 ------------- src/styles/left-nav/_index.scss | 82 +++++++++++++------ src/views/partials/menu-left.pug | 23 +++--- .../widgets/hubl-menu-contact-removed.pug | 3 +- .../widgets/hubl-menu-fix-url-circle.pug | 2 +- .../widgets/hubl-menu-fix-url-contact.pug | 2 +- .../widgets/hubl-menu-fix-url-project.pug | 2 +- 10 files changed, 165 insertions(+), 98 deletions(-) create mode 100644 src/images/magnify-white.svg diff --git a/src/images/magnify-white.svg b/src/images/magnify-white.svg new file mode 100644 index 0000000..e326db1 --- /dev/null +++ b/src/images/magnify-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js index 7794d37..a4bb17f 100644 --- a/src/scripts/menu-search-control.js +++ b/src/scripts/menu-search-control.js @@ -6,7 +6,33 @@ document.addEventListener("DOMContentLoaded", () => { const menuSub = menuTab.querySelector('.jsMenuSub'); const menuOption = menuTab.querySelector('.jsMenuOption'); const menuAdmin = menuTab.querySelector('.jsMenuAdmin'); - + + const isParent = (refNode, otherNode) => { + var parent = otherNode.parentNode; + do { + if (refNode == parent) { + return true; + } else { + parent = parent.parentNode; + } + } while (parent); + return false; + } + if (menuAdmin) { + menuAdmin.addEventListener("mouseover", function (ev) { + if (!isParent(this, ev.relatedTarget) && ev.target == this) { + menuAdmin.classList.toggle('hidden', false); + } + }, false); + menuAdmin.addEventListener("mouseout", function (ev) { + if (!isParent(this, ev.relatedTarget) && ev.target == this) { + menuAdmin.classList.toggle('hidden', true); + } + }, false); + menuAdmin.querySelector('solid-link').addEventListener('click', e => { + menuAdmin.classList.toggle('hidden', true); + }); + } menuHeader.addEventListener('click', e => { menuArrow.classList.toggle('transform-up'); menuSub.classList.toggle('hidden'); @@ -16,13 +42,15 @@ document.addEventListener("DOMContentLoaded", () => { e.stopPropagation(); }); }); - + const searchForm = document.querySelector('.menu-search'); searchForm.addEventListener('formChange', () => { - if(document.querySelector('.menu-search input').value != "") { - searchForm.style.backgroundColor = "#202B3C"; //- Put overriden color here + if (document.querySelector('.menu-search input').value != "") { + searchForm.style.backgroundColor = "#202B3C"; + document.querySelector('#main__menu').classList.toggle('searching', true); } else { - searchForm.style.backgroundColor = "var(--color-heading)"; //- Put default color here + searchForm.style.backgroundColor = "var(--color-heading)"; + document.querySelector('#main__menu').classList.toggle('searching', false); } }) }); \ No newline at end of file diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss index d02c585..e80679a 100644 --- a/src/styles/admin-circles/_index.scss +++ b/src/styles/admin-circles/_index.scss @@ -1,6 +1,61 @@ #admin-circles, #admin-circles-leave { + /* Fix on Join button in admin (circles + projects) */ + /* Styles on buttons and .children-link don't work because this input is inside too many elements. */ + /* And no I can't add that stupid icon because it'a an input. */ + /* But now, with 0.16, it's a button and you can :D */ + .join-button { + + input, + button { + padding: 9px 20px; + border-radius: 16.5px; + height: 33px; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + background-color: var(--color-secondary); + color: white; + border: 1px solid var(--color-secondary); + + &:before { + font-size: 15px; + margin-right: 6px; + content: "\e079"; + font-family: simple-line-icons; + font-style: normal; + font-weight: 400; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + &:hover { + background: white; + color: var(--color-secondary); + } + } + + @media (max-width: 768px) { + + &.sm-full { + + input, + button { + width: 100%; + } + } + } + } + .form.search-button :not(.add-member)+button[type=submit] { background-color: #E9F2FF; border: none; diff --git a/src/styles/index.scss b/src/styles/index.scss index d2dd306..a5fc667 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -88,61 +88,6 @@ hubl-menu-empty+hubl-menu-empty { justify-content: center; } -/* Fix on Join button in admin (circles + projects) */ -/* Styles on buttons and .children-link don't work because this input is inside too many elements. */ -/* And no I can't add that stupid icon because it'a an input. */ -/* But now, with 0.16, it's a button and you can :D */ -.join-button { - - input, - button { - padding: 9px 20px; - border-radius: 16.5px; - height: 33px; - text-decoration: none; - font-weight: bold; - text-transform: uppercase; - background-color: var(--color-secondary); - color: white; - border: 1px solid var(--color-secondary); - - &:before { - font-size: 15px; - margin-right: 6px; - content: "\e079"; - font-family: simple-line-icons; - font-style: normal; - font-weight: 400; - speak: none; - display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; - font-variant: normal; - text-transform: none; - line-height: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - &:hover { - background: white; - color: var(--color-secondary); - } - } - - @media (max-width: 768px) { - - &.sm-full { - - input, - button { - width: 100%; - } - } - } -} - /* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */ .two-lines-ellipsis { display: -webkit-box !important; diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 8665bca..2e71699 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -1,10 +1,35 @@ nav#main__menu { height: 100vh; + &.searching { + background-image: url('../images/magnify-white.svg'); + background-color: var(--color-heading); + background-repeat: no-repeat; + background-position-x: 80px; + background-position-y: 150px; + background-size: 180px; + } + @media (max-width: 768px) { min-height: calc(100vh - 50px); } - + + .transparent-background { + background-color: transparent; + + &.active[active] { + background-color: var(--color-third); + } + + &.hover:hover:not([active]) { + background-color: #202B3C; + } + + &.reverse { + background-color: var(--color-third); + } + } + .unread { font-weight: bolder; } @@ -35,18 +60,20 @@ nav#main__menu { } input { - background: var(--color-heading); + background: transparent; color: #D0D4DA; margin-top: 0; padding: 12px 13px; height: 50px; /* https://css-tricks.com/almanac/selectors/p/placeholder/ */ - &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + &::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ color: #D0D4DA; } - &::-moz-placeholder { /* Firefox 19+ */ + &::-moz-placeholder { + /* Firefox 19+ */ color: #D0D4DA; } @@ -102,7 +129,7 @@ nav#main__menu { top: 36px; text-align: end; width: 64%; - + @media (max-width: 768px) { width: 100%; left: 0; @@ -120,6 +147,7 @@ nav#main__menu { margin-left: 3px; opacity: 0.8; width: 12px; + >div { line-height: 19px; } @@ -177,6 +205,7 @@ nav#main__menu { .menu-header>div.transform-up~.badge { display: block; } + /* End */ /* The little cross icon on contacts' name appears or disapear + hover + styles */ @@ -188,36 +217,42 @@ nav#main__menu { } .sub-menu__contacts>div>solid-display { + height: 28px; + display: block; &:hover { - display: flex; - - & *:not(button) { - background: #202B3C; - } hubl-menu-fix-url-contact { + display: inline-block; width: 100%; } + hubl-counter { + padding-right: 25px; + } + + solid-set-default[name="message"] { + margin-right: 9px; + } + hubl-menu-contact-removed { + width: 38px; + height: 27.75px; + text-align: right; + position: relative; + top: -28px; display: block; + left: calc(100% - 47px); padding-top: 5px; - margin-left: auto; - padding-right: 10px; - padding-left: 10px; - .button-remove { - padding: 0; - - button::before { - font-size: 18px; - color: white; - } + button::before { + font-size: 18px; + color: white; } } } } + /* End */ /* Modal to keep/remove a contact */ @@ -236,7 +271,8 @@ nav#main__menu { font-size: 16px; } - div, p { + div, + p { background: white !important; } @@ -247,6 +283,7 @@ nav#main__menu { display: none; } } + /* End */ &.jsLeftMenu { @@ -271,5 +308,4 @@ nav#main__menu { z-index: 3000; } } -} - +} \ No newline at end of file diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index c2e1570..a523d5e 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -18,14 +18,14 @@ solid-router#navbar-router(default-route='dashboard') if component.type == "about" solid-route(name=component.route, hidden) if component.type == "dashboard" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route) div.segment.margin-right-xxsmall div.icon.icon-small.icon-home div.segment.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.dashboard"}`) div.divider if component.type == "circles" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) @@ -40,7 +40,7 @@ solid-router#navbar-router(default-route='dashboard') solid-route(name=`admin-${component.route}-create` hidden) solid-route(name=`admin-${component.route}-leave` hidden) solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden) - solid-route(name=`${component.route}-left`) + solid-route(name=`${component.route}-left` hidden) div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub div.loader.loader-menu(id=`loader-${component.route}`) div @@ -62,7 +62,7 @@ solid-router#navbar-router(default-route='dashboard') div.divider if component.type == "chat" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) @@ -70,6 +70,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-options.segment.jsMenuOption solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true)) solid-badge.badge(data-type="Message") + solid-route(name=`admin-${component.route}`, hidden) solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden) div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub div.loader.loader-menu(id=`loader-${component.route}`) @@ -90,7 +91,7 @@ solid-router#navbar-router(default-route='dashboard') ) if component.type == "projects" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") @@ -121,36 +122,36 @@ solid-router#navbar-router(default-route='dashboard') widget-project='hubl-menu-fix-url-project' filtered-by="general-search" order-asc="project.customer.name" - + ) div.divider if component.type == "profileDirectory" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route) div.segment.margin-right-xxsmall div.icon.icon-small.icon-people div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") solid-route.menu(name=`${component.route}-profile`, hidden) div.divider if component.type == "jobBoard" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer') + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route, rdf-type='hd:joboffer') div.segment.margin-right-xxsmall div.segment.icon.icon-small.icon-briefcase div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard") div.divider if component.type == "resources" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route) div.segment.margin-right-xxsmall div.segment.icon.icon-small.icon-docs div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources") div.divider if component.type == "polls" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route) div.segment.margin-right-xxsmall div.segment.icon.icon-small.icon-bubbles div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov") div.divider if component.type == "events" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route) div.segment.margin-right-xxsmall div.segment.icon.icon-small.icon-calendar div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") diff --git a/src/views/partials/widgets/hubl-menu-contact-removed.pug b/src/views/partials/widgets/hubl-menu-contact-removed.pug index fa43e3e..60b2d44 100644 --- a/src/views/partials/widgets/hubl-menu-contact-removed.pug +++ b/src/views/partials/widgets/hubl-menu-contact-removed.pug @@ -1,4 +1,5 @@ if componentSet.has('chat') solid-widget(name='hubl-menu-contact-removed') template ${value != "" ? ` - ` : ""} + ` : ""} + //- Fix: using type confirm, dialog is not available on Firefox, polyfill only works if dialog is a direct child of body \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug b/src/views/partials/widgets/hubl-menu-fix-url-circle.pug index 53188da..2f88368 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug +++ b/src/views/partials/widgets/hubl-menu-fix-url-circle.pug @@ -2,5 +2,5 @@ if componentSet.has('circles') solid-widget(name='hubl-menu-fix-url-circle') template ${value != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug b/src/views/partials/widgets/hubl-menu-fix-url-contact.pug index 0dc51e3..74188e9 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug +++ b/src/views/partials/widgets/hubl-menu-fix-url-contact.pug @@ -2,5 +2,5 @@ if componentSet.has('chat') solid-widget(name='hubl-menu-fix-url-contact') template ${value != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-project.pug b/src/views/partials/widgets/hubl-menu-fix-url-project.pug index b764d4d..9e4794f 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-project.pug +++ b/src/views/partials/widgets/hubl-menu-fix-url-project.pug @@ -2,5 +2,5 @@ if componentSet.has('projects') solid-widget(name='hubl-menu-fix-url-project') template ${value != "" ? ` - + ` : ""} \ No newline at end of file