CSS fixes, ref fixes

OpenDroneMap · May 27, 2024 · 79b8b89 · 79b8b89
1 parent 24a64e7
commit 79b8b89
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 10 deletions.
diff --git a/app/static/app/js/components/LayersControlAnnotations.jsx b/app/static/app/js/components/LayersControlAnnotations.jsx
@@ -69,7 +69,8 @@ class AnnotationLayer extends React.Component{
 
     return (<div className="layers-control-layer layers-control-annotations">
       <div className="layer-control-title">
-        <Checkbox bind={[this, 'visible']}/> <a className="layer-label" href="javascript:void(0)" onClick={this.handleFocus}><div className="annotation-name">{meta.name}</div></a> <a href="javascript:void(0)" onClick={this.handleDelete} title={_("Delete")}><i className="fa fa-trash"></i></a>
+        <Checkbox bind={[this, 'visible']}/> <a className="layer-label" href="javascript:void(0)" onClick={this.handleFocus}><div className="annotation-name">{meta.name}</div></a> 
+        <a className="layer-action" href="javascript:void(0)" onClick={this.handleDelete} title={_("Delete")}><i className="fa fa-trash"></i></a>
       </div>
     </div>);
   }
@@ -126,14 +127,15 @@ export default class LayersControlAnnotations extends React.Component {
 
     return (<div className="layers-control-layer">
         <div className="layer-control-title">
-          <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']}/>
-          <a title={_("Annotations")} className="layer-label" href="javascript:void(0);" onClick={this.handleAnnotationsClick}><div className="layer-title"><i className="layer-icon fa fa-sticky-note fa-fw"></i> {_("Annotations")}</div></a>
+          <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']} className="annotation-toggle" />
+          <a title={_("Annotations")} className="layer-label" href="javascript:void(0);" onClick={this.handleAnnotationsClick}><div className="layer-title"><i className="layer-icon fa fa-sticky-note fa-fw"></i> {_("Annotations")}</div></a> 
+          <a className="layer-action" href="javascript:void(0)" onClick={this.handleZoomToClick}><i title={_("Zoom To")} className="fa fa-expand"></i></a>
+          <a className="layer-action" href="javascript:void(0)" onClick={this.handleZoomToClick}><i title={_("Zoom To")} className="fa fa-expand"></i></a>
         </div>
 
-        {this.state.expanded ? 
-        <div className="layer-expanded">
+        <div className={"layer-expanded " + (!this.state.expanded ? "hide" : "")}>
           {layers.map((layer, i) => <AnnotationLayer parent={this} ref={domNode => this.annRefs[i] = domNode} key={i} layer={layer} />)}
-        </div> : ""}
+        </div>
     </div>);
 
    }

diff --git a/app/static/app/js/components/LayersControlLayer.jsx b/app/static/app/js/components/LayersControlLayer.jsx
@@ -297,7 +297,7 @@ export default class LayersControlLayer extends React.Component {
     return (<div className="layers-control-layer">
         <div className="layer-control-title">
             {!this.props.overlay ? <ExpandButton bind={[this, 'expanded']} /> : <div className="paddingSpace"></div>}<Checkbox bind={[this, 'visible']}/>
-            <a title={meta.name} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><i className={"layer-icon " + (meta.icon || "fa fa-vector-square fa-fw")}></i><div className="layer-title">{meta.name}</div></a> <a href="javascript:void(0)" onClick={this.handleZoomToClick}><i title={_("Zoom To")} className="fa fa-expand"></i></a>
+            <a title={meta.name} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><i className={"layer-icon " + (meta.icon || "fa fa-vector-square fa-fw")}></i><div className="layer-title">{meta.name}</div></a> <a className="layer-action" href="javascript:void(0)" onClick={this.handleZoomToClick}><i title={_("Zoom To")} className="fa fa-expand"></i></a>
         </div>
 
         {this.state.expanded ? 

diff --git a/app/static/app/js/components/Toggle.jsx b/app/static/app/js/components/Toggle.jsx
@@ -4,14 +4,16 @@ import '../css/Toggle.scss';
 
 class Toggle extends React.Component {
   static defaultProps = {
+    className: ""
   };
   static propTypes = {
     bind: PropTypes.array.isRequired, // two element array, 
                                     // with first element being the parent element 
                                     // and the second the boolean property to determine visibility
                                     // ex. [this, 'visible']
     trueIcon: PropTypes.string,
-    falseIcon: PropTypes.string
+    falseIcon: PropTypes.string,
+    className: PropTypes.string,
   }
 
   constructor(props){
@@ -26,7 +28,7 @@ class Toggle extends React.Component {
   render(){
     const [parent, prop] = this.props.bind;
     const icon = parent.state[prop] ? this.props.trueIcon: this.props.falseIcon;
-    return (<a className="toggle" href="javascript:void(0);" onClick={this.handleClick}><i className={icon}></i></a>);
+    return (<a className={"toggle " + this.props.className} href="javascript:void(0);" onClick={this.handleClick}><i className={icon}></i></a>);
   }
 }
 

diff --git a/app/static/app/js/css/LayersControlAnnotations.scss b/app/static/app/js/css/LayersControlAnnotations.scss
@@ -1,14 +1,18 @@
+.annotation-toggle{
+    margin-left: 3px;
+}
+
 .layers-control-annotations{
     .layer-control-title{
         align-items: baseline;
         margin-left: 32px;
     }
 
     .layer-label{
-        margin-right: 12px;
         padding-left: 6px;
     }
 
+
     .annotation-name{
         display: inline;
         position: relative;

diff --git a/app/static/app/js/css/LayersControlLayer.scss b/app/static/app/js/css/LayersControlLayer.scss
@@ -12,6 +12,13 @@
             overflow: hidden;
             text-align: left;
             height: 28px;
+            margin-left: 1px;
+        }
+
+        .layer-action{
+            flex-basis: min-content;
+            padding-left: 6px;
+            padding-right: 6px;
         }
 
         select, input{