aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/Utils.ts43
-rw-r--r--src/client/views/collections/TabDocView.tsx1
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx1
-rw-r--r--src/client/views/nodes/PresBox.tsx2
-rw-r--r--src/client/views/presentationview/PresElementBox.scss10
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx29
6 files changed, 73 insertions, 13 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index daacca51d..1a00c0bfb 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -549,6 +549,49 @@ export function simulateMouseClick(element: Element | null | undefined, x: numbe
}));
}
+export function lightOrDark(color: any) {
+
+ // Variables for red, green, blue values
+ var r, g, b, hsp;
+
+ // Check the format of the color, HEX or RGB?
+ if (color.match(/^rgb/)) {
+
+ // If RGB --> store the red, green, blue values in separate variables
+ color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+
+ r = color[1];
+ g = color[2];
+ b = color[3];
+ }
+ else {
+
+ // If hex --> Convert it to RGB: http://gist.github.com/983661
+ color = +("0x" + color.slice(1).replace(
+ color.length < 5 && /./g, '$&$&'));
+
+ r = color >> 16;
+ g = color >> 8 & 255;
+ b = color & 255;
+ }
+
+ // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+ hsp = Math.sqrt(
+ 0.299 * (r * r) +
+ 0.587 * (g * g) +
+ 0.114 * (b * b)
+ );
+
+ // Using the HSP value, determine whether the color is light or dark
+ if (hsp > 127.5) {
+ return 'light';
+ }
+ else {
+
+ return 'dark';
+ }
+}
+
export function setupMoveUpEvents(
target: object,
e: React.PointerEvent,
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 4c0073dcc..45fab480c 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -166,6 +166,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
pinDoc.presentationTargetDoc = doc;
pinDoc.title = doc.title + " - Slide";
pinDoc.presMovement = PresMovement.Zoom;
+ pinDoc.groupWithUp = false;
pinDoc.context = curPres;
const presArray: Doc[] = PresBox.Instance?.sortArray();
const size: number = PresBox.Instance?._selectedArray.size;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 0eb05500c..c4d51f986 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -404,6 +404,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
const pinDoc = Doc.MakeAlias(doc);
pinDoc.presentationTargetDoc = doc;
pinDoc.presMovement = PresMovement.Zoom;
+ pinDoc.groupWithUp = false;
pinDoc.context = curPres;
pinDoc.title = doc.title + " - Slide";
const presArray: Doc[] = PresBox.Instance?.sortArray();
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index dd6e368e8..19c553189 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -57,7 +57,7 @@ enum PresStatus {
Edit = "edit"
}
-enum PresColor {
+export enum PresColor {
LightBlue = "#AEDDF8",
DarkBlue = "#5B9FDD",
LightBackground = "#ececec",
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 73a08b6de..2c2c195d6 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -123,10 +123,16 @@ $slide-active: #5B9FDD;
.presItem-slideButtons {
+ display: none;
+ }
+}
+
+.presItem-slide:hover {
+ .presItem-slideButtons {
display: flex;
grid-column: 7;
grid-row: 1/3;
- width: 60px;
+ width: max-content;
justify-self: right;
justify-content: flex-end;
@@ -156,8 +162,6 @@ $slide-active: #5B9FDD;
}
}
-
-
.presItem-slide.active {
box-shadow: 0 0 0px 1.5px $dark-blue;
}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 49049b805..c2d9faba9 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -6,14 +6,14 @@ import { documentSchema } from '../../../fields/documentSchemas';
import { Id } from "../../../fields/FieldSymbols";
import { createSchema, makeInterface } from '../../../fields/Schema';
import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, setupMoveUpEvents, lightOrDark } from "../../../Utils";
import { Transform } from "../../util/Transform";
import { ViewBoxBaseComponent } from '../DocComponent';
import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
import { FieldView, FieldViewProps } from '../nodes/FieldView';
import "./PresElementBox.scss";
import React = require("react");
-import { PresBox, PresMovement } from "../nodes/PresBox";
+import { PresBox, PresColor, PresMovement } from "../nodes/PresBox";
import { DocumentType } from "../../documents/DocumentTypes";
import { Tooltip } from "@material-ui/core";
import { DragManager } from "../../util/DragManager";
@@ -284,12 +284,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
const toolbarWidth: number = this.toolbarWidth;
const showMore: boolean = this.toolbarWidth >= 300;
const miniView: boolean = this.toolbarWidth <= 110;
+ const presBox: Doc = this.presBox; //presBox
+ const presBoxColor: string = StrCast(presBox._backgroundColor);
+ const lightPresBoxColor: boolean = lightOrDark(presBoxColor) === 'light';
const targetDoc: Doc = this.targetDoc;
const activeItem: Doc = this.rootDoc;
return (
- <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
+ <div className={`presItem-container`}
+ key={this.props.Document[Id] + this.indexInPres}
ref={this._itemRef}
- style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: this._dragging ? 0.3 : 1 }}
+ style={{
+ backgroundColor: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? lightPresBoxColor ? "rgba(0,0,0,0.3)" : "rgba(250,250,250,0.3)" : "transparent" : isSelected ? "#AEDDF8" : "transparent",
+ opacity: this._dragging ? 0.3 : 1
+ }}
onClick={e => {
e.stopPropagation();
e.preventDefault();
@@ -314,7 +321,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<div className="presItem-number">
{`${this.indexInPres + 1}.`}
</div>}
- {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props.renderDepth, "color", this.props.layerProvider) }}>
+ {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
+ style={{
+ backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props.renderDepth, "color", this.props.layerProvider),
+ boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
+ }}>
<div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 185) : toolbarWidth - 95, cursor: isSelected ? 'text' : 'grab' }}>
<EditableView
ref={this._titleRef}
@@ -333,13 +344,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
onClick={() => this.updateView(targetDoc, activeItem)}
style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
</Tooltip>
- {/* <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}>
+ <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}>
<div className="slideButton"
onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
- style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>
- <FontAwesomeIcon icon={""} onPointerDown={e => e.stopPropagation()} />
+ style={{ fontWeight: 700, backgroundColor: activeItem.groupWithUp ? PresColor.DarkBlue : "none" }}>
+ <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
</div>
- </Tooltip> */}
+ </Tooltip>
<Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
<FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
</div></Tooltip>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:02:48 +0000