From 65940c176cca651bf4bfface9be5d86d49c881c6 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 20 Oct 2020 18:21:05 +0800 Subject: presBox updates for pull drag changes + renaming marquee options + fixes --- .../views/presentationview/PresElementBox.scss | 77 +++++++++++++++++++--- .../views/presentationview/PresElementBox.tsx | 75 +++++++++++++-------- 2 files changed, 116 insertions(+), 36 deletions(-) (limited to 'src/client/views/presentationview') diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index f1bdb7737..60fe33f3f 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -36,7 +36,6 @@ $slide-active: #5B9FDD; overflow: hidden; } - } .presItem-slide { @@ -46,17 +45,18 @@ $slide-active: #5B9FDD; height: calc(100% - 7px); width: calc(100% - 5px); display: grid; - grid-template-rows: 23px auto; + grid-template-rows: 16px 10px auto; grid-template-columns: max-content max-content max-content max-content auto; .presItem-name { + min-width: 20px; z-index: 300; + top: 1px; align-self: center; - font-size: 13px; + font-size: 12px; font-family: Roboto; font-weight: 500; position: relative; - top: 1px; padding-left: 10px; padding-right: 10px; letter-spacing: normal; @@ -64,13 +64,35 @@ $slide-active: #5B9FDD; text-overflow: ellipsis; overflow: hidden; white-space: pre; + transition: 500ms; + } + + .presItem-docName { + min-width: 20px; + z-index: 300; + align-self: center; + font-style: italic; + font-size: 9px; + font-family: Roboto; + font-weight: 300; + position: relative; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + transition: 500ms; + grid-row: 2; + grid-column: 1/6; } .presItem-time { align-self: center; position: relative; - top: 2px; padding-right: 10px; + top: 1px; font-size: 10; font-weight: 300; font-family: Roboto; @@ -80,6 +102,7 @@ $slide-active: #5B9FDD; .presItem-embedded { overflow: hidden; + grid-row: 3; grid-column: 1/8; position: relative; display: flex; @@ -106,6 +129,7 @@ $slide-active: #5B9FDD; .presItem-slideButtons { display: flex; grid-column: 7; + grid-row: 1/3; width: 60px; justify-self: right; justify-content: flex-end; @@ -115,10 +139,10 @@ $slide-active: #5B9FDD; position: relative; border-radius: 100%; z-index: 300; - width: 15px; - height: 15px; + width: 18px; + height: 18px; display: flex; - font-size: 10px; + font-size: 12px; justify-self: center; align-self: center; background-color: rgba(0, 0, 0, 0.5); @@ -131,15 +155,50 @@ $slide-active: #5B9FDD; .slideButton:hover { background-color: rgba(0, 0, 0, 1); - transform: scale(1.15); + transform: scale(1.2); } } } + + .presItem-slide.active { box-shadow: 0 0 0px 1.5px $dark-blue; } +.presItem-multiDrag { + font-family: Roboto; + font-weight: 600; + color: white; + text-align: center; + justify-content: center; + align-content: center; + width: 100px; + height: 40px; + position: absolute; + background-color: $dark-blue; + z-index: 4000; + border-radius: 10px; + box-shadow: black 0.4vw 0.4vw 0.8vw; + +} + +.presItem-miniSlide { + font-weight: 700; + grid-column: 1/8; + align-self: center; + justify-self: center; + background-color: #d5dce2; + width: 28px; + text-align: center; + height: 28px; + border-radius: 5px; +} + +.presItem-miniSlide.active { + box-shadow: 0 0 0px 1.5px $dark-blue; +} + // .presItem-slide:hover { // background: $slide-hover; // } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index aea00f812..61d6e9027 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -161,26 +161,30 @@ export class PresElementBox extends ViewBoxBaseComponent { - this._dragging = false; - e.stopPropagation(); - e.preventDefault(); - } - startDrag = (e: PointerEvent, down: number[], delta: number[]) => { + const miniView: boolean = PresBox.Instance.toolbarWidth <= 100; const activeItem = this.rootDoc; + const dragArray = PresBox.Instance._dragArray; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); const dragItem: HTMLElement[] = []; - PresBox.Instance._dragArray.map(ele => { - const doc = ele; - doc.className = "presItem-slide"; + if (dragArray.length === 1) { + const doc = dragArray[0]; + doc.className = miniView ? "presItem-miniSlide" : "presItem-slide"; + dragItem.push(doc); + } else if (dragArray.length >= 1) { + const doc = document.createElement('div'); + doc.className = "presItem-multiDrag"; + doc.innerText = "Move " + dragArray.length + " slides"; + doc.style.position = 'absolute'; + doc.style.top = (e.clientY) + 'px'; + doc.style.left = (e.clientX - 50) + 'px'; dragItem.push(doc); - }); - const dropEvent = () => runInAction(() => this._dragging = false); + } + + // const dropEvent = () => runInAction(() => this._dragging = false); if (activeItem) { - DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined, dropEvent); - runInAction(() => this._dragging = true); + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined); + // runInAction(() => this._dragging = true); return true; } return false; @@ -233,15 +237,18 @@ export class PresElementBox extends ViewBoxBaseComponent { - this.rootDoc.title = value; + const length: number = value.length; + const spaces: string = new Array(value.length + 1).join(" "); + if (length === 0 || value === spaces) this.rootDoc.title = "-untitled-"; + else this.rootDoc.title = value; return true; } @action clearArrays = () => { PresBox.Instance._eleArray = []; - PresBox.Instance._eleArray.push(this._itemRef.current!); PresBox.Instance._dragArray = []; + PresBox.Instance._eleArray.push(this._itemRef.current!); PresBox.Instance._dragArray.push(this._dragRef.current!); } @@ -275,7 +282,8 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; - const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null); + const miniView: boolean = PresBox.Instance.toolbarWidth <= 100; + const targetDoc: Doc = this.targetDoc; const activeItem: Doc = this.rootDoc; return (
-
- {`${this.indexInPres + 1}.`} -
-
+ {miniView ? +
+ {`${this.indexInPres + 1}.`} +
+ : +
+ {`${this.indexInPres + 1}.`} +
} + {miniView ? (null) :
{isSelected ? StrCast(this.rootDoc.title)} - SetValue={action((value: string) => { + contents={activeItem.title} + GetValue={() => StrCast(activeItem.title)} + SetValue={undoBatch(action((value: string) => { this.onSetValue(value); return true; - })} + }))} /> : - this.rootDoc.title + activeItem.title }
{"Movement speed"}
}>
{this.transition}
 @@ -331,6 +344,13 @@ export class PresElementBox extends ViewBoxBaseComponent this.updateView(targetDoc, activeItem)} style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V
+ {/*
{"Group with up"}
}> +
activeItem.groupWithUp = !activeItem.groupWithUp} + style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}> + e.stopPropagation()} /> +
+ */}
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} />
@@ -340,8 +360,9 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} />
+
{activeItem.presPinView ? "View of " + targetDoc.title : targetDoc.title}
{this.renderEmbeddedInline} - + } ); } -- cgit v1.2.3-70-g09d2