From dbedcf83ece647c462259391b93fd6a6210b1987 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Wed, 2 Feb 2022 14:28:13 -0500 Subject: [PATCH 01/22] #64: Removed dangling css code --- app/src/App.vue | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/src/App.vue b/app/src/App.vue index ad17826e..a4159366 100644 --- a/app/src/App.vue +++ b/app/src/App.vue @@ -5,11 +5,5 @@ From a529ba38e0afb1806ed98033b33fe6f7fb6ebdd1 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Wed, 2 Feb 2022 14:31:34 -0500 Subject: [PATCH 02/22] #64: Updated global app css --- app/src/assets/css/base/_reset.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/src/assets/css/base/_reset.scss b/app/src/assets/css/base/_reset.scss index 5eec2270..859debaa 100644 --- a/app/src/assets/css/base/_reset.scss +++ b/app/src/assets/css/base/_reset.scss @@ -42,11 +42,12 @@ img { text-shadow: none; } -#nanomine_app, -#metamine_app { +#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; background-color: white; + color: $primary; + background-color: $primary-white; } \ No newline at end of file From a696b794278541c5b04fbe6c117a2ab1aeed7414 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:28:46 -0500 Subject: [PATCH 03/22] #64: Added flat input styling --- app/src/assets/css/modules/_form.scss | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/app/src/assets/css/modules/_form.scss b/app/src/assets/css/modules/_form.scss index dc7955d9..9269929a 100644 --- a/app/src/assets/css/modules/_form.scss +++ b/app/src/assets/css/modules/_form.scss @@ -42,6 +42,31 @@ border: .15rem solid $tertiary; } } + + &--flat { + border: none; + border-bottom: .15rem solid $primary-white; + font-size: inherit; + color: $primary-white; + background-color: transparent; + padding: .5rem .2rem; + + &:focus { + border-bottom: .15rem solid $primary-white; + background-color: transparent; + } + + &:focus:invalid { + border-bottom: .15rem solid $tertiary; + } + &::-webkit-input-placeholder { + color: $primary-white; + } + + &-label { + color: $primary-white; + } + } } From 88cf8163b3937d06eca9c90f7d2bc1e12347df5f Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:29:56 -0500 Subject: [PATCH 04/22] #64: Updated button styling --- app/src/assets/css/modules/_pages.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss index 28f98e61..a5a423f9 100644 --- a/app/src/assets/css/modules/_pages.scss +++ b/app/src/assets/css/modules/_pages.scss @@ -32,7 +32,7 @@ } &_btn { display: block !important; - padding: 1.5rem 3.5rem !important; + padding: 1.65rem 3.5rem !important; font-size: 1.2rem; &:hover { transform: translateY(0) !important; From 01d0e363578ad0bb3f14f840bab52c25ac28c97c Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:31:40 -0500 Subject: [PATCH 05/22] #64: Updated styling for facet panel --- app/src/assets/css/modules/_utility.scss | 8 +++++++- app/src/assets/css/style.scss | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss index d3152dcf..8c36735d 100644 --- a/app/src/assets/css/modules/_utility.scss +++ b/app/src/assets/css/modules/_utility.scss @@ -21,6 +21,9 @@ } .u { + &_width--small { + width: 15rem; + } &--bg { background-color: $primary !important; color: $primary-white !important @@ -83,8 +86,11 @@ } &_margin-top { + &-small { + margin-top: 1rem !important; + } &-med { - margin-top: 3.1rem !important; + margin-top: 3.2rem !important; } } diff --git a/app/src/assets/css/style.scss b/app/src/assets/css/style.scss index a9b4dc8e..74fb0b10 100644 --- a/app/src/assets/css/style.scss +++ b/app/src/assets/css/style.scss @@ -4,6 +4,7 @@ @import './base/_reset.scss'; @import './base/_grid.scss'; @import './modules/_button.scss'; +@import './modules/_facet.scss'; @import './modules/_footer.scss'; @import './modules/_form.scss'; @import './modules/_header.scss'; From 07f465859c31a2ac6b9c48a1f3ab35d68f173b02 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:38:01 -0500 Subject: [PATCH 06/22] #64: Append facet import to existing component --- app/src/components/explorer/Header.vue | 21 +++++----- app/src/pages/explorer/Base.vue | 1 + app/src/pages/explorer/Home.vue | 55 +++++++++++++++++--------- 3 files changed, 50 insertions(+), 27 deletions(-) diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue index 11a958b1..db5222a1 100644 --- a/app/src/components/explorer/Header.vue +++ b/app/src/components/explorer/Header.vue @@ -3,7 +3,7 @@
- + menu @@ -11,9 +11,10 @@
- +
+ + +
Avatar @@ -33,13 +34,15 @@
diff --git a/app/src/pages/explorer/Base.vue b/app/src/pages/explorer/Base.vue index 06c99fb8..7f80e1ef 100644 --- a/app/src/pages/explorer/Base.vue +++ b/app/src/pages/explorer/Base.vue @@ -10,6 +10,7 @@ From 2f06dcbb0beadfdf301a046fb0a064e6634ce7c7 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:42:01 -0500 Subject: [PATCH 07/22] #64: Added src code for facet panel --- app/src/assets/css/modules/_facet.scss | 82 ++++++++++++++++ app/src/components/explorer/Facet.vue | 22 +++++ app/src/modules/facet.js | 129 +++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 app/src/assets/css/modules/_facet.scss create mode 100644 app/src/components/explorer/Facet.vue create mode 100644 app/src/modules/facet.js diff --git a/app/src/assets/css/modules/_facet.scss b/app/src/assets/css/modules/_facet.scss new file mode 100644 index 00000000..1408ef6f --- /dev/null +++ b/app/src/assets/css/modules/_facet.scss @@ -0,0 +1,82 @@ +.facet { + z-index: 9; + background-color: $primary-white; + border: 1px solid #d3d3d3; + text-align: center; + min-height: 60px; + min-width: 320px; + max-height: 500px; + max-width: 600px; + opacity: 0; + + &_viewport { + width: 100%; + display: inline-block; + vertical-align: top; + overflow: auto; + border: 1px solid rgba(#000, .12); + } +} + + /*Drgable */ + +.facet { + position: absolute; + /*resize: both; !*enable this to css resize*! */ + overflow: auto; +} + +.md-subheader.facet-header { + min-height: 35px; + padding: 5px; + cursor: move; + z-index: 10; + background-color: $primary; + color: $primary-white !important; + font-weight: bold; + margin-bottom: .2rem; +} + +/*Resizeable*/ +.facet .resizer-right { + width: 5px; + height: 100%; + background: transparent; + position: absolute; + right: 0; + bottom: 0; + cursor: e-resize; +} + +.facet .resizer-bottom { + width: 100%; + height: 5px; + background: transparent; + position: absolute; + right: 0; + bottom: 0; + cursor: n-resize; +} + +.facet .resizer-both { + width: 5px; + height: 5px; + background: transparent; + z-index: 10; + position: absolute; + right: 0; + bottom: 0; + cursor: nw-resize; +} + +/*NOSELECT*/ +.facet * { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome and Opera */ +} + \ No newline at end of file diff --git a/app/src/components/explorer/Facet.vue b/app/src/components/explorer/Facet.vue new file mode 100644 index 00000000..0bb90ccb --- /dev/null +++ b/app/src/components/explorer/Facet.vue @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/app/src/modules/facet.js b/app/src/modules/facet.js new file mode 100644 index 00000000..7e56dbd6 --- /dev/null +++ b/app/src/modules/facet.js @@ -0,0 +1,129 @@ +window.onload = function() { + initDragElement(); + initResizeElement(); + }; + + function initDragElement() { + var pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; + var facets = document.getElementsByClassName("facet"); + var elmnt = null; + var currentZIndex = 100; //TODO reset z index when a threshold is passed + + for (var i = 0; i < facets.length; i++) { + var facet = facets[i]; + var header = getHeader(facet); + + facet.onmousedown = function() { + this.style.zIndex = "" + ++currentZIndex; + }; + + if (header) { + header.parentFacet = facet; + header.onmousedown = dragMouseDown; + } + } + + function dragMouseDown(e) { + elmnt = this.parentFacet; + elmnt.style.zIndex = "" + ++currentZIndex; + + e = e || window.event; + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + // call a function whenever the cursor moves: + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + if (!elmnt) { + return; + } + + e = e || window.event; + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + elmnt.style.top = elmnt.offsetTop - pos2 + "px"; + elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; + } + + function closeDragElement() { + /* stop moving when mouse button is released:*/ + document.onmouseup = null; + document.onmousemove = null; + } + + function getHeader(element) { + var headerItems = element.getElementsByClassName("facet-header"); + + if (headerItems.length === 1) { + return headerItems[0]; + } + + return null; + } + } + + function initResizeElement() { + var facets = document.getElementsByClassName("facet"); + var element = null; + var startX, startY, startWidth, startHeight; + + for (var i = 0; i < facets.length; i++) { + var p = facets[i]; + + var right = document.createElement("div"); + right.className = "resizer-right"; + p.appendChild(right); + right.addEventListener("mousedown", initDrag, false); + right.parentFacet = p; + + var bottom = document.createElement("div"); + bottom.className = "resizer-bottom"; + p.appendChild(bottom); + bottom.addEventListener("mousedown", initDrag, false); + bottom.parentFacet = p; + + var both = document.createElement("div"); + both.className = "resizer-both"; + p.appendChild(both); + both.addEventListener("mousedown", initDrag, false); + both.parentFacet = p; + } + + function initDrag(e) { + element = this.parentFacet + + startX = e.clientX; + startY = e.clientY; + startWidth = parseInt( + document.defaultView.getComputedStyle(element).width, + 10 + ); + startHeight = parseInt( + document.defaultView.getComputedStyle(element).height, + 10 + ); + document.documentElement.addEventListener("mousemove", doDrag, false); + document.documentElement.addEventListener("mouseup", stopDrag, false); + } + + function doDrag(e) { + element.style.width = startWidth + e.clientX - startX + "px"; + element.style.height = startHeight + e.clientY - startY + "px"; + } + + function stopDrag() { + document.documentElement.removeEventListener("mousemove", doDrag, false); + document.documentElement.removeEventListener("mouseup", stopDrag, false); + } + } + \ No newline at end of file From 77a2f480e8631348b9ed2f5ae12250ac971deaf8 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Thu, 3 Feb 2022 23:44:57 -0500 Subject: [PATCH 08/22] #64: Updated global state with facet --- app/src/store/modules/explorer/actions.js | 2 +- app/src/store/modules/explorer/getters.js | 6 ++++++ app/src/store/modules/explorer/index.js | 4 +++- app/src/store/modules/explorer/mutations.js | 10 ++++++++++ 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/app/src/store/modules/explorer/actions.js b/app/src/store/modules/explorer/actions.js index 03048022..d439cd89 100644 --- a/app/src/store/modules/explorer/actions.js +++ b/app/src/store/modules/explorer/actions.js @@ -1,3 +1,3 @@ export default { - + } diff --git a/app/src/store/modules/explorer/getters.js b/app/src/store/modules/explorer/getters.js index 0a1158c5..cfa1cebe 100644 --- a/app/src/store/modules/explorer/getters.js +++ b/app/src/store/modules/explorer/getters.js @@ -1,5 +1,11 @@ export default { menuVisible (state) { return state.toggleMenuVisibility + }, + getSearchKeyword (state) { + return state.searchKeyword + }, + getSearching (state) { + return state.searching } } diff --git a/app/src/store/modules/explorer/index.js b/app/src/store/modules/explorer/index.js index 0a329875..45b694da 100644 --- a/app/src/store/modules/explorer/index.js +++ b/app/src/store/modules/explorer/index.js @@ -6,7 +6,9 @@ export default { namespaced: true, state () { return { - toggleMenuVisibility: false + toggleMenuVisibility: false, + searchKeyword: '', + searching: false } }, mutations, diff --git a/app/src/store/modules/explorer/mutations.js b/app/src/store/modules/explorer/mutations.js index f78a0b3d..9565c5e4 100644 --- a/app/src/store/modules/explorer/mutations.js +++ b/app/src/store/modules/explorer/mutations.js @@ -1,5 +1,15 @@ export default { setMenuVisible (state) { state.toggleMenuVisibility = !state.toggleMenuVisibility + }, + setSearchKeyword (state, payload) { + state.searchKeyword = payload + }, + setSearching (state) { + if(!!state?.searchKeyword?.length){ + state.searching = true + } else { + state.searching = false + } } } From c8b09ee8c4201cf06938ce6bee0dc39a352cec96 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Fri, 4 Feb 2022 01:34:30 -0500 Subject: [PATCH 09/22] #64: Update header to return to home if search string is empty --- app/src/components/explorer/Header.vue | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue index db5222a1..7772a9df 100644 --- a/app/src/components/explorer/Header.vue +++ b/app/src/components/explorer/Header.vue @@ -34,15 +34,24 @@
From ca79bbd6ee82f98f615bd6a36c7a6e47ec1e4df9 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Sun, 6 Feb 2022 22:07:21 -0500 Subject: [PATCH 10/22] #64: Updated facet opacity --- app/src/assets/css/modules/_facet.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/src/assets/css/modules/_facet.scss b/app/src/assets/css/modules/_facet.scss index 1408ef6f..d7809ce5 100644 --- a/app/src/assets/css/modules/_facet.scss +++ b/app/src/assets/css/modules/_facet.scss @@ -16,6 +16,10 @@ overflow: auto; border: 1px solid rgba(#000, .12); } + + &_active { + opacity: 0.8; + } } /*Drgable */ From 26f315fd9b83acb8ad7bb9cc1915d9b0d9a14222 Mon Sep 17 00:00:00 2001 From: tholulomo Date: Sun, 6 Feb 2022 22:10:22 -0500 Subject: [PATCH 11/22] #64: Updated facet code to trigger on component mount instead of window load --- app/src/modules/facet.js | 248 ++++++++++++++++++++------------------- 1 file changed, 125 insertions(+), 123 deletions(-) diff --git a/app/src/modules/facet.js b/app/src/modules/facet.js index 7e56dbd6..85a2ca5e 100644 --- a/app/src/modules/facet.js +++ b/app/src/modules/facet.js @@ -1,129 +1,131 @@ -window.onload = function() { - initDragElement(); - initResizeElement(); - }; - - function initDragElement() { - var pos1 = 0, - pos2 = 0, - pos3 = 0, - pos4 = 0; - var facets = document.getElementsByClassName("facet"); - var elmnt = null; - var currentZIndex = 100; //TODO reset z index when a threshold is passed - - for (var i = 0; i < facets.length; i++) { - var facet = facets[i]; - var header = getHeader(facet); - - facet.onmousedown = function() { - this.style.zIndex = "" + ++currentZIndex; - }; - - if (header) { - header.parentFacet = facet; - header.onmousedown = dragMouseDown; - } - } - - function dragMouseDown(e) { - elmnt = this.parentFacet; - elmnt.style.zIndex = "" + ++currentZIndex; - - e = e || window.event; - // get the mouse cursor position at startup: - pos3 = e.clientX; - pos4 = e.clientY; - document.onmouseup = closeDragElement; - // call a function whenever the cursor moves: - document.onmousemove = elementDrag; - } - - function elementDrag(e) { - if (!elmnt) { - return; - } - - e = e || window.event; - // calculate the new cursor position: - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; - // set the element's new position: - elmnt.style.top = elmnt.offsetTop - pos2 + "px"; - elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; - } - - function closeDragElement() { - /* stop moving when mouse button is released:*/ - document.onmouseup = null; - document.onmousemove = null; - } - - function getHeader(element) { - var headerItems = element.getElementsByClassName("facet-header"); - - if (headerItems.length === 1) { - return headerItems[0]; - } - - return null; +const Facet = function() { + initDragElement(); + initResizeElement(); +}; + +function initDragElement() { + var pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; + var facets = document.getElementsByClassName("facet"); + var elmnt = null; + var currentZIndex = 100; //TODO reset z index when a threshold is passed + + for (var i = 0; i < facets.length; i++) { + var facet = facets[i]; + var header = getHeader(facet); + + facet.onmousedown = function() { + this.style.zIndex = "" + ++currentZIndex; + }; + + if (header) { + header.parentFacet = facet; + header.onmousedown = dragMouseDown; } } - - function initResizeElement() { - var facets = document.getElementsByClassName("facet"); - var element = null; - var startX, startY, startWidth, startHeight; - - for (var i = 0; i < facets.length; i++) { - var p = facets[i]; - - var right = document.createElement("div"); - right.className = "resizer-right"; - p.appendChild(right); - right.addEventListener("mousedown", initDrag, false); - right.parentFacet = p; - - var bottom = document.createElement("div"); - bottom.className = "resizer-bottom"; - p.appendChild(bottom); - bottom.addEventListener("mousedown", initDrag, false); - bottom.parentFacet = p; - - var both = document.createElement("div"); - both.className = "resizer-both"; - p.appendChild(both); - both.addEventListener("mousedown", initDrag, false); - both.parentFacet = p; - } - - function initDrag(e) { - element = this.parentFacet - - startX = e.clientX; - startY = e.clientY; - startWidth = parseInt( - document.defaultView.getComputedStyle(element).width, - 10 - ); - startHeight = parseInt( - document.defaultView.getComputedStyle(element).height, - 10 - ); - document.documentElement.addEventListener("mousemove", doDrag, false); - document.documentElement.addEventListener("mouseup", stopDrag, false); - } - - function doDrag(e) { - element.style.width = startWidth + e.clientX - startX + "px"; - element.style.height = startHeight + e.clientY - startY + "px"; + + function dragMouseDown(e) { + elmnt = this.parentFacet; + elmnt.style.zIndex = "" + ++currentZIndex; + + e = e || window.event; + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + // call a function whenever the cursor moves: + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + if (!elmnt) { + return; } - - function stopDrag() { - document.documentElement.removeEventListener("mousemove", doDrag, false); - document.documentElement.removeEventListener("mouseup", stopDrag, false); + + e = e || window.event; + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + elmnt.style.top = elmnt.offsetTop - pos2 + "px"; + elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; + } + + function closeDragElement() { + /* stop moving when mouse button is released:*/ + document.onmouseup = null; + document.onmousemove = null; + } + + function getHeader(element) { + var headerItems = element.getElementsByClassName("facet-header"); + + if (headerItems.length === 1) { + return headerItems[0]; } + + return null; + } +} + +function initResizeElement() { + var facets = document.getElementsByClassName("facet"); + var element = null; + var startX, startY, startWidth, startHeight; + + for (var i = 0; i < facets.length; i++) { + var p = facets[i]; + + var right = document.createElement("div"); + right.className = "resizer-right"; + p.appendChild(right); + right.addEventListener("mousedown", initDrag, false); + right.parentFacet = p; + + var bottom = document.createElement("div"); + bottom.className = "resizer-bottom"; + p.appendChild(bottom); + bottom.addEventListener("mousedown", initDrag, false); + bottom.parentFacet = p; + + var both = document.createElement("div"); + both.className = "resizer-both"; + p.appendChild(both); + both.addEventListener("mousedown", initDrag, false); + both.parentFacet = p; + } + + function initDrag(e) { + element = this.parentFacet + + startX = e.clientX; + startY = e.clientY; + startWidth = parseInt( + document.defaultView.getComputedStyle(element).width, + 10 + ); + startHeight = parseInt( + document.defaultView.getComputedStyle(element).height, + 10 + ); + document.documentElement.addEventListener("mousemove", doDrag, false); + document.documentElement.addEventListener("mouseup", stopDrag, false); + } + + function doDrag(e) { + element.style.width = startWidth + e.clientX - startX + "px"; + element.style.height = startHeight + e.clientY - startY + "px"; + } + + function stopDrag() { + document.documentElement.removeEventListener("mousemove", doDrag, false); + document.documentElement.removeEventListener("mouseup", stopDrag, false); } +} + +export default Facet \ No newline at end of file From 3b0e47d1d9faff9135ed71d50b665248dc334e5a Mon Sep 17 00:00:00 2001 From: tholulomo Date: Sun, 6 Feb 2022 22:11:31 -0500 Subject: [PATCH 12/22] #64: Mounting facetjs on component load --- app/src/components/explorer/Facet.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/app/src/components/explorer/Facet.vue b/app/src/components/explorer/Facet.vue index 0bb90ccb..30865592 100644 --- a/app/src/components/explorer/Facet.vue +++ b/app/src/components/explorer/Facet.vue @@ -1,5 +1,5 @@ - \ No newline at end of file +} + \ No newline at end of file From 7742bfc8803fef4cecab645cc6ae15f27bde4e4d Mon Sep 17 00:00:00 2001 From: tholulomo Date: Sun, 6 Feb 2022 22:14:27 -0500 Subject: [PATCH 13/22] #64: Removed facetjs import from base component --- app/src/pages/explorer/Base.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/app/src/pages/explorer/Base.vue b/app/src/pages/explorer/Base.vue index 7f80e1ef..06c99fb8 100644 --- a/app/src/pages/explorer/Base.vue +++ b/app/src/pages/explorer/Base.vue @@ -10,7 +10,6 @@ \ No newline at end of file + diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue index 7772a9df..fba6a2cb 100644 --- a/app/src/components/explorer/Header.vue +++ b/app/src/components/explorer/Header.vue @@ -39,19 +39,19 @@ export default { props: ['toggler'], computed: { searchTerm: { - get(){ - return this.$store.getters['explorer/getSearchKeyword'] - }, - set (payload) { - this.$store.commit('explorer/setSearchKeyword', payload) + get () { + return this.$store.getters['explorer/getSearchKeyword'] + }, + set (payload) { + this.$store.commit('explorer/setSearchKeyword', payload) if (!payload) { this.$store.commit('explorer/setSearching') } - } - }, - searchEnabled(){ - return this.$store.getters['explorer/getSearching'] - } - }, + } + }, + searchEnabled () { + return this.$store.getters['explorer/getSearching'] + } + } } diff --git a/app/src/modules/facet.js b/app/src/modules/facet.js index 85a2ca5e..c5eaa9e4 100644 --- a/app/src/modules/facet.js +++ b/app/src/modules/facet.js @@ -1,131 +1,130 @@ -const Facet = function() { - initDragElement(); - initResizeElement(); -}; - -function initDragElement() { - var pos1 = 0, - pos2 = 0, - pos3 = 0, - pos4 = 0; - var facets = document.getElementsByClassName("facet"); - var elmnt = null; - var currentZIndex = 100; //TODO reset z index when a threshold is passed +const Facet = function () { + initDragElement() + initResizeElement() +} + +function initDragElement () { + var pos1 = 0 + var pos2 = 0 + var pos3 = 0 + var pos4 = 0 + var facets = document.getElementsByClassName('facet') + var elmnt = null + var currentZIndex = 100 // TODO reset z index when a threshold is passed for (var i = 0; i < facets.length; i++) { - var facet = facets[i]; - var header = getHeader(facet); + var facet = facets[i] + var header = getHeader(facet) - facet.onmousedown = function() { - this.style.zIndex = "" + ++currentZIndex; - }; + facet.onmousedown = function () { + this.style.zIndex = '' + ++currentZIndex + } if (header) { - header.parentFacet = facet; - header.onmousedown = dragMouseDown; + header.parentFacet = facet + header.onmousedown = dragMouseDown } } - function dragMouseDown(e) { - elmnt = this.parentFacet; - elmnt.style.zIndex = "" + ++currentZIndex; + function dragMouseDown (e) { + elmnt = this.parentFacet + elmnt.style.zIndex = '' + ++currentZIndex - e = e || window.event; + e = e || window.event // get the mouse cursor position at startup: - pos3 = e.clientX; - pos4 = e.clientY; - document.onmouseup = closeDragElement; + pos3 = e.clientX + pos4 = e.clientY + document.onmouseup = closeDragElement // call a function whenever the cursor moves: - document.onmousemove = elementDrag; + document.onmousemove = elementDrag } - function elementDrag(e) { + function elementDrag (e) { if (!elmnt) { - return; + return } - e = e || window.event; + e = e || window.event // calculate the new cursor position: - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; + pos1 = pos3 - e.clientX + pos2 = pos4 - e.clientY + pos3 = e.clientX + pos4 = e.clientY // set the element's new position: - elmnt.style.top = elmnt.offsetTop - pos2 + "px"; - elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; + elmnt.style.top = elmnt.offsetTop - pos2 + 'px' + elmnt.style.left = elmnt.offsetLeft - pos1 + 'px' } - function closeDragElement() { - /* stop moving when mouse button is released:*/ - document.onmouseup = null; - document.onmousemove = null; + function closeDragElement () { + /* stop moving when mouse button is released: */ + document.onmouseup = null + document.onmousemove = null } - function getHeader(element) { - var headerItems = element.getElementsByClassName("facet-header"); + function getHeader (element) { + var headerItems = element.getElementsByClassName('facet-header') if (headerItems.length === 1) { - return headerItems[0]; + return headerItems[0] } - return null; + return null } } - -function initResizeElement() { - var facets = document.getElementsByClassName("facet"); - var element = null; - var startX, startY, startWidth, startHeight; + +function initResizeElement () { + var facets = document.getElementsByClassName('facet') + var element = null + var startX, startY, startWidth, startHeight for (var i = 0; i < facets.length; i++) { - var p = facets[i]; - - var right = document.createElement("div"); - right.className = "resizer-right"; - p.appendChild(right); - right.addEventListener("mousedown", initDrag, false); - right.parentFacet = p; - - var bottom = document.createElement("div"); - bottom.className = "resizer-bottom"; - p.appendChild(bottom); - bottom.addEventListener("mousedown", initDrag, false); - bottom.parentFacet = p; - - var both = document.createElement("div"); - both.className = "resizer-both"; - p.appendChild(both); - both.addEventListener("mousedown", initDrag, false); - both.parentFacet = p; + var p = facets[i] + + var right = document.createElement('div') + right.className = 'resizer-right' + p.appendChild(right) + right.addEventListener('mousedown', initDrag, false) + right.parentFacet = p + + var bottom = document.createElement('div') + bottom.className = 'resizer-bottom' + p.appendChild(bottom) + bottom.addEventListener('mousedown', initDrag, false) + bottom.parentFacet = p + + var both = document.createElement('div') + both.className = 'resizer-both' + p.appendChild(both) + both.addEventListener('mousedown', initDrag, false) + both.parentFacet = p } - function initDrag(e) { + function initDrag (e) { element = this.parentFacet - startX = e.clientX; - startY = e.clientY; + startX = e.clientX + startY = e.clientY startWidth = parseInt( document.defaultView.getComputedStyle(element).width, 10 - ); + ) startHeight = parseInt( document.defaultView.getComputedStyle(element).height, 10 - ); - document.documentElement.addEventListener("mousemove", doDrag, false); - document.documentElement.addEventListener("mouseup", stopDrag, false); + ) + document.documentElement.addEventListener('mousemove', doDrag, false) + document.documentElement.addEventListener('mouseup', stopDrag, false) } - function doDrag(e) { - element.style.width = startWidth + e.clientX - startX + "px"; - element.style.height = startHeight + e.clientY - startY + "px"; + function doDrag (e) { + element.style.width = startWidth + e.clientX - startX + 'px' + element.style.height = startHeight + e.clientY - startY + 'px' } - function stopDrag() { - document.documentElement.removeEventListener("mousemove", doDrag, false); - document.documentElement.removeEventListener("mouseup", stopDrag, false); + function stopDrag () { + document.documentElement.removeEventListener('mousemove', doDrag, false) + document.documentElement.removeEventListener('mouseup', stopDrag, false) } } export default Facet - \ No newline at end of file diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue index 8ea83be1..35224075 100644 --- a/app/src/pages/explorer/Home.vue +++ b/app/src/pages/explorer/Home.vue @@ -44,34 +44,34 @@ import { mapMutations } from 'vuex' import FacetPanel from '@/components/explorer/Facet.vue' export default { - name: 'ExplorerHome', - data () { - return { - pageNavLinks: [ - { icon: 'grid_view', text: 'Gallery', link: '' }, - { icon: 'cloud_upload', text: 'Curate', link: '' }, - { icon: 'help', text: 'Help', link: '' } - ], - } - }, - computed: { - searchWord: { - get(){ - return this.$store.getters['explorer/getSearchKeyword'] - }, - set (payload) { - return this.$store.commit('explorer/setSearchKeyword', payload) - } - }, - searchEnabled(){ - return this.$store.getters['explorer/getSearching'] - } - }, - components: { - FacetPanel - }, - methods: { - ...mapMutations('explorer', ['setSearching']) - } + name: 'ExplorerHome', + data () { + return { + pageNavLinks: [ + { icon: 'grid_view', text: 'Gallery', link: '' }, + { icon: 'cloud_upload', text: 'Curate', link: '' }, + { icon: 'help', text: 'Help', link: '' } + ] + } + }, + computed: { + searchWord: { + get () { + return this.$store.getters['explorer/getSearchKeyword'] + }, + set (payload) { + return this.$store.commit('explorer/setSearchKeyword', payload) + } + }, + searchEnabled () { + return this.$store.getters['explorer/getSearching'] + } + }, + components: { + FacetPanel + }, + methods: { + ...mapMutations('explorer', ['setSearching']) + } } diff --git a/app/src/store/modules/explorer/actions.js b/app/src/store/modules/explorer/actions.js index d439cd89..03048022 100644 --- a/app/src/store/modules/explorer/actions.js +++ b/app/src/store/modules/explorer/actions.js @@ -1,3 +1,3 @@ export default { - + } diff --git a/app/src/store/modules/explorer/mutations.js b/app/src/store/modules/explorer/mutations.js index 9565c5e4..01d32e8e 100644 --- a/app/src/store/modules/explorer/mutations.js +++ b/app/src/store/modules/explorer/mutations.js @@ -6,7 +6,7 @@ export default { state.searchKeyword = payload }, setSearching (state) { - if(!!state?.searchKeyword?.length){ + if (state?.searchKeyword?.length) { state.searching = true } else { state.searching = false From d539491a872d4b7909a337c0ccd8907082b7f58c Mon Sep 17 00:00:00 2001 From: tholulomo Date: Mon, 7 Feb 2022 01:21:27 -0500 Subject: [PATCH 18/22] #64: Added lodash for testing purpose --- app/package-lock.json | 1 + app/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/app/package-lock.json b/app/package-lock.json index 0c99e4b2..14f69600 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -34,6 +34,7 @@ "eslint-plugin-vue": "^6.2.2", "jest-serializer-vue": "^2.0.2", "lint-staged": "^9.5.0", + "lodash": "^4.17.21", "sass": "^1.26.5", "sass-loader": "^8.0.2", "sinon": "^12.0.1", diff --git a/app/package.json b/app/package.json index ac4635e7..33268248 100644 --- a/app/package.json +++ b/app/package.json @@ -47,6 +47,7 @@ "eslint-plugin-vue": "^6.2.2", "jest-serializer-vue": "^2.0.2", "lint-staged": "^9.5.0", + "lodash": "^4.17.21", "sass": "^1.26.5", "sass-loader": "^8.0.2", "sinon": "^12.0.1", From f9a2425895d08f75749b23e375445ac5a5811fbb Mon Sep 17 00:00:00 2001 From: tholulomo Date: Mon, 7 Feb 2022 01:22:52 -0500 Subject: [PATCH 19/22] #64: Created a re-usable wrapper for testing --- app/tests/jest/script/wrapper.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 app/tests/jest/script/wrapper.js diff --git a/app/tests/jest/script/wrapper.js b/app/tests/jest/script/wrapper.js new file mode 100644 index 00000000..26c17fb5 --- /dev/null +++ b/app/tests/jest/script/wrapper.js @@ -0,0 +1,32 @@ +import _ from 'lodash' +import VueMaterial from 'vue-material' +import store from '@/store' +import router from '@/router' +import { mount, createLocalVue, shallowMount } from '@vue/test-utils' + +/** Add external plugins as needed */ +const localVue = createLocalVue() +localVue.use(VueMaterial) + +/** + * createWrapper - creates a default mount wrapper for all components + * @param {*} component vue component to test + * @param {*} overrides props override + * @param {Boolean} useMount true for mount and false for shallowMount + * @returns {*} Vue Wrapper + */ +function createWrapper (component, overrides, useMount = true) { + const mountType = !useMount ? shallowMount : mount + const defaultMountOptions = { + localVue, + // mocks: { + // $router: _.merge({ push: jest.fn() }, overrides.router || {}) + // }, + router, + store, + propsData: _.merge({}, overrides) + } + return mountType(component, defaultMountOptions) +} + +export default createWrapper \ No newline at end of file From 2712bad3c2c905d0aa69830cca6326135e5ae4bb Mon Sep 17 00:00:00 2001 From: tholulomo Date: Mon, 7 Feb 2022 01:23:31 -0500 Subject: [PATCH 20/22] #64: Adjusted indentation --- app/src/pages/explorer/Home.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue index 35224075..1d8d05e8 100644 --- a/app/src/pages/explorer/Home.vue +++ b/app/src/pages/explorer/Home.vue @@ -1,14 +1,14 @@