diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.scss | 60 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 28 |
2 files changed, 43 insertions, 45 deletions
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5b41db90e..ce0eee744 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 { @@ -141,9 +142,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 { @@ -178,9 +179,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 { @@ -266,9 +267,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; @@ -307,25 +307,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 { @@ -388,9 +381,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 { @@ -674,4 +667,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 89f48fc65..3b449d941 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -598,16 +598,18 @@ 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"> + <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> + </div>; } @@ -844,11 +846,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"> |