From 9ec7503370229c17cf8a0d3cf77571010db04a9b Mon Sep 17 00:00:00 2001 From: geireann Date: Thu, 14 Apr 2022 17:40:10 -0400 Subject: presesntation groups --- src/client/views/nodes/trails/PresElementBox.scss | 78 ++++++++++++++++++++++- 1 file changed, 75 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes/trails/PresElementBox.scss') diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss index 1ad4b820e..dd0520bad 100644 --- a/src/client/views/nodes/trails/PresElementBox.scss +++ b/src/client/views/nodes/trails/PresElementBox.scss @@ -195,6 +195,47 @@ $slide-active: #5B9FDD; box-shadow: 0 0 0px 1.5px $dark-blue; } +.presItem-slide.group { + border-radius: 5px; +} + +.presItem-slide.activeGroup { + border-radius: 5px; + box-shadow: 0 0 0px 1.5px $dark-blue; +} + +.presItem-groupSlideContainer { + position: absolute; + /* grid-row: 3; */ + /* grid-column: 1/8; */ + top: 28; + display: block; + background: #92adb9; + width: 100%; + height: 10px; + border-radius: 0px 0px 5px 5px; + height: calc(100% - 28px); + display: grid; + grid-template-rows: auto auto auto; + grid-template-columns: 100%; + justify-items: left; + align-items: center; +} + +.presItem-groupSlide { + position: relative; + background-color: #d5dce2; + border-radius: 5px; + height: calc(100% - 7px); + width: calc(100% - 20px); + left: 15px; + /* height: 20px; */ + /* width: calc(100% - 19px); */ + display: flex; + grid-template-rows: 16px 10px auto; + grid-template-columns: max-content max-content max-content max-content auto; +} + .presItem-multiDrag { font-family: Roboto; font-weight: 600; @@ -230,6 +271,37 @@ $slide-active: #5B9FDD; box-shadow: 0 0 0px 1.5px $dark-blue; } -// .presItem-slide:hover { -// background: $slide-hover; -// } \ No newline at end of file +.expandButton { + cursor: pointer; + position: absolute; + border-radius: 100px; + bottom: 0; + left: -18; + z-index: 300; + width: 15px; + height: 15px; + display: flex; + font-size: 12px; + justify-self: center; + align-self: center; + background-color: #92adb9; + color: white; + justify-content: center; + align-items: center; + transition: 0.2s; + margin-right: 3px; +} + +.expandButton:hover { + background-color: rgba(0, 0, 0, 1); + transform: scale(1.2); +} + +.presItem-groupNum { + color: #d5dce2; + position: absolute; + left: -15px; + top: 1; + font-weight: 600; + font-size: 12; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 32d9fcec5f3714186ca86872d085063c11f6f13d Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 6 Jun 2022 19:18:58 -0400 Subject: fixed dragging pres elements when presbox is not selected to not display drag element covering entire screen. --- src/client/views/nodes/trails/PresBox.tsx | 4 ++-- src/client/views/nodes/trails/PresElementBox.scss | 4 ++-- src/client/views/nodes/trails/PresElementBox.tsx | 7 +++---- 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes/trails/PresElementBox.scss') diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index aa89b8b6c..71e424f72 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -801,13 +801,13 @@ export class PresBox extends ViewBoxBaseComponent() { //regular click @action - regularSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean) => { + regularSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean, selectPres = true) => { this._selectedArray.clear(); this._selectedArray.set(doc, undefined); this._eleArray.splice(0, this._eleArray.length, ref); this._dragArray.splice(0, this._dragArray.length, drag); focus && this.selectElement(doc); - this.selectPres(); + selectPres && this.selectPres(); } modifierSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean, cmdClick: boolean, shiftClick: boolean) => { diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss index 789a6d9f3..19644dd78 100644 --- a/src/client/views/nodes/trails/PresElementBox.scss +++ b/src/client/views/nodes/trails/PresElementBox.scss @@ -192,7 +192,7 @@ $slide-active: #5B9FDD; // } .presItem-slide.active { - box-shadow: 0 0 0px 1.5px $dark-blue; + box-shadow: 0 0 0px 2.5px $dark-blue; } .presItem-slide.group { @@ -201,7 +201,7 @@ $slide-active: #5B9FDD; .presItem-slide.activeGroup { border-radius: 5px; - box-shadow: 0 0 0px 1.5px $dark-blue; + box-shadow: 0 0 0px 2.5px $dark-blue; } .presItem-groupSlideContainer { diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index bbabcb2de..96f79d442 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -167,11 +167,11 @@ export class PresElementBox extends ViewBoxBaseComponent() { e.preventDefault(); if (element && !(e.ctrlKey || e.metaKey)) { if (PresBox.Instance._selectedArray.has(this.rootDoc)) { - PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false); setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); } else { setupMoveUpEvents(this, e, ((e: PointerEvent) => { - PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false); return this.startDrag(e); }), emptyFunction, emptyFunction); } @@ -197,7 +197,7 @@ export class PresElementBox extends ViewBoxBaseComponent() { dragData.moveDocument = this.props.docViewPath().lastElement()?.props.moveDocument; const dragItem: HTMLElement[] = []; if (dragArray.length === 1) { - const doc = dragArray[0]; + const doc = this._itemRef.current || dragArray[0]; doc.className = miniView ? "presItem-miniSlide" : "presItem-slide"; dragItem.push(doc); } else if (dragArray.length >= 1) { @@ -328,7 +328,6 @@ export class PresElementBox extends ViewBoxBaseComponent() { key={this.props.Document[Id] + this.indexInPres} ref={this._itemRef} style={{ - backgroundColor: presColorBool ? isSelected ? "rgba(250,250,250,0.3)" : "transparent" : isSelected ? Colors.LIGHT_BLUE : "transparent", opacity: this._dragging ? 0.3 : 1 }} onClick={e => { -- cgit v1.2.3-70-g09d2