diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.scss | 60 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 35 |
2 files changed, 47 insertions, 48 deletions
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5e0c9fcbb..c952dc358 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 { @@ -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 1a8ee3ea1..4610c0143 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -632,16 +632,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>; } @@ -686,8 +689,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>; } @@ -813,7 +816,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 @@ -918,11 +921,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"> |