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 != "" ? `
- ` : ""}
+ ` : ""}