Merge branch 'master' of https://github.com/LSIIM/WebODM

2024-03-11 22:25:40 -03:00 · 2024-03-11 22:25:40 -03:00 · ec77e5263e
commit ec77e5263e
--- a/app/static/app/js/components/EditTaskForm.jsx
+++ b/app/static/app/js/components/EditTaskForm.jsx
@ -581,8 +581,8 @@ class EditTaskForm extends React.Component {
      taskOptions = (
        <div>
          {tagsField}
-          <div className="form-group">
-            <label className="col-sm-2 control-label">{_("Processing Node")}</label>
+          <div className="form-group col-sm-10 form-group-data">
+            {/* <label className="col-sm-2 control-label">{_("Processing Node")}</label>
              <div className="col-sm-10">
                <select className="form-control" value={this.state.selectedNode.key} onChange={this.handleSelectNode}>
                {this.state.processingNodes.map(node => 
@ -598,7 +598,11 @@ class EditTaskForm extends React.Component {
               <div className="review-options">
                {this.getAvailableOptionsOnlyText(this.state.selectedPreset.options, this.state.selectedNode.options)}
               </div>}
-            </div>
+            </div> */}
+
+            <label className="col-sm-2 control-label">{_("Data")}</label>
+            <input type="text" className="col-sm-10 input-field data-input"/>
+
          </div>

          {this.state.editingPreset ? 
@ -622,22 +626,20 @@ class EditTaskForm extends React.Component {

    return (
      <div className="edit-task-form">
-        <div className="form-group">
+        <div className="form-group col-sm-10">
          <label className="col-sm-2 control-label">{_("Name")}</label>
-          <div className="col-sm-10 name-fields">
-            {this.state.loadingTaskName ? 
-            <i className="fa fa-circle-notch fa-spin fa-fw name-loading"></i>
-            : ""}
-            <input type="text" 
-              onChange={this.handleNameChange} 
-              className="form-control"
-              placeholder={this.state.namePlaceholder} 
-              value={this.state.name}
-            />
-            <button type="button" title={_("Add tags")} onClick={this.toggleTagsField} className="btn btn-sm btn-secondary toggle-tags">
-              <i className="fa fa-tag"></i>
-            </button>
-
+            <div className="col-sm-10 name-fields input-field">
+              {this.state.loadingTaskName ? 
+              <i className="fa fa-circle-notch fa-spin fa-fw name-loading"></i>
+              : ""}
+              <input type="text" 
+                onChange={this.handleNameChange} 
+                className="remove-style name-input"
+                placeholder={this.state.namePlaceholder} 
+                value={this.state.name}/>
+              <button type="button" title={_("Add tags")} onClick={this.toggleTagsField} className="remove-style">
+                <i className="fa fa-tag"></i>
+              </button>
          </div>
        </div>
        {taskOptions}
--- a/app/static/app/js/components/NewTaskPanel.jsx
+++ b/app/static/app/js/components/NewTaskPanel.jsx
@ -131,7 +131,7 @@ class NewTaskPanel extends React.Component {
      <div className="new-task-panel theme-background-highlight">
        <div className="form-horizontal">
          <div className={this.state.inReview ? "disabled" : ""}>
-            <p>{interpolate(_("%(count)s files selected. Please check these additional options:"), { count: this.props.filesCount})}</p>
+            <p className='files-text'>{interpolate(_("%(count)s files selected. Please check these additional options:"), { count: this.props.filesCount})}</p>

            {!filesCountOk ? 
            <div className="alert alert-warning">
@ -153,11 +153,11 @@ class NewTaskPanel extends React.Component {

            {this.state.editTaskFormLoaded && this.props.showResize ?
              <div>
-                <div className="form-group">
+                <div className="form-group resize-images-container">
                  <label className="col-sm-2 control-label">{_("Resize Images")}</label>
                  <div className="col-sm-10">
                      <div className="btn-group">
-                      <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                      <button type="button" className="btn btn-default-s dropdown-toggle" data-toggle="dropdown">
                          {ResizeModes.toHuman(this.state.resizeMode)} <span className="caret"></span>
                      </button>
                      <ul className="dropdown-menu">
@ -174,7 +174,7 @@ class NewTaskPanel extends React.Component {
                      <input 
                          type="number" 
                          step="100"
-                          className="form-control"
+                          className="form-control input-field"
                          onChange={this.handleResizeSizeChange} 
                          value={this.state.resizeSize} 
                      />
@ -195,11 +195,11 @@ class NewTaskPanel extends React.Component {
          {this.state.editTaskFormLoaded ? 
            <div className="form-group">
              <div className="col-sm-offset-2 col-sm-10 text-right">
-                {this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}><i className="glyphicon glyphicon-remove-circle"></i> {_("Cancel")}</button>}
+                {this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}>{_("Cancel")}</button>}
                {this.state.loading ?
                  <button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-notch fa-spin fa-fw"></i>{_("Loading…")}</button>
                  :
-                  <button type="submit" className="btn btn-primary" onClick={this.save} disabled={this.props.filesCount < 1 || !filesCountOk}><i className="glyphicon glyphicon-saved"></i> {!this.state.inReview ? _("Review") : _("Start Processing")}</button>
+                  <button type="submit" className="btn btn-confirm" onClick={this.save} disabled={this.props.filesCount < 1 || !filesCountOk}>{!this.state.inReview ? _("Próximo") : _("Start Processing")}</button>
                }
              </div>
            </div>
--- a/app/static/app/js/css/EditTaskForm.scss
+++ b/app/static/app/js/css/EditTaskForm.scss
@ -46,4 +46,46 @@
            border-bottom-right-radius: 0;
        }
    }
+}
+
+/* ---------------------Button---------------------- */
+
+.form-group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.form-group-data {
+    justify-content: start;
+}
+
+.input-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    outline: none;
+}
+
+.name-input {
+    width: 100%;
+}
+
+.data-input {
+    width: 95px;
+}
+
+.remove-style {
+    background: none;
+    border: none;
+    outline: none;
+}
+
+.fa-tag {
+    color: #14A5A2;
+    transform: scale(1.2);
 }
--- a/app/static/app/js/css/NewTaskPanel.scss
+++ b/app/static/app/js/css/NewTaskPanel.scss
@ -1,7 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
 .new-task-panel{
-    padding: 10px;
+    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
+    border-radius: 20px;
+    background-color: #E3E3E3;

    .alert{
    	margin-top: 4px;
@ -46,4 +50,82 @@
        margin-top: 0;
        margin-left: 10px;
    }
+}
+
+.text-right {
+    display: flex;
+    justify-content: end;
+}
+
+.resize-images-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* ---------------------File Text---------------------- */
+
+.files-text {
+    font-weight: 600;
+    font-family: "Montserrat", sans-serif;
+    color: #838383;
+}
+
+/* ---------------------Cancel Button---------------------- */
+
+.btn-danger {
+    background-color: #AFAFAF;
+    border: none;
+    border-radius: 50px;
+    padding: 15px 20px;
+    transition: all 0.2s;
+}
+
+.btn-danger:hover {
+    background-color: rgb(220, 45, 45);
+}
+
+/* ---------------------Next/Confirm Button---------------------- */
+
+.btn-confirm {
+    color: #fff;
+    background-color: #74B16F;
+    border: none;
+    border-radius: 50px;
+    padding: 15px 35px;
+    transition: all 0.2s;
+}
+
+.btn-confirm:hover {
+    background-color: #529A4C;
+}
+
+/* ---------------------Button Default---------------------- */
+
+.btn-default-s {
+    color: #fff;
+    background-color: #AFAFAF;
+    border-radius: 15px;
+    border: none;
+    transition: all 0.2s;
+}
+
+.btn-default-s:hover, .btn-default-s:active {
+    background-color: #6a6a6a;
+}
+
+/* ---------------------Icons---------------------- */
+
+.caret {
+    width: 10px;
+    height: auto;
+}
+
+.input-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    outline: none;
 }
--- a/app/static/app/js/css/TagsField.scss
+++ b/app/static/app/js/css/TagsField.scss
@ -38,3 +38,11 @@
    }
    
 }
+
+.tags-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    outline: none
+}