* MS timelines can have their access-policy changed after being created.

* Improved legibility of the timeline editor and playing panels, in various ways. (background color, font-size in node-reveal uis, etc.)
debate-map · Jan 2, 2024 · ba354ba · ba354ba
1 parent 14125c1
commit ba354ba
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 44 deletions.
diff --git a/Packages/client/Source/UI/@Shared/Timelines/TimelineDetailsUI.tsx b/Packages/client/Source/UI/@Shared/Timelines/TimelineDetailsUI.tsx
@@ -5,6 +5,7 @@ import {GetUpdates} from "web-vcore";
 import {Timeline} from "dm_common";
 import React from "react";
 import {RunCommand_UpdateTimeline} from "Utils/DB/Command";
+import {PolicyPicker} from "UI/Database/Policies/PolicyPicker";
 import {GenericEntryInfoUI} from "../CommonPropUIs/GenericEntryInfoUI";
 
 export class TimelineDetailsUI extends BaseComponentPlus({enabled: true} as {baseData: Timeline, forNew: boolean, enabled?: boolean, style?, onChange?: (newData: Timeline, ui: TimelineDetailsUI)=>void}, {} as { newData: Timeline }) {
@@ -34,6 +35,12 @@ export class TimelineDetailsUI extends BaseComponentPlus({enabled: true} as {bas
 					<TextInput required enabled={enabled} style={{width: "100%"}}
 						value={newData.name} onChange={val=>Change(newData.name = val)}/>
 				</RowLR>
+				<RowLR mt={5} splitAt={splitAt}>
+					<Pre>Access policy: </Pre>
+					<PolicyPicker value={newData.accessPolicy} onChange={val=>Change(newData.accessPolicy = val)}>
+						{text=><Button enabled={enabled} text={text} style={{width: "100%"}}/>}
+					</PolicyPicker>
+				</RowLR>
 			</Column>
 		);
 	}

diff --git a/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/EditorSubpanel.tsx b/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/EditorSubpanel.tsx
@@ -81,10 +81,14 @@ export class EditorSubpanel extends BaseComponentPlus({} as {map: Map}, {}, {} a
 						RunInAction("EditorSubpanel.lockMapScrolling.onChange", ()=>uiState_maps.lockMapScrolling = val);
 					}}/>
 				</Row>
