fix: various menu fixes & improvements

This commit is contained in:
Jean-Baptiste Pasquier 2021-04-06 13:24:07 +02:00
parent dba3f11cd2
commit aa236d0604
10 changed files with 165 additions and 98 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.02em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1040 1024"><path d="M1031 969L720 656q93-111 93-256q0-109-53.5-201t-146-145.5T412.5 0T212 53.5T66.5 199T13 400t53.5 201T212 746.5T413 800q149 0 262-98l310 312q10 10 23 10t22.5-9.5t9.5-23t-9-22.5zM413 737q-92 0-169.5-45.5T121 568.5T76 400t45-168.5t122.5-123t169-45.5t169 45.5t122.5 123T749 400q0 39-9 77t-25.5 71t-39.5 62.5t-52 52.5t-62 39.5t-71 25.5t-77 9z" fill="#ffffff" opacity="0.1"/></svg>

After

Width:  |  Height:  |  Size: 692 B

View File

@ -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);
}
})
});

View File

@ -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;

View File

@ -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;

View File

@ -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;
}
}
}
}

View File

@ -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")

View File

@ -1,4 +1,5 @@
if componentSet.has('chat')
solid-widget(name='hubl-menu-contact-removed')
template ${value != "" ? `
<solid-delete class="button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="dialog" confirmation-message="Vous êtes sur le point de retirer ce contact. Etes-vous sûr ?" confirmation-submit-text="Oui, valider" confirmation-cancel-text="Non, c'est une erreur" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-secondary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-secondary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}
<solid-delete class="menu-delete-button button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="confirm" confirmation-message="Vous êtes sur le point de retirer ce contact. Etes-vous sûr ?" confirmation-submit-text="Oui, valider" confirmation-cancel-text="Non, c'est une erreur" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-secondary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-secondary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}
//- Fix: using type confirm, dialog is not available on Firefox, polyfill only works if dialog is a direct child of body

View File

@ -2,5 +2,5 @@ if componentSet.has('circles')
solid-widget(name='hubl-menu-fix-url-circle')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('circles', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
</solid-link>` : ""}

View File

@ -2,5 +2,5 @@ if componentSet.has('chat')
solid-widget(name='hubl-menu-fix-url-contact')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('chat', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
</solid-link>` : ""}

View File

@ -2,5 +2,5 @@ if componentSet.has('projects')
solid-widget(name='hubl-menu-fix-url-project')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('projects', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
</solid-link>` : ""}