From 55f99f4bcc45b1dc797982273e93f49fb58403c3 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 28 Aug 2020 18:15:46 -0400 Subject: added explicit annotation mode for videos. fixed annotation mode for webpages --- src/client/views/nodes/WebBox.scss | 66 +++++++------------------------------- 1 file changed, 12 insertions(+), 54 deletions(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 875142169..23a5ad824 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -70,7 +70,6 @@ } } - .webBox-overlay { width: 100%; height: 100%; @@ -82,63 +81,22 @@ background:lightGray; width: 100%; } - .webBox-freeze { - display: flex; - align-items: center; - justify-content: center; - margin-right: 5px; - width: 30px; - } - - .webBox-urlEditor { - position: relative; - opacity: 0.9; + .webBox-annotationToggle { z-index: 9001; - transition: top .5s; - - .urlEditor { - display: grid; - grid-template-columns: 1fr auto; - padding-bottom: 10px; - overflow: hidden; - - .editorBase { - display: flex; - - .editor-collapse { - transition: all .5s, opacity 0.3s; - position: absolute; - width: 40px; - transform-origin: top left; - } - - .switchToText { - color: $main-accent; - } - - .switchToText:hover { - color: $dark-color; - } - } - - button:hover { - transform: scale(1); - } + position: absolute; + top: 2; + left: 2; + box-shadow: black 0.3em 0.3em 1em; + border-radius: 5px; + display: flex; + width: 25px; + height: 25px; + align-items: center; + > svg { + margin: auto; } } - .webpage-urlInput { - padding: 12px 10px 11px 10px; - border: 0px; - color: grey; - letter-spacing: 2px; - outline-color: black; - background: rgb(238, 238, 238); - width: 100%; - margin-right: 10px; - height: 100%; - } - .touch-iframe-overlay { width: 100%; height: 100%; -- cgit v1.2.3-70-g09d2 From 2d37a7f6402aca311499fb1d61b05cca2487475f Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 28 Aug 2020 18:28:12 -0400 Subject: from last --- src/client/views/nodes/WebBox.scss | 4 ++++ src/client/views/nodes/WebBox.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 23a5ad824..134860d0a 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -89,6 +89,7 @@ box-shadow: black 0.3em 0.3em 1em; border-radius: 5px; display: flex; + opacity: 0.3; width: 25px; height: 25px; align-items: center; @@ -96,6 +97,9 @@ margin: auto; } } + .webBox-annotationToggle:hover { + opacity: 1; + } .touch-iframe-overlay { width: 100%; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 290b4a720..bb544fedc 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -241,7 +241,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.layoutDoc.isAnnotating = !this.layoutDoc.isAnnotating)}> - + ; } -- cgit v1.2.3-70-g09d2 From de49c6f52bf97f9b10008e8ca26e767b71b49abd Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 4 Sep 2020 15:00:36 +0530 Subject: fixed typos + css + changing value on dropped documents in masonry view + ink x + added .mpeg as acceptable audio format --- .../util/Import & Export/DirectoryImportBox.tsx | 4 ++-- src/client/views/PropertiesButtons.tsx | 2 +- .../collections/CollectionMasonryViewFieldRow.tsx | 4 ++-- src/client/views/collections/CollectionMenu.tsx | 4 ++-- .../views/collections/CollectionStackingView.scss | 2 +- src/client/views/nodes/PresBox.tsx | 10 ++++---- src/client/views/nodes/WebBox.scss | 28 ++++++++++++++++------ src/server/ApiManagers/UploadManager.ts | 4 ++-- src/server/DashUploadUtils.ts | 8 +++---- src/server/SharedMediaTypes.ts | 4 ++-- 10 files changed, 42 insertions(+), 28 deletions(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index d04270afa..7f01966b9 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -11,7 +11,7 @@ import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast } from "../../../fields/Types"; -import { AcceptibleMedia, Upload } from "../../../server/SharedMediaTypes"; +import { AcceptableMedia, Upload } from "../../../server/SharedMediaTypes"; import { Utils } from "../../../Utils"; import { GooglePhotos } from "../../apis/google_docs/GooglePhotosClientUtils"; import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents"; @@ -87,7 +87,7 @@ export class DirectoryImportBox extends React.Component { const file = files.item(i); if (file && !unsupported.includes(file.type)) { const ext = path.extname(file.name).toLowerCase(); - if (AcceptibleMedia.imageFormats.includes(ext)) { + if (AcceptableMedia.imageFormats.includes(ext)) { validated.push(file); } } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d66cba710..85b4189e1 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -194,7 +194,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { get lockButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) : {`${this.selectedDoc?.lockedPosition ? "Unlock" : "Lock"} " Position"`}} placement="top"> + title={
{`${this.selectedDoc?.lockedPosition ? "Unlock" : "Lock"} Position`}
} placement="top">
d[key] = castedValue); + de.complete.docDragData.droppedDocuments.forEach(d => d[key] = d[DataSym][key] = castedValue); this.props.parent.onInternalDrop(e, de); e.stopPropagation(); } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index b04c9c2eb..4b8075f06 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -680,7 +680,7 @@ export class CollectionFreeFormViewChrome extends React.Component {/* */}
- {color === "" ?

☒

: ""} + {color === "" ?

☒

: ""}
)}
; @@ -696,7 +696,7 @@ export class CollectionFreeFormViewChrome extends React.Component { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })} style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}>
- {color === "" ?

☒

: ""} + {color === "" ?

☒

: ""}
)} diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 8fc74a9c6..9f56a0c0e 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -205,7 +205,7 @@ display: flex; align-items: center; justify-content: center; - color: lightGray; + color: black; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 07b2d51d1..e9497ab18 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -892,11 +892,11 @@ export class PresBox extends ViewBoxBaseComponent
-
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
 -
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 -
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 -
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom'}>
 -
{"Enter from center"}
}>
targetDoc.presEffectDirection = false}>
 +
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
 +
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 +
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 +
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom'}>
 +
{"Enter from center"}
}>
targetDoc.presEffectDirection = false}>
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 134860d0a..ea822f553 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -2,15 +2,16 @@ .webBox { - height:100%; + height: 100%; position: relative; display: flex; .pdfViewerDash-dragAnnotationBox { - position:absolute; + position: absolute; background-color: transparent; opacity: 0.1; } + .webBox-annotationLayer { position: absolute; transform-origin: left top; @@ -19,10 +20,12 @@ pointer-events: none; mix-blend-mode: multiply; // bcz: makes text fuzzy! } + .webBox-annotationBox { position: absolute; background-color: rgba(245, 230, 95, 0.616); } + .webBox-container { transform-origin: top left; width: 100%; @@ -33,10 +36,13 @@ top: 0; left: 0; } + .webBox-cont { pointer-events: none; } - .webBox-cont, .webBox-cont-interactive { + + .webBox-cont, + .webBox-cont-interactive { padding: 0vw; position: absolute; top: 0; @@ -45,18 +51,21 @@ height: 100%; transform-origin: top left; overflow: auto; + .webBox-iframe { width: 100%; height: 100%; position: absolute; - top:0; + top: 0; } } + .webBox-cont-interactive { span { user-select: text !important; } } + .webBox-outerContent { width: 100%; height: 100%; @@ -65,8 +74,9 @@ left: 0; overflow: auto; } + div.webBox-outerContent::-webkit-scrollbar-thumb { - display:none; + display: none; } } @@ -78,14 +88,16 @@ .webBox-buttons { margin-left: 44; - background:lightGray; + background: lightGray; width: 100%; } + .webBox-annotationToggle { z-index: 9001; position: absolute; top: 2; left: 2; + cursor: pointer; box-shadow: black 0.3em 0.3em 1em; border-radius: 5px; display: flex; @@ -93,10 +105,12 @@ width: 25px; height: 25px; align-items: center; - > svg { + + >svg { margin: auto; } } + .webBox-annotationToggle:hover { opacity: 1; } diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 76f5afe16..e98498489 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -9,7 +9,7 @@ import { publicDirectory, filesDirectory } from ".."; import { Database } from "../database"; import { DashUploadUtils, InjectSize, SizeSuffix } from "../DashUploadUtils"; import * as sharp from 'sharp'; -import { AcceptibleMedia, Upload } from "../SharedMediaTypes"; +import { AcceptableMedia, Upload } from "../SharedMediaTypes"; import { normalize } from "path"; import RouteSubscriber from "../RouteSubscriber"; const imageDataUri = require('image-data-uri'); @@ -237,7 +237,7 @@ export default class UploadManager extends ApiManager { } return imageDataUri.outputFile(uri, serverPathToFile(Directory.images, InjectSize(filename, SizeSuffix.Original))).then((savedName: string) => { const ext = extname(savedName).toLowerCase(); - const { pngs, jpgs } = AcceptibleMedia; + const { pngs, jpgs } = AcceptableMedia; const resizers = [ { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" }, { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" }, diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 890fb6f6d..e4d0d1f5f 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -13,7 +13,7 @@ import { Utils } from '../Utils'; import { createIfNotExists } from './ActionUtilities'; import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager'; import { resolvedServerUrl } from "./server_Initialization"; -import { AcceptibleMedia, Upload } from './SharedMediaTypes'; +import { AcceptableMedia, Upload } from './SharedMediaTypes'; import request = require('request-promise'); const parse = require('pdf-parse'); const requestImageSize = require("../client/util/request-image-size"); @@ -48,13 +48,13 @@ export namespace DashUploadUtils { }; export function validateExtension(url: string) { - return AcceptibleMedia.imageFormats.includes(path.extname(url).toLowerCase()); + return AcceptableMedia.imageFormats.includes(path.extname(url).toLowerCase()); } const size = "content-length"; const type = "content-type"; - const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptibleMedia; + const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; export async function upload(file: File): Promise { const { type, path, name } = file; @@ -313,7 +313,7 @@ export namespace DashUploadUtils { return { data, error }; }; - const { pngs, jpgs, webps, tiffs } = AcceptibleMedia; + const { pngs, jpgs, webps, tiffs } = AcceptableMedia; const pngOptions = { compressionLevel: 9, adaptiveFiltering: true, diff --git a/src/server/SharedMediaTypes.ts b/src/server/SharedMediaTypes.ts index 0f788f6c5..a341fd1c2 100644 --- a/src/server/SharedMediaTypes.ts +++ b/src/server/SharedMediaTypes.ts @@ -1,7 +1,7 @@ import { ExifData } from 'exif'; import { File } from 'formidable'; -export namespace AcceptibleMedia { +export namespace AcceptableMedia { export const gifs = [".gif"]; export const pngs = [".png"]; export const jpgs = [".jpg", ".jpeg"]; @@ -10,7 +10,7 @@ export namespace AcceptibleMedia { export const imageFormats = [...pngs, ...jpgs, ...gifs, ...webps, ...tiffs]; export const videoFormats = [".mov", ".mp4"]; export const applicationFormats = [".pdf"]; - export const audioFormats = [".wav", ".mp3", ".flac", ".au", ".aiff", ".m4a", ".webm"]; + export const audioFormats = [".wav", ".mp3", ".mpeg", ".flac", ".au", ".aiff", ".m4a", ".webm"]; } export namespace Upload { -- cgit v1.2.3-70-g09d2