-				<ScrollView style={ES({flex: 1})} contentStyle={ES({
-					flex: 1, position: "relative", padding: 7,
-					// filter: 'drop-shadow(rgb(0, 0, 0) 0px 0px 10px)', // disabled for now, since otherwise causes issue with dnd system (and portal fix causes errors here, fsr)
-				})}>
+				<ScrollView className="brightScrollBars" style={ES({flex: 1})}
+					contentStyle={ES({
+						flex: 1, position: "relative", padding: 7,
+						//filter: 'drop-shadow(rgb(0, 0, 0) 0px 0px 10px)', // disabled for now, since otherwise causes issue with dnd system (and portal fix causes errors here, fsr)
+						background: "rgba(0,0,0,1)",
+					})}
+					scrollVBarStyle={{filter: "none", width: 7}} // width:7 to match with container padding
+				>
 					{showTimelineDetails &&
 					<TimelineDetailsEditor timeline={timeline} editing={creatorOrMod}/>}
 					{timeline.videoID != null &&

diff --git a/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/EditorSubpanel/StepEditorUI.tsx b/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/EditorSubpanel/StepEditorUI.tsx
@@ -81,11 +81,18 @@ export class StepEditorUI extends BaseComponentPlus({} as StepEditorUIProps, {pl
 			<div style={{paddingTop: index == 0 ? 0 : 7}}>
 				<Column /* mt={index == 0 ? 0 : 7} */ {...(dragInfo && dragInfo.provided.draggableProps)}
 					style={E(
-						{background: liveSkin.BasePanelBackgroundColor().css(), borderRadius: 10, border: "1px solid rgba(255,255,255,.15)"},
+						{
+							background: liveSkin.BasePanelBackgroundColor().alpha(1).css(), borderRadius: 10,
+							//border: "1px solid rgba(255,255,255,.15)"
+						},
 						dragInfo && dragInfo.provided.draggableProps.style,
 						asDragPreview && {zIndex: zIndexes.draggable},
 					)}>
-					<Row center p="7px 10px" {...(dragInfo && dragInfo.provided.dragHandleProps)}>
+					<Row center p="3px 7px" {...(dragInfo && dragInfo.provided.dragHandleProps)} style={{
+						borderRadius: "10px 10px 0 0",
+						/*background: "rgba(0,0,0,.7)",
+						color: "rgba(255,255,255,.7)",*/
+					}}>
 						<Pre>Step {index + 1}</Pre>
 						{/* <Button ml={5} text="Edit" title="Edit this step" style={{ flexShrink: 0 }} onClick={() => {
 							ShowEditTimelineStepDialog(MeID(), step);
@@ -157,6 +164,7 @@ export class StepEditorUI extends BaseComponentPlus({} as StepEditorUIProps, {pl
 						style={{
 							//background: "rgba(255,255,255,.2)",
 							padding: 5, outline: "none",
+							borderWidth: "1px 0 1px 0",
 						}}
 						value={step.message} enabled={creatorOrMod}
 						onChange={val=>{
@@ -172,7 +180,10 @@ export class StepEditorUI extends BaseComponentPlus({} as StepEditorUIProps, {pl
 							return (
 								<Column ref={c=>{ this.nodeHolder = c; provided.innerRef(GetDOM(c) as any); }} {...provided.droppableProps}
 									style={E(
-										{position: "relative", padding: 7, background: "rgba(255,255,255,.3)", borderRadius: "0 0 10px 10px"},
+										{
+											position: "relative", padding: 7, background: "rgba(255,255,255,.3)", borderRadius: "0 0 10px 10px",
+											//border: "solid rgba(0,0,0,.7)", borderWidth: "0 1px 1px 1px"
+										},
 										(step.nodeReveals == null || step.nodeReveals.length == 0) && {padding: "3px 5px"},
 									)}>
 									{(step.nodeReveals == null || step.nodeReveals.length == 0) && !dragIsOverDropArea &&
@@ -276,7 +287,7 @@ export class NodeRevealUI extends BaseComponentPlus({} as {map: Map, step: Timel
 			<>
 				<Row key={index} sel mt={index === 0 ? 0 : 5}
 					style={E(
-						{width: "100%", padding: 5, background: backgroundColor.css(), borderRadius: 5, cursor: "pointer", border: "1px solid rgba(0,0,0,.5)"},
+						{width: "100%", padding: 3, background: backgroundColor.css(), borderRadius: 5, cursor: "pointer", border: "1px solid rgba(0,0,0,.5)"},
 						// selected && { background: backgroundColor.brighten(0.3).alpha(1).css() },
 					)}
 					onMouseDown={e=>{
@@ -285,9 +296,9 @@ export class NodeRevealUI extends BaseComponentPlus({} as {map: Map, step: Timel
 					}}
 					onClick={()=>this.SetState({detailsOpen: !detailsOpen})}
 				>
-					<span style={{position: "relative", paddingTop: 2}}>
+					<span style={{position: "relative", paddingTop: 2, fontSize: 12, color: "rgba(20,20,20,1)"}}>
 						<span style={{
-							position: "absolute", left: -5, top: -10, color: "yellow", fontSize: 10,
+							position: "absolute", left: -5, top: -8, lineHeight: "11px", fontSize: 10, color: "yellow",
 							background: "rgba(50,50,50,1)", borderRadius: 5, padding: "0 3px",
 						}}>
 							{[

diff --git a/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel.tsx b/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel.tsx
@@ -331,7 +331,15 @@ export class PlayingSubpanel extends BaseComponent<{map: Map}, {}, { messageArea
 								RunInAction("PlayingSubpanel.targetArrow.onClick", ()=>store.main.timelines.autoScroll = newAutoScroll);
 							}, [targetStepIndex])}/>
 					</Column>
-					<ScrollView style={ES({flex: 1})} contentStyle={ES({flex: 1, position: "relative", padding: 7, filter: "drop-shadow(rgb(0, 0, 0) 0px 0px 10px)"})} onScroll={this.OnScroll}>
+					<ScrollView className="brightScrollBars" style={ES({flex: 1})}
+						contentStyle={ES({
+							flex: 1, position: "relative", padding: 7,
+							//filter: "drop-shadow(rgb(0, 0, 0) 0px 0px 10px)",
+							background: "rgba(0,0,0,1)",
+						})}
+						scrollVBarStyle={{width: 7}} // width:7 to match with container padding
+						onScroll={this.OnScroll}
+					>
 						{/* timelineSteps && timelineSteps.map((step, index) => <StepUI key={index} index={index} last={index == timeline.steps.length - 1} map={map} timeline={timeline} step={step}/>) */}
 						<ReactList type='variable' length={steps?.length ?? 0}
 							ref={UseCallback(c=>{

diff --git a/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel/StepUI.tsx b/Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel/StepUI.tsx
@@ -73,14 +73,18 @@ export class StepUI extends BaseComponentPlus(
 					>
 						<Row style={{float: "right", fontSize: 16}}>{index + 1}</Row>
 						<VReactMarkdown_Remarkable addMarginsForDanglingNewLines={true}
-							className="onlyTopMargin" style={{marginTop: 5, display: "flex", flexDirection: "column", filter: "drop-shadow(0px 0px 10px rgba(0,0,0,1))"}}
+							className="onlyTopMargin"
+							style={{
+								marginTop: 5, display: "flex", flexDirection: "column",
+								//filter: "drop-shadow(0px 0px 10px rgba(0,0,0,1))"
+							}}
 							source={step.message} replacements={{}} extraInfo={{}}/>
 					</Div>
 					{step.nodeReveals && step.nodeReveals.length > 0 &&
 					<Column style={E(
 						{position: "relative", background: "rgba(255,255,255,.3)", borderRadius: "0 0 10px 10px"},
 					)}>
-						<div style={{fontSize: 11, opacity: 0.7, textAlign: "center", padding: "3px 5px"}} onClick={()=>{
+						<div style={{fontSize: 11, opacity: 0.7, textAlign: "center", padding: "3px 5px", cursor: "pointer"}} onClick={()=>{
 							this.SetState({showNodeReveals: !showNodeReveals});
 						}}>
 							Message affects display of {step.nodeReveals.length} node{step.nodeReveals.length > 1 ? "s" : ""}. (click to {showNodeReveals ? "hide" : "view"})

diff --git a/Packages/client/Source/Utils/Styles/Main.scss b/Packages/client/Source/Utils/Styles/Main.scss
@@ -1,5 +1,12 @@
 @import "~web-vcore/Source/Utils/Styles/Entry_Base.scss";
 
+h1 { font-weight: bold; font-size: 25px; margin: 10px 0px; }
+h2 { font-weight: bold; font-size: 20px; margin: 9px 0px; }
+h3 { font-weight: bold; font-size: 17px; margin: 8px 0px; }
+h4 { font-weight: bold; font-size: 14px; margin: 7px 0px; }
+h5 { font-weight: bold; font-size: 13px; margin: 6px 0px; }
+h6 { font-weight: bold; font-size: 12px; margin: 5px 0px; }
+
 .CodeMirror {
 	color: rgba(255,255,255,.7);
 }
@@ -37,9 +44,10 @@
 	}
 }*/
 
-h1 { font-weight: bold; font-size: 25px; margin: 10px 0px; }
-h2 { font-weight: bold; font-size: 20px; margin: 9px 0px; }
-h3 { font-weight: bold; font-size: 17px; margin: 8px 0px; }
-h4 { font-weight: bold; font-size: 14px; margin: 7px 0px; }
-h5 { font-weight: bold; font-size: 13px; margin: 6px 0px; }
-h6 { font-weight: bold; font-size: 12px; margin: 5px 0px; }
+.brightScrollBars .scrollBar.vertical {
+	filter: none; // revert "filter: none;" from "DMSkin.ts"
+	background: rgba(255,255,255,.7) !important;
+}
+.brightScrollBars .scrollBar.vertical:hover {
+	background: rgba(255,255,255,.9) !important;
+}
diff --git a/Packages/monitor-client/Source/UI/Root.tsx b/Packages/monitor-client/Source/UI/Root.tsx
@@ -138,7 +138,7 @@ export class RootStyles extends BaseComponent<{}, {}> {
 				font-family: ${skin.MainFont()};
 				color: ${skin.TextColor().css()};
 			}
-			${skin.StyleBlock_Freeform()}
+			${skin.RawCSS_Freeform()}
 			`}</style>
 		);
 	}

diff --git a/Packages/monitor-client/Source/Utils/Styles/MainSkin.ts b/Packages/monitor-client/Source/Utils/Styles/MainSkin.ts
@@ -14,21 +14,21 @@ export class MainSkin extends Skin {
 	// scalars
 	// ==========
 
-	BasePanelBackgroundColor = ()=>Chroma("rgba(200,200,200,.7)");
-	BasePanelDropShadowFilter = ()=>"drop-shadow(rgba(200,200,200,.7) 0px 0px 10px)";
-	OverlayPanelBackgroundColor = ()=>Chroma("rgba(255,255,255,.7)");
-	//NavBarPanelBackgroundColor = ()=>Chroma("rgba(0,0,0,.7)");
-	//NavBarPanelBackgroundColor = ()=>this.BasePanelBackgroundColor().alpha(.9);
-	NavBarPanelBackgroundColor = ()=>this.BasePanelBackgroundColor().alpha(1);
-	OverlayBorderColor = ()=>Chroma("rgba(0,0,0,.3)");
-	OverlayBorder = ()=>`1px solid ${this.OverlayBorderColor().css()}`;
-	HeaderFont = ()=>this.MainFont();
-	MainFont = ()=>"'Quicksand', sans-serif";
-	TextColor = ()=>Chroma("rgb(50,50,50)");
-	NavBarBoxShadow = ()=>"rgba(100,100,100,.3) 0px 0px 3px, rgba(70,70,70,.5) 0px 0px 150px";
-	HeaderColor = ()=>this.ListEntryBackgroundColor_Dark();
-	ListEntryBackgroundColor_Light = ()=>this.BasePanelBackgroundColor().darken(.075 * chroma_maxDarken).alpha(1);
-	ListEntryBackgroundColor_Dark = ()=>this.BasePanelBackgroundColor().darken(.15 * chroma_maxDarken).alpha(1);
+	override BasePanelBackgroundColor = ()=>Chroma("rgba(200,200,200,.7)");
+	override BasePanelDropShadowFilter = ()=>"drop-shadow(rgba(200,200,200,.7) 0px 0px 10px)";
+	override OverlayPanelBackgroundColor = ()=>Chroma("rgba(255,255,255,.7)");
+	//override NavBarPanelBackgroundColor = ()=>Chroma("rgba(0,0,0,.7)");
+	//override NavBarPanelBackgroundColor = ()=>this.BasePanelBackgroundColor().alpha(.9);
+	override NavBarPanelBackgroundColor = ()=>this.BasePanelBackgroundColor().alpha(1);
+	override OverlayBorderColor = ()=>Chroma("rgba(0,0,0,.3)");
+	override OverlayBorder = ()=>`1px solid ${this.OverlayBorderColor().css()}`;
+	override HeaderFont = ()=>this.MainFont();
+	override MainFont = ()=>"'Quicksand', sans-serif";
+	override TextColor = ()=>Chroma("rgb(50,50,50)");
+	override NavBarBoxShadow = ()=>"rgba(100,100,100,.3) 0px 0px 3px, rgba(70,70,70,.5) 0px 0px 150px";
+	override HeaderColor = ()=>this.ListEntryBackgroundColor_Dark();
+	override ListEntryBackgroundColor_Light = ()=>this.BasePanelBackgroundColor().darken(.075 * chroma_maxDarken).alpha(1);
+	override ListEntryBackgroundColor_Dark = ()=>this.BasePanelBackgroundColor().darken(.15 * chroma_maxDarken).alpha(1);
 
 	// dm-specific
 	//NodeTextColor = ()=>Chroma("rgb(0,0,0)");
@@ -39,17 +39,20 @@ export class MainSkin extends Skin {
 	// ==========
 
 	// fixes that height:100% doesn't work in safari, when in flex container
-	Style_Page = ()=>({width: 960, flex: 1, margin: "100px auto", padding: 50, background: "rgba(0,0,0,.75)", borderRadius: 10, cursor: "auto"});
-	Style_VMenuItem = ()=>({padding: "3px 5px", borderTop: "1px solid rgba(255,255,255,.1)", backgroundColor: "rgba(255,255,255,1)"});
-	Style_FillParent = ()=>({position: "absolute", left: 0, right: 0, top: 0, bottom: 0});
-	Style_XButton = ()=>({padding: "5px 10px"});
+	override Style_Page = ()=>({width: 960, flex: 1, margin: "100px auto", padding: 50, background: "rgba(0,0,0,.75)", borderRadius: 10, cursor: "auto"});
+	override Style_VMenuItem = ()=>({padding: "3px 5px", borderTop: "1px solid rgba(255,255,255,.1)", backgroundColor: "rgba(255,255,255,1)"});
+	override Style_FillParent = ()=>({position: "absolute", left: 0, right: 0, top: 0, bottom: 0});
+	override Style_XButton = ()=>({padding: "5px 10px"});
 
-	// style overrides and blocks
+	// blocks of raw-css or hooks/code
 	// ==========
 
-	// we implement these as regular prototype-bound methods, so that child-classes can rebind the func's "this" to itself
-	StyleBlock_Freeform() {
-		const styleFixesFromWVC = DefaultSkin.prototype.StyleBlock_Freeform.call(this);
+	override RawCSS_ApplyScalarsAndStyles() {
+		const cssFromWVC = DefaultSkin.prototype.RawCSS_ApplyScalarsAndStyles.call(this); // can't use "super.X()", since MainSkin doesn't inherit from DefaultSkin
+		return cssFromWVC;
+	}
+	override RawCSS_Freeform() {
+		const styleFixesFromWVC = DefaultSkin.prototype.RawCSS_Freeform.call(this);
 		return `
 			${styleFixesFromWVC}
 			
@@ -128,7 +131,7 @@ export class MainSkin extends Skin {
 			}
 		`;
 	}
-	CSSHooks_Freeform() {
+	override CSSHooks_Freeform() {
 		// these hooks are (also) used as the base for other skins
 		addHook_css(Button, ctx=>{
 			if (ctx.key == "finalStyle") {