From fefed2faee7808f75808f769496564d61d292d07 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 5 May 2022 11:58:41 -0400 Subject: fixed videobox ui sizing. added rotation for imageBoxs --- src/client/views/nodes/VideoBox.scss | 43 ++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 17 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f47a71469..f267407eb 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -15,6 +15,7 @@ width: 100%; height: 100%; position: relative; + .videoBox-viewer { display: flex; flex-direction: column; @@ -23,6 +24,7 @@ opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger background: $dark-gray; } + .inkingCanvas-paths-markers { opacity: 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround } @@ -52,17 +54,20 @@ width: 100%; z-index: -1; // 0; // logically this should be 0 (or unset) which would give us transparent brush strokes over videos. However, this makes Chrome crawl to a halt position: absolute; + video { width: auto; - height: 100%; - display: flex; + height: 100%; + display: flex; margin: auto; } } -.videoBox-content, .videoBox-content-interactive, .videoBox-content-fullScreen { +.videoBox-content, +.videoBox-content-interactive, +.videoBox-content-fullScreen { width: 100%; - height: 100%; + height: 100%; left: 0px; } @@ -82,17 +87,18 @@ justify-content: center; display: flex; width: 100%; + height: 38px; visibility: none; opacity: 0; background-color: $dark-gray; color: white; border-radius: 100px; - top: calc(100% - 20px); - left: 50%; - transform: translate(-50%, -100%); - + transform-origin: bottom left; + left: 0; + bottom: 0; + transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s; - height: 120px; + height: 38px; padding: 0 20px; .timecode-controls { @@ -102,27 +108,28 @@ justify-content: center; margin: 0 5px; flex-grow: 2; - font-size: 32px; + font-size: 14px; .timecode { margin: 0 5px; } .timeline-slider { - margin: 0 20px 0 20px; + margin: 0 10px 0 10px; flex-grow: 2; } } - .toolbar-slider.volume, .toolbar-slider.zoom { + .toolbar-slider.volume, + .toolbar-slider.zoom { width: 100px; } .videobox-button { margin: 5px; cursor: pointer; - width: 70px; - height: 70px; + width: 38px; + height: 38px; border-radius: 50%; background: $dark-gray; display: flex; @@ -134,8 +141,8 @@ } svg { - width: 40px; - height: 40px; + width: 25px; + height: 25px; } } } @@ -151,6 +158,7 @@ pointer-events: all; padding-right: 5px; cursor: pointer; + &:hover { background-color: $medium-gray; } @@ -164,7 +172,8 @@ } } -.videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive { +.videoBox-content-fullScreen, +.videoBox-content-fullScreen-interactive { display: flex; justify-content: center; align-items: center; -- cgit v1.2.3-70-g09d2 From 98435cb929b1e593bc561c6c56e2db07036aae63 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 5 Jun 2022 00:29:09 -0400 Subject: decreased size of video box ui bar. fixed autoHeight on native scaled text. --- src/client/views/nodes/VideoBox.scss | 23 +++++++++++----------- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 2 files changed, 12 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f267407eb..d4cddd65e 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -87,7 +87,6 @@ justify-content: center; display: flex; width: 100%; - height: 38px; visibility: none; opacity: 0; background-color: $dark-gray; @@ -98,7 +97,7 @@ bottom: 0; transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s; - height: 38px; + height: 24px; padding: 0 20px; .timecode-controls { @@ -108,7 +107,7 @@ justify-content: center; margin: 0 5px; flex-grow: 2; - font-size: 14px; + font-size: 12px; .timecode { margin: 0 5px; @@ -128,8 +127,8 @@ .videobox-button { margin: 5px; cursor: pointer; - width: 38px; - height: 38px; + width: 24px; + height: 24px; border-radius: 50%; background: $dark-gray; display: flex; @@ -141,8 +140,8 @@ } svg { - width: 25px; - height: 25px; + width: 18px; + height: 18px; } } } @@ -205,21 +204,21 @@ input[type="range"]:focus { input[type="range"]::-webkit-slider-runnable-track { width: 100%; - height: 20px; + height: 18px; cursor: pointer; box-shadow: 0; background: $light-gray; - border-radius: 20px; + border-radius: 18px; } input[type="range"]::-webkit-slider-thumb { box-shadow: 0; border: 0; - height: 26px; - width: 26px; + height: 20px; + width: 20px; border-radius: 20px; background: $medium-blue; cursor: pointer; -webkit-appearance: none; - margin-top: -3px; + margin-top: -1px; } \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6004ac271..be38342d1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -873,7 +873,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._disposers.componentHeights = reaction( // set the document height when one of the component heights changes and autoHeight is on () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight, marginsHeight: this.autoHeightMargins }), ({ sidebarHeight, textHeight, autoHeight, marginsHeight }) => { - autoHeight && this.props.setHeight?.(marginsHeight + Math.max(sidebarHeight, textHeight)); + autoHeight && this.props.setHeight?.((this.props.scaling?.() || 1) * (marginsHeight + Math.max(sidebarHeight, textHeight))); }, { fireImmediately: true }); this._disposers.links = reaction(() => DocListCast(this.dataDoc.links), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks newLinks => { -- cgit v1.2.3-70-g09d2