Skip to content

Commit 2e15788

Browse files
KatharsasKatharsas
committed
Improve new task form UI
- Fixed missing auto-complete in VSCode for JQuery - Reordered new task dialog inputs, adjusted style, added auto-wildcard for filename (see #123) - Fixed new task dialog textarea resizing - Improved explanation of new task dialog asset filename input field
1 parent 8adb2ff commit 2e15788

File tree

7 files changed

+101
-67
lines changed

7 files changed

+101
-67
lines changed

‎src/main/frontend/javascript/lib/jquery.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
/** @type {JQueryStatic} */
12
var $ = global.jQuery;
23
export default $;

‎src/main/frontend/javascript/shared/TaskForm.js

+24-4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@ var TaskForm = (function() {
2121
var $new = $("#newTaskButton");
2222
var $cancel = $("#cancelTaskButton");
2323
var $submit = $("#submitTaskButton");
24+
25+
var $assetPath;
26+
var $assetPathInput;
27+
var $nameInput;
28+
29+
const WILDCARD_FILENAME = "%filename%";
30+
31+
function initElements() {
32+
$assetPath = $form.find(".taskForm-element-path");
33+
$assetPathInput = $assetPath.find("input");
34+
$nameInput = $form.find(".taskForm-element-name input");
35+
}
2436

2537
$new.on("click", function() {
2638
show();
@@ -68,6 +80,7 @@ var TaskForm = (function() {
6880
Ajax.get(contextUrl + "/tasks/renderTaskForm")
6981
.then(function(data) {
7082
$form.html(data.taskFormHtml);
83+
initElements();
7184
currentlyEditedId = data.editedTaskIdLink;
7285
if(currentlyEditedId !== null) {
7386
// if editing, hide type selection
@@ -85,10 +98,17 @@ var TaskForm = (function() {
8598

8699
function switchAssetPath($taskElementType) {
87100
var selected = $taskElementType.find(":selected").val();
88-
var $path = $form.find("#taskForm-element-path");
89-
switch(selected) {
90-
case "GENERAL": $path.hide();break;
91-
default: $path.show();break;
101+
var isTypeGeneral = selected === "GENERAL";
102+
$assetPath.toggleClass("inactive", isTypeGeneral);
103+
$assetPathInput.prop("disabled", isTypeGeneral);
104+
if (!isTypeGeneral) {
105+
if ($nameInput.val().length === 0) {
106+
$nameInput.val(WILDCARD_FILENAME);
107+
}
108+
} else {
109+
if ($nameInput.val() === WILDCARD_FILENAME) {
110+
$nameInput.val("");
111+
}
92112
}
93113
}
94114

‎src/main/frontend/sass/pages/tasks/_tasks.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
}
2525

2626
.list {
27-
margin-bottom: 50px;
27+
margin-top: 40px;
28+
margin-bottom: 40px;
2829
}
2930

3031
.list-header {
@@ -181,6 +182,10 @@ $padding-wb-horizontal: 10;
181182
margin-right:2em;
182183
}
183184

185+
#newTaskButton {
186+
margin-top: 10px;
187+
}
188+
184189
#newTaskButton, #submitTaskButton, #cancelTaskButton {
185190
width:9em;
186191
}

‎src/main/frontend/sass/shared/_task-form.scss

+20-13
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
1-
#taskForm {
2-
//this allows using height 100% for textareas so textareas fills container on resize
3-
display:table-cell;
4-
}
5-
61
.taskForm-group {
7-
float:left;
82
margin-right:20px;
93
margin-bottom:20px;
104
resize:horizontal;
115
overflow:hidden;
12-
width:25em;
6+
width:27em;
7+
}
8+
.taskForm-group.textArea{
9+
resize:both;
10+
}
11+
.taskForm-group.textArea .taskForm-element.textArea {
12+
height: calc(100% - (8px * 2));
13+
.taskForm-input {
14+
height: 100%;
15+
textarea {
16+
resize:none;
17+
}
18+
}
1319
}
1420

1521
.taskForm-element {
1622
margin:8px 15px;
1723
}
18-
.taskForm-group.textArea{
19-
resize:both;
20-
}
21-
.taskForm-group.textArea .taskForm-Element textarea{
22-
resize:none;
24+
.taskForm-element-path.inactive {
25+
color: #666;
26+
input {
27+
background-color: #555;
28+
border-color: #666;
29+
}
2330
}
2431

2532
.taskForm-description {
2633
position:absolute;
2734
min-width:5em;
2835
}
2936
.taskForm-input {
30-
margin-left:5em;
37+
margin-left:7em;
3138

3239
input, select, textarea {
3340
width:100%;

‎src/main/resources/i18n/messages_de.properties

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ tasks.new.cancel = Abbrechen
1919
tasks.pinned = Meine Pinnwand
2020
tasks.workbench = Arbeitsfläche
2121

22-
all_taskForm.asset_name = Name
23-
all_taskForm.text=Bitte einen Namen für die neue Asset-Datei eingeben.
24-
all_taskForm.text2=Wenn der Name existierenden Assets entspricht (neu oder original), werden diese mit der Aufgabe verknüpft. Beispiel: "MeineTextur.tga"
22+
all_taskForm.asset_name = Dateiname
23+
all_taskForm.text=Bitte den Namen der Asset-Datei angeben, um die es bei dieser Aufgabe geht.
24+
all_taskForm.text2=Beispiel: "MeineTextur.tga"
2525

2626
#all_template.tag
2727
#=========================

‎src/main/resources/i18n/messages_en.properties

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ tasks.new.cancel = Cancel
1919
tasks.pinned = My Pinboard
2020
tasks.workbench = Workbench
2121

22-
all_taskForm.asset_name = Name
23-
all_taskForm.text=Please enter a name for the new asset file.
24-
all_taskForm.text2=If it matches any existing asset (new or original), those will be linked with the task. Example: "MyTexture.tga"
22+
all_taskForm.asset_name = Filename
23+
all_taskForm.text=Please enter the name of the asset file that this task is about.
24+
all_taskForm.text2=Example: "MyTexture.tga"
2525

2626
#all_template.tag
2727
#===============================

‎src/main/webapp/WEB-INF/ftl/all_taskForm.html.ftl

+44-43
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,59 @@
55
<@s.bind path=path/>
66
<#assign taskForm=.vars[path]>
77

8-
<div class="taskForm-group">
9-
<!-- ####################### PRIORITY -->
10-
<div class="taskForm-element">
8+
<div id="taskForm-group-type" class="taskForm-group">
9+
<!-- ####################### TYPE -->
10+
<div id="taskForm-element-type" class="taskForm-element">
1111
<div class="taskForm-description">
12-
<@s.message taskForm.priority.getTypeKey() />:
12+
<@s.message taskForm.type.getTypeKey() />
1313
</div>
1414
<div class="taskForm-input input">
15-
<@m.formSelectEnum path=(path+".priority")
16-
enum = taskForm.priority/>
15+
<@m.formSelectEnum path=(path+".type")
16+
enum = taskForm.type
17+
class = "taskForm-type-select" />
18+
</div>
19+
</div>
20+
<!-- ####################### ASSET NAME -->
21+
<div class="taskForm-element taskForm-element-path">
22+
<div class="taskForm-hint">
23+
<@s.message "all_taskForm.text" /><br/>
24+
<@s.message "all_taskForm.text2" /><br/>
25+
</div>
26+
<div class="taskForm-description">
27+
<@s.message "all_taskForm.asset_name" />
28+
</div>
29+
<div class="taskForm-input input">
30+
<@m.formInput path=(path+".assetName") value="" />
1731
</div>
1832
</div>
33+
</div>
34+
<div class="taskForm-group">
1935
<!-- ####################### TITLE -->
20-
<div class="taskForm-element">
36+
<div class="taskForm-element taskForm-element-name">
2137
<div class="taskForm-description">
22-
<@s.message "tasks.title" />:
38+
<@s.message "tasks.title" />
2339
</div>
2440
<div class="taskForm-input input">
25-
<@m.formInput path=(path+".name") />
41+
<@m.formInput path=(path+".name") class="taskForm-name-input" />
42+
</div>
43+
</div>
44+
</div>
45+
<!-- ####################### DETAILS -->
46+
<div class="taskForm-group textArea">
47+
<div class="taskForm-element textArea">
48+
<div class="taskForm-description">
49+
<@s.message "tasks.details"/>
50+
</div>
51+
<div class="taskForm-input input">
52+
<@m.formTextarea path=(path+".details") rows="4" cols="1" />
2653
</div>
2754
</div>
2855
</div>
2956
<div class="taskForm-group">
3057
<!-- ####################### LABEL -->
3158
<div class="taskForm-element">
3259
<div class="taskForm-description">
33-
<@s.message "tasks.label"/>:
60+
<@s.message "tasks.label"/>
3461
</div>
3562
<div class="taskForm-input input">
3663
<@m.formInput path=(path+".label") autocomplete="off" />
@@ -48,22 +75,21 @@
4875
</div>
4976
</div>
5077
</div>
51-
<!-- ####################### DETAILS -->
52-
<div class="taskForm-group textArea">
78+
<div class="taskForm-group">
79+
<!-- ####################### PRIORITY -->
5380
<div class="taskForm-element">
5481
<div class="taskForm-description">
55-
<@s.message "tasks.details"/>:
82+
<@s.message taskForm.priority.getTypeKey() />
5683
</div>
5784
<div class="taskForm-input input">
58-
<@m.formTextarea path=(path+".details") rows="4" cols="1" />
85+
<@m.formSelectEnum path=(path+".priority")
86+
enum = taskForm.priority/>
5987
</div>
6088
</div>
61-
</div>
62-
<div class="taskForm-group">
6389
<!-- ####################### STATUS -->
6490
<div class="taskForm-element">
6591
<div class="taskForm-description">
66-
<@s.message taskForm.status.typeKey />:
92+
<@s.message taskForm.status.typeKey />
6793
</div>
6894
<div class="taskForm-input input">
6995
<@m.formSelectEnum path=(path+".status") enum=taskForm.status />
@@ -72,7 +98,7 @@
7298
<!-- ####################### ASSIGNED -->
7399
<div class="taskForm-element">
74100
<div class="taskForm-description">
75-
<@s.message "tasks.assigned"/>:
101+
<@s.message "tasks.assigned"/>
76102
</div>
77103
<div class="taskForm-input input">
78104
<@m.formSelect path=(path+".assigned")>
@@ -84,28 +110,3 @@
84110
</div>
85111
</div>
86112
</div>
87-
<div id="taskForm-group-type" class="taskForm-group">
88-
<!-- ####################### TYPE -->
89-
<div id="taskForm-element-type" class="taskForm-element">
90-
<div class="taskForm-description">
91-
<@s.message taskForm.type.getTypeKey() />:
92-
</div>
93-
<div class="taskForm-input input">
94-
<@m.formSelectEnum path=(path+".type")
95-
enum = taskForm.type />
96-
</div>
97-
</div>
98-
<!-- ####################### ASSET NAME -->
99-
<div id="taskForm-element-path" class="taskForm-element">
100-
<div class="taskForm-hint">
101-
<@s.message "all_taskForm.text" /><br/>
102-
<@s.message "all_taskForm.text2" /><br/>
103-
</div>
104-
<div class="taskForm-description">
105-
<@s.message "all_taskForm.asset_name" />
106-
</div>
107-
<div class="taskForm-input input">
108-
<@m.formInput path=(path+".assetName") value="" />
109-
</div>
110-
</div>
111-
</div>

0 commit comments

Comments
 (0)