aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections')
-rw-r--r--src/client/views/collections/CollectionView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss66
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.tsx46
3 files changed, 55 insertions, 59 deletions
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 4d1cb670c..837ae7e86 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -594,7 +594,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
""))}
{(Doc.UserDoc()?.noviceMode || !this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) :
<div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown}
- style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} />
+ style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "60%" }} />
}
{Doc.UserDoc()?.noviceMode || this.facetWidth() < 10 ? (null) : this.filterView}
</div>);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 5e0c9fcbb..aee28366a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -23,8 +23,9 @@
height: 20px;
padding-left: 38px;
margin-top: -5px;
- right: 19;
- position: absolute;
+ align-items: flex-end;
+ margin-left: auto;
+ margin-right: 10px;
&:hover {
color: grey;
@@ -66,9 +67,9 @@
.propertiesView-settings-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -104,9 +105,9 @@
.propertiesView-sharing-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -154,9 +155,9 @@
.propertiesView-appearance-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -191,9 +192,9 @@
.propertiesView-transform-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -285,9 +286,8 @@
.propertiesView-sharingTable-item-permission {
display: flex;
- right: 34;
- float: right;
- position: absolute;
+ align-items: flex-end;
+ margin-left: auto;
.permissions-select {
z-index: 1;
@@ -326,25 +326,18 @@
cursor: pointer;
}
- .propertiesView-fields-title-name {
- font-size: 12.5px;
- font-weight: bold;
- white-space: nowrap;
- width: 35px;
- display: flex;
- }
-
.propertiesView-fields-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
cursor: pointer;
}
}
+
}
.propertiesView-fields-checkbox {
@@ -407,9 +400,9 @@
.propertiesView-layout-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -444,9 +437,9 @@
.propertiesView-presTrails-title-icon {
float: right;
- right: 0;
- position: absolute;
- margin-left: 2px;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
margin-right: 9px;
&:hover {
@@ -730,4 +723,9 @@
&:hover {
border: 0.75px solid rgb(122, 28, 28);
}
+}
+
+
+.properties-flyout {
+ grid-column: 2/4;
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 15900aa33..b1c3d3dc5 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@computed get selectedDocumentView() {
if (SelectionManager.SelectedDocuments().length) {
return SelectionManager.SelectedDocuments()[0];
- } else if (PresBox.Instance?._selectedArray.length) {
+ } else if (PresBox.Instance && PresBox.Instance._selectedArray.length) {
return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc);
} else { return undefined; }
}
@@ -248,7 +248,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@observable transform: Transform = Transform.Identity();
- getTransform = () => { return this.transform; }
+ getTransform = () => this.transform;
propertiesDocViewRef = (ref: HTMLDivElement) => {
const observer = new _global.ResizeObserver(action((entries: any) => {
const cliRect = ref.getBoundingClientRect();
@@ -645,16 +645,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
colorButton(value: string, type: string, setter: () => {}) {
- return <Flyout anchorPoint={anchorPoints.LEFT_TOP}
- content={type === "fill" ? this.fillPicker : this.linePicker}>
- <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
- <div className="color-button-preview" style={{
- backgroundColor: value ?? "121212", width: 15, height: 15,
- display: value === "" || value === "transparent" ? "none" : ""
- }} />
- {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
- </div>
- </Flyout>;
+ // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)}
+ // onPointerLeave={e => this.changeScrolling(true)}>
+ // <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+ // content={type === "fill" ? this.fillPicker : this.linePicker}>
+ return <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+ <div className="color-button-preview" style={{
+ backgroundColor: value ?? "121212", width: 15, height: 15,
+ display: value === "" || value === "transparent" ? "none" : ""
+ }} />
+ {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14 }}>☒</p> : ""}
+ </div>;
+ // </Flyout>
+ // </div>;
}
@@ -699,8 +702,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
<div className="stroke-button">{this.lineButton}</div>
</div>
</div>
- {/* {this._fillBtn ? this.fillPicker : ""}
- {this._lineBtn ? this.linePicker : ""} */}
+ {this._fillBtn ? this.fillPicker : ""}
+ {this._lineBtn ? this.linePicker : ""}
</div>;
}
@@ -826,7 +829,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{
width: this.props.width,
- // overflowY: this.inActions ? "visible" : "scroll"
+ //overflowY: this.scrolling ? "scroll" : "visible"
}} >
<div className="propertiesView-title" style={{ width: this.props.width }}>
Properties
@@ -931,11 +934,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
<div className="propertiesView-fields-title"
onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
style={{ backgroundColor: this.openFields ? "black" : "" }}>
- <div className="propertiesView-fields-title-name">
- Fields {"&"} Tags
+ Fields {"&"} Tags
<div className="propertiesView-fields-title-icon">
- <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
- </div>
+ <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
{!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
@@ -962,12 +963,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
if (this.isPres) {
const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0;
- return <div className="propertiesView" style={{ width: this.props.width }} >
- <div className="propertiesView-title" style={{ width: this.props.width }}>
+ return <div className="propertiesView">
+ <div className="propertiesView-title">
Presentation
- <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
- <FontAwesomeIcon icon="times" color="black" size="sm" />
- </div>
</div>
<div className="propertiesView-name">
{this.editableTitle}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-14 09:08:22 +0000