From 377abe2c6204aa5b94773a02079451a0a44791ce Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 19:33:10 +0200 Subject: [PATCH] patch: left-menu - refactoring + styles on widget to remove a contact --- package-lock.json | 6 +- package.json | 2 +- src/scripts/menu-search-control.js | 7 + src/scripts/navigate-event.js | 6 - src/styles/left-nav/_index.scss | 184 ++++++++++++------ src/views/partials/menu-left.pug | 5 +- src/views/partials/widgets.pug | 1 + .../widgets/hubl-menu-contact-removed.pug | 2 +- 8 files changed, 139 insertions(+), 74 deletions(-) create mode 100644 src/scripts/menu-search-control.js diff --git a/package-lock.json b/package-lock.json index aeda57c..1fad494 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,9 +1159,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.8.14", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz", - "integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw==" + "version": "1.8.15", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.15.tgz", + "integrity": "sha512-2bK5zsHOxI0wekAyIhI2MkD1FcWBuNnWpmrDigxHRrsO4kFDOGvIyIewW//5dZjwaL4aTgZzRFvEYb7kNSYYyg==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index d732abc..eb6b566 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@startinblox/hubl-styling-framework": "^1.8.14", + "@startinblox/hubl-styling-framework": "^1.8.15", "cross-env": "^7.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js new file mode 100644 index 0000000..bd98663 --- /dev/null +++ b/src/scripts/menu-search-control.js @@ -0,0 +1,7 @@ + +document.addEventListener("DOMContentLoaded", () => { + const searchField = document.querySelector('.menu-search'); + console.log(searchField); + const leform = searchField.querySelector('form'); + console.log(leform); +}); \ No newline at end of file diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index 3f9a320..5a25fbb 100644 --- a/src/scripts/navigate-event.js +++ b/src/scripts/navigate-event.js @@ -17,12 +17,6 @@ MenuTabs.forEach(menuTab => { }); }); -// const searchField = document.querySelector('.menu-search'); -// console.log(searchField); -// const leform = searchField.querySelector('form'); -// console.log(leform); - - // auxiliary function closes the user profile menu function closeUserControls() { let userControls = Array.from(document.querySelectorAll(".user-controls")); diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 480e223..2fc7433 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -9,6 +9,15 @@ nav#main__menu { font-weight: bolder; } + .badge { + float: right; + margin-right: 2px; + } + + .icon { + padding: 3px; + } + .menu-search { form { @@ -52,68 +61,64 @@ nav#main__menu { button { background: transparent; } - - input:focus ~ button { - background-color: red !important; - } } .menu-header { + /* Chevron animation */ + .transform-up { + transform: rotateX(180deg); + } + + .badge { + padding-top: 2px; + margin-right: 5px; + } + + /* For the icon and the small sub-sub-menu*/ &:not(:hover) .menu-options, &:not(:hover) .menu-admin { display: none; } - } - .transform-up { - transform: rotateX(180deg); - } + .menu-options { + float: right; + } - .badge { - padding-top: 2px; - margin-right: 5px; - } - - .icon { - padding: 3px; - } - - .menu-admin { - position: absolute; - z-index: 3016; - left: 48px; - bottom: 37px; - - @media (max-width: 768px) { - width: 100%; - left: 0; - height: 9vh; - top: 0; + .menu-admin { + position: absolute; + z-index: 3016; + left: 48px; + bottom: 37px; + + @media (max-width: 768px) { + width: 100%; + left: 0; + height: 9vh; + top: 0; + } } } - /* Styles for the small icon */ - .sub-menu-icon { - margin-left: 3px; - opacity: 0.8; - width: 12px; - >div { - line-height: 19px; + .sub-menu { + + /* Styles for the small icon */ + .sub-menu-icon { + margin-left: 3px; + opacity: 0.8; + width: 12px; + >div { + line-height: 19px; + } + } + + .sub-menu-name { + margin-right: 15px; + margin-left: 3px; + vertical-align: middle; } } - .sub-menu-name { - margin-right: 15px; - margin-left: 3px; - vertical-align: middle; - } - - .menu-options { - float: right; - } - - /* Ellipsis */ .ellipsis { @@ -137,16 +142,11 @@ nav#main__menu { } } - .menu-header>div:not(.transform-up)~.badge { - display: none; - } - - .menu-header>div.transform-up~.badge { - display: block; - } - - .badge { - float: right; + .empty { + display: flex; + flex-wrap: wrap; + padding-left: 13px; + width: 87%; } .divider { @@ -155,13 +155,75 @@ nav#main__menu { opacity: 0.2; } - .empty { - display: flex; - flex-wrap: wrap; - padding-left: 13px; - width: 87%; + + /* Header's general counter appear or disappear on click (JS animation) */ + .menu-header>div:not(.transform-up)~.badge { + display: none; } + .menu-header>div.transform-up~.badge { + display: block; + } + /* End */ + + /* The little cross icon on contacts' name appears or disapear + hover + styles */ + .sub-menu__contacts>div>solid-display { + + hubl-menu-contact-removed { + display: none; + } + } + + .sub-menu__contacts>div>solid-display { + + &:hover { + display: flex; + + hubl-menu-fix-url-contact { + width: 100%; + background: #202B3C; + } + + hubl-menu-contact-removed { + display: block; + background: #202B3C; + padding-top: 5px; + margin-left: auto; + padding-right: 10px; + + .button-remove button::before { + font-size: 18px; + color: white; + } + } + } + } + /* End */ + + /* Modal to keep/remove a contact */ + hubl-menu-contact-removed dialog { + border: none; + padding: 60px 30px; + text-align: center; + + @media (max-width: 768px) { + width: 100vw; + } + + p { + margin-bottom: 30px; + font-size: 16px; + } + + &::before, + p::before, + div::before, + button::before { + display: none; + } + } + /* End */ + &.jsLeftMenu { display: inline-block; diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index 23a74ea..e3e6943 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -77,13 +77,14 @@ solid-router#navbar-router(default-route='dashboard') div div div - solid-display.segment.full.whitespace-normal( + solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal( bind-user nested-field='contacts' - fields='contact' + fields='contact, @id' loader-id=`loader-${component.route}` empty-widget='hubl-menu-empty' widget-contact='hubl-menu-fix-url-contact' + widget-id='hubl-menu-contact-removed' filtered-by="general-search" order-asc="contact.username" ) diff --git a/src/views/partials/widgets.pug b/src/views/partials/widgets.pug index b50b178..09e01a2 100644 --- a/src/views/partials/widgets.pug +++ b/src/views/partials/widgets.pug @@ -25,6 +25,7 @@ include widgets/hubl-email-field.pug include widgets/hubl-menu-empty.pug include widgets/hubl-menu-fix-url-circle.pug include widgets/hubl-menu-fix-url-contact.pug +include widgets/hubl-menu-contact-removed.pug include widgets/hubl-menu-fix-url-project.pug include widgets/hubl-menu-jabberid.pug include widgets/hubl-menu-publicprivate.pug diff --git a/src/views/partials/widgets/hubl-menu-contact-removed.pug b/src/views/partials/widgets/hubl-menu-contact-removed.pug index 392e52a..fa43e3e 100644 --- a/src/views/partials/widgets/hubl-menu-contact-removed.pug +++ b/src/views/partials/widgets/hubl-menu-contact-removed.pug @@ -1,4 +1,4 @@ if componentSet.has('chat') solid-widget(name='hubl-menu-contact-removed') template ${value != "" ? ` - ` : ""} + ` : ""}