aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/MainView.scss4
-rw-r--r--src/client/views/PropertiesButtons.scss98
-rw-r--r--src/client/views/PropertiesButtons.tsx36
-rw-r--r--src/client/views/PropertiesView.scss4
5 files changed, 88 insertions, 58 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 478209fe9..e9cae76e4 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -575,7 +575,7 @@ export namespace Docs {
DocumentType.EQUATION,
{
layout: { view: EquationBox, dataField: 'text' },
- options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, }, ///systemIcon: 'BsSuperscript' + BsSubscript
+ options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, ///systemIcon: 'BsSuperscript' + BsSubscript
},
],
[
@@ -691,7 +691,7 @@ export namespace Docs {
{
data: '',
layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 },
- options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' },
+ options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' },
},
],
]);
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b95ce0e99..eee9066b5 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -198,10 +198,10 @@ h1,
left: 0;
position: absolute;
z-index: 2;
- background-color: $light-gray;
+ background-color: linen;//$light-gray;
.editable-title {
- background-color: $light-gray;
+ background-color: linen;//$light-gray;
}
}
}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 36b2df73e..f571dcf25 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,22 +20,31 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty,
.propertiesButtons-linkButton-nonempty {
- height: 25px;
- width: 29px;
- border-radius: 6px;
- pointer-events: auto;
- background-color: $dark-gray;
- color: #fcfbf7;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
+ // margin-right: 7px;
+ // margin-left: 8px;
+ height: 28px;
+ width: 226px;//29px;
display: flex;
- justify-content: center;
align-items: center;
- margin-right: 10px;
- margin-left: 4px;
+ // height: 25px;
+ // width: 230px;//29px;
+ // display: flex;
+ // align-items: center;
+ // border-radius: 6px;
+ pointer-events: auto;
+ // background-color: $dark-gray;
+ // color: #fcfbf7;
+ // text-transform: uppercase;
+ // letter-spacing: 2px;
+ // font-size: 75%;
+ transition: transform 0.2s;
+ // text-align: center;
+
+
+ // justify-content: center;
+
+ // margin-right: 10px;
+ // margin-left: 4px;
&:hover {
background: $medium-gray;
@@ -52,19 +61,24 @@ $linkGap : 3px;
color: $black;
}
.propertiesButtons-linkButton-empty.toggle-off {
- background-color: $dark-gray;
- color: white;
+ background-color: white;//$dark-gray;
+ color: black; //white;
+}
+
+.propertiesButtons-icon {
+ margin-left:8px;
}
.propertiesButtons {
- margin-top: 3px;
- grid-column: 1/4;
- width: 100%;
- height: auto;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- padding-bottom: 5.5px;
+ position:relative;
+ // margin-top: 3px;
+// // grid-column: 1/4;
+// width: 100%;
+// height: auto;
+// display: flex;
+// // flex-direction: row;
+// // flex-wrap: wrap;
+// padding-bottom: 5.5px;
}
.onClickFlyout-editScript {
@@ -110,18 +124,32 @@ $linkGap : 3px;
}
}
-.propertiesButtons-title {
- background: $dark-gray;
- color: $white;
- font-size: 6px;
- width: 37px;
- padding: 3px;
- height: 12px;
- border-radius: 7px;
+// .propertiesButtons-iconAndText{
+// height: 28px;
+// width: 220px;//29px;
+// display: flex;
+// align-items: center;
+// background-color: white;
+// }
+
+.propertiesButtons-label {
text-transform: uppercase;
- text-align: center;
- margin-top: -4px;
-}
+ margin-left: 8px;
+ // margin-right: 50 px;
+}
+
+// .propertiesButtons-title {
+// background: pink; //$dark-gray;
+// color: $white;
+// font-size: 6px;
+// width: 37px;
+// padding: 3px;
+// height: 12px;
+// border-radius: 7px;
+// text-transform: uppercase;
+// text-align: center;
+// margin-top: -4px;
+// }
.propertiesButtons-linker {
height: 25px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 2c88eacc6..247368685 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,7 +22,7 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer';
import './PropertiesButtons.scss';
import React = require('react');
import { JsxElement } from 'typescript';
-import { FaThumbtack } from 'react-icons/fa';
+import { FaBraille, FaThumbtack } from 'react-icons/fa';
import { AiOutlineApple } from 'react-icons/ai';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
@@ -50,7 +50,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
return !targetDoc ? null : (
<Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
- <div>
+ <div className = 'propertiesButtons-iconAndText' >
<div
className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
onPointerDown={e => e.stopPropagation()}
@@ -59,11 +59,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
} else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
}, property)}>
- {icon((BoolCast(targetDoc?.[property])) as any)}
-
+ <div className = "propertiesButtons-icon"> {icon((BoolCast(targetDoc?.[property])) as any)} </div>
+
+ <div className="propertiesButtons-label"> {label}</div>
{/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
</div>
- <div className="propertiesButtons-title">{label}</div>
+
+
</div>
</Tooltip>
);
@@ -94,14 +96,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
// on => 'portrait'
// );
// }
- // @computed get clustersButton() {
- // return this.propertyToggleBtn(
- // 'Clusters',
- // '_freeform_useClusters',
- // on => `${on ? 'Hide' : 'Show'} clusters`,
- // on => 'braille'
- // );
- // }
+ @computed get clustersButton() {
+ return this.propertyToggleBtn(
+ 'Clusters',
+ '_freeform_useClusters',
+ on => `${on ? 'Hide' : 'Show'} clusters`,
+ on => <FaBraille/>
+ );
+ }
// @computed get panButton() {
// return this.propertyToggleBtn(
// 'Lock\xA0View',
@@ -416,8 +418,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
<div className="propertiesButtons">
{/* {toggle(this.titleButton)}
{toggle(this.captionButton)} */}
- {toggle(this.lockButton)}
- {/* {toggle(this.onClickButton)}
+ {toggle(this.lockButton)}
+ {/*{toggle(this.onClickButton)}
{toggle(this.layout_fitWidthButton)}
{toggle(this.freezeThumb)}
{toggle(this.forceActiveButton)}
@@ -429,9 +431,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
{toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
{toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
- {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
+ {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} */}
{toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
- {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
+ {/* {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
{toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
</div>
);
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index b3d16d82a..49f2fc6fe 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -837,7 +837,7 @@
}
.propertiesView-wordTitle{
- color:silver;
+ color:darkslategray;
font-weight:200;
}
@@ -854,7 +854,7 @@
}
.propertiesView-wordType{
- color:silver;
+ color:darkslategray;
font-weight:200;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 00:51:33 +0000