Skip to content

Commit 1c44d07

Browse files
stracker-philstracker-phil
committed
Improve task page (filters, sorting, sync, UI)
1 parent 5f4ab1e commit 1c44d07

8 files changed

Lines changed: 309 additions & 78 deletions

File tree

‎assets/css/wpcable.css‎

Lines changed: 142 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -601,12 +601,22 @@ div#TB_window {
601601
float: left;
602602
}
603603

604+
.wpcable_wrap.tasks .tablenav .group-right {
605+
float: right;
606+
}
607+
604608
.wpcable_wrap.tasks .tablenav .group + .group:before {
605609
content: '|';
606610
float: left;
607611
margin: 0 10px 0 0;
608612
}
609613

614+
.wpcable_wrap.tasks .tablenav .group .group-label,
615+
.wpcable_wrap.tasks .tablenav .group-right .group-label {
616+
float: left;
617+
padding: 0 10px 0 0;
618+
}
619+
610620
.wpcable_wrap.tasks .tablenav .filter [data-flag] {
611621
background-color: var(--color);
612622
border-radius: 100px;
@@ -623,39 +633,68 @@ div#TB_window {
623633
.wpcable_wrap.tasks .tablenav .filter [data-flag]:checked {
624634
outline: none;
625635
border-color: #fff;
626-
box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px rgba(30,140,190);
636+
/* box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px rgba(30,140,190); */
637+
box-shadow: none;
627638
}
628639

629640
.wpcable_wrap.tasks .tablenav .filter [data-flag]:checked:before {
630-
opacity: 0;
641+
content: '\f335';
642+
opacity: 1;
643+
margin: -1px 0 0 -2px;
644+
position: absolute;
645+
left: 50%;
646+
top: 50%;
647+
transform: translate(-50%, -50%);
648+
width: auto;
649+
padding: 0;
650+
color: #fff;
651+
text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
631652
}
632653

633654
.task-list .list-item .actions {
634655
opacity: 0;
635656
transition: all 0.3s;
636657
}
637658

659+
.wpcable_wrap.tasks table.widefat thead tr {
660+
cursor: default;
661+
}
662+
663+
.wpcable_wrap.tasks table.widefat thead .col-activity,
664+
.wpcable_wrap.tasks table.widefat thead .col-activity a {
665+
pointer-events: none;
666+
}
667+
638668
.task-list .list-item .col-client img {
639669
width: 40px;
640670
border-radius: 40px;
641671
}
642672

673+
.wpcable_wrap.tasks table.widefat tbody tr > td {
674+
background-color: var(--bgcolor);
675+
}
676+
643677
.wpcable_wrap.tasks table.widefat .col-client {
644-
width: 80px;
678+
width: 60px;
645679
}
646680

647681
.wpcable_wrap.tasks table.widefat .col-workroom {
648682
width: 120px;
649683
}
650684

651685
.wpcable_wrap.tasks table.widefat .col-activity {
652-
width: 70px;
686+
width: 110px;
653687
white-space: nowrap;
688+
text-align: center;
689+
vertical-align: middle;
690+
box-shadow: 150px 0 0 #00000005 inset;
654691
}
655692

656693
.wpcable_wrap.tasks table.widefat .col-value {
657694
width: 70px;
658695
white-space: nowrap;
696+
box-shadow: 150px 0 0 #00000005 inset;
697+
text-align: center;
659698
}
660699

661700
.wpcable_wrap.tasks table.widefat .col-title {
@@ -669,57 +708,142 @@ div#TB_window {
669708

670709
.wpcable_wrap.tasks table.widefat tbody .col-workroom a {
671710
color: var(--color, #0073aa);
711+
transition: all 0.3s;
712+
}
713+
714+
.wpcable_wrap.tasks table.widefat tbody .col-workroom a:hover,
715+
.wpcable_wrap.tasks table.widefat tbody .col-workroom a:focus {
716+
color: #0073aa;
672717
}
673718

674719
.wpcable_wrap.tasks table.widefat tbody .col-client {
675720
box-shadow: 4px 0 0 0 var(--color, #0000) inset;
676721
}
677722

723+
.wpcable_wrap.tasks table.widefat .col-activity .activity-date,
724+
.wpcable_wrap.tasks table.widefat .col-activity .activity-time {
725+
color: #FFF;
726+
margin: 0 auto;
727+
display: inline-block;
728+
padding: 1px 6px;
729+
border-radius: 10px;
730+
cursor: default;
731+
}
732+
678733
.wpcable_wrap.tasks table.widefat .col-activity .activity-date {
679-
font-size: 12px;
734+
font-size: 14px;
680735
}
681736

682737
.wpcable_wrap.tasks table.widefat .col-activity .activity-time {
683-
font-size: 13px;
738+
font-size: 14px;
684739
font-weight: bold;
740+
display: none;
741+
}
742+
743+
.wpcable_wrap.tasks table.widefat .state-canceled .task-title,
744+
.wpcable_wrap.tasks table.widefat .state-lost .task-title {
745+
font-weight: normal !important;
746+
opacity: 0.3;
747+
}
748+
749+
.wpcable_wrap.tasks table.widefat .state-canceled .row-actions,
750+
.wpcable_wrap.tasks table.widefat .state-canceled .col-value > *,
751+
.wpcable_wrap.tasks table.widefat .state-lost .row-actions,
752+
.wpcable_wrap.tasks table.widefat .state-lost .col-value > * {
753+
display: none !important;
754+
}
755+
756+
.wpcable_wrap.tasks table.widefat .age-current .activity-date {
757+
opacity: 0;
685758
}
686759

687760
.wpcable_wrap.tasks table.widefat .age-today .activity-date {
688-
display: none;
761+
opacity: 0.3;
762+
}
763+
764+
.wpcable_wrap.tasks table.widefat .age-yesterday .activity-date {
765+
opacity: 0.5;
766+
}
767+
768+
.wpcable_wrap.tasks table.widefat .age-current .activity-date,
769+
.wpcable_wrap.tasks table.widefat .age-today .activity-date,
770+
.wpcable_wrap.tasks table.widefat .age-yesterday .activity-date {
771+
font-size: 12px;
772+
color: #333;
773+
}
774+
775+
.wpcable_wrap.tasks table.widefat .age-current .activity-time,
776+
.wpcable_wrap.tasks table.widefat .age-today .activity-time,
777+
.wpcable_wrap.tasks table.widefat .age-yesterday .activity-time {
778+
display: inline-block;
779+
}
780+
781+
.wpcable_wrap.tasks table.widefat .age-current .activity-time {
782+
background-color: #0B08;
689783
}
690784

691785
.wpcable_wrap.tasks table.widefat .age-today .activity-time {
692-
color: #080;
786+
background-color: #0868;
693787
}
694788

695-
.wpcable_wrap.tasks table.widefat .age-yesterday .col-activity {
696-
color: #620;
789+
.wpcable_wrap.tasks table.widefat .age-yesterday .activity-time {
790+
background-color: #2468;
697791
}
698792

699-
.wpcable_wrap.tasks table.widefat .age-week .col-activity {
700-
color: #842;
793+
.wpcable_wrap.tasks table.widefat .age-week .activity-date {
794+
background-color: #9308;
701795
}
702796

703-
.wpcable_wrap.tasks table.widefat .age-2weeks .col-activity {
704-
color: #a77;
797+
.wpcable_wrap.tasks table.widefat .age-2weeks .activity-date {
798+
background-color: #b668;
705799
}
706800

707-
.wpcable_wrap.tasks table.widefat .age-older .col-activity {
708-
color: #aaa;
801+
.wpcable_wrap.tasks table.widefat .age-older .activity-date {
802+
background-color: #aaa8;
709803
}
710804

711805
.wpcable_wrap.tasks table.widefat .col-value .client-value .value {
712806
opacity: 0.5;
713807
}
714808

715-
.wpcable_wrap.tasks tr.task-hidden {
716-
opacity: 0.7;
809+
.wpcable_wrap.tasks table.widefat .col-value .your-value,
810+
.wpcable_wrap.tasks table.widefat .col-value .client-value {
811+
cursor: default;
812+
padding: 0 6px;
813+
border-radius: 20px;
814+
transition: all 0.3s;
815+
}
816+
817+
.wpcable_wrap.tasks table.widefat .col-value .your-value:hover,
818+
.wpcable_wrap.tasks table.widefat .col-value .client-value:hover {
819+
background-color: #0006;
820+
color: #fff;
821+
text-shadow: 0 1px 0 #0008;
822+
}
823+
824+
.wpcable_wrap.tasks table.widefat .col-value .your-value:hover .value,
825+
.wpcable_wrap.tasks table.widefat .col-value .client-value:hover .value {
826+
opacity: 1;
717827
}
718828

829+
.wpcable_wrap.tasks table.widefat .col-value .value small {
830+
opacity: 0.5;
831+
}
832+
833+
.wpcable_wrap.tasks tr.task-preferred .task-title {
834+
font-weight: bold;
835+
}
836+
837+
.wpcable_wrap.tasks tr.task-hidden .col-workroom,
719838
.wpcable_wrap.tasks tr.task-hidden .task-title {
720839
text-decoration: line-through;
721840
}
722841

842+
.wpcable_wrap.tasks tr.task-hidden .row-actions {
843+
visibility: hidden;
844+
display: none;
845+
}
846+
723847
.task-flags {
724848
display: inline-block;
725849
margin-left: 10px;

‎assets/js/wpcable.js‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,13 @@ jQuery(document).ready(function () {
214214
for ( var i = 0; i < wpcable.tasks.length; i++ ) {
215215
var task = wpcable.tasks[i];
216216

217-
if ( filterState !== 'all' && filterState !== task.state ) {
217+
if ( filterState === 'all' ) {
218+
// Display all tasks.
219+
} else if ( filterState === 'lost' && (task.state === 'lost' || task.flag === 'lost')) {
220+
// Display lost tasks list.
221+
} else if ( filterState === task.state && task.flag !== 'lost' ) {
222+
// Display single task state list.
223+
} else {
218224
continue;
219225
}
220226
if ( false === task._visible ) {
@@ -315,11 +321,16 @@ jQuery(document).ready(function () {
315321
if ( !task.subscribed && currFilters.subscribed ) {
316322
task._visible = false;
317323
}
324+
if ( !task.preferred && currFilters.preferred ) {
325+
task._visible = false;
326+
}
327+
318328
if ( currFlags.length ) {
319-
if ( -1 === currFlags.indexOf( task.flag ) ) {
329+
if ( -1 !== currFlags.indexOf( task.flag ) ) {
320330
task._visible = false;
321331
}
322332
}
333+
323334
if (filterRe) {
324335
if (
325336
-1 === task.title.search( filterRe ) &&
@@ -356,15 +367,20 @@ jQuery(document).ready(function () {
356367
totals.all = 0;
357368
for ( var i = 0; i < wpcable.tasks.length; i++ ) {
358369
var task = wpcable.tasks[i];
370+
var state = task.state;
371+
372+
if ('lost' === task.flag) {
373+
state = 'lost';
374+
}
359375

360376
if ( false === task._visible ) {
361377
continue;
362378
}
363379

364-
if ( undefined === totals[task.state] ) {
365-
totals[task.state] = 0;
380+
if ( undefined === totals[state] ) {
381+
totals[state] = 0;
366382
}
367-
totals[task.state]++;
383+
totals[state]++;
368384
totals.all++;
369385
}
370386

@@ -383,6 +399,9 @@ jQuery(document).ready(function () {
383399
if ( ! list.isClick ) {
384400
return;
385401
}
402+
if ( notesMde ) {
403+
closeEditor();
404+
}
386405

387406
var row = jQuery( this ).closest( 'tr' );
388407
var task = row.data( 'task' );
@@ -395,9 +414,13 @@ jQuery(document).ready(function () {
395414
element: notesForm.find( 'textarea' ).val( task.notes )[0],
396415
status: false
397416
});
417+
notesMde.codemirror.focus();
418+
notesMde.codemirror.setCursor(notesMde.codemirror.lineCount(), 0);
398419

399420
notesForm.on( 'click', '.btn-save', closeEditorSave );
400421
notesForm.on( 'click', '.btn-cancel', closeEditor );
422+
423+
list.isClick = false;
401424
}
402425

403426
function closeEditor() {
@@ -412,6 +435,27 @@ jQuery(document).ready(function () {
412435
notesForm.hide();
413436
}
414437

438+
function editorMouseDown( ev ) {
439+
list.isClick = true
440+
list.downPos = {
441+
sum: ev.offsetX + ev.offsetY,
442+
x: ev.offsetX,
443+
y: ev.offsetY
444+
};
445+
}
446+
447+
function editorMouseMove( ev ) {
448+
if ( ! list.isClick ) {
449+
return;
450+
}
451+
452+
var moved = Math.abs(ev.offsetX + ev.offsetY - list.downPos.sum)
453+
454+
if (moved > 5) {
455+
list.isClick = false;
456+
}
457+
}
458+
415459
function closeEditorSave() {
416460
var task = notesForm.data( 'task' );
417461
task.notes = notesMde.value();
@@ -444,6 +488,10 @@ jQuery(document).ready(function () {
444488
},
445489
function done( res ) {
446490
task.$el.trigger( 'task:refresh' );
491+
492+
updateFilters();
493+
initFilters();
494+
447495
if ( 'function' === typeof onDone ) {
448496
onDone();
449497
}
@@ -457,6 +505,11 @@ jQuery(document).ready(function () {
457505
updateFilters();
458506
refreshList();
459507

508+
notesMde = new SimpleMDE({
509+
element: notesForm.find( 'textarea' )[0],
510+
status: false
511+
});
512+
460513
jQuery( window ).on( 'hashchange', updateFilters );
461514
filterCb.on( 'click', function() { updateFilters(); initFilters(); } );
462515
flagCb.on( 'click', function() { updateFilters(); initFilters(); } );
@@ -470,6 +523,6 @@ jQuery(document).ready(function () {
470523

471524
list.on( 'click', '.color-flag [data-flag]', setColorFlag );
472525
list.on( 'click', '.notes-body', startEditor )
473-
.on( 'mousedown', '.notes-body', function() { list.isClick = true })
474-
.on( 'mousemove', '.notes-body', function() { list.isClick = false });
526+
.on( 'mousedown', '.notes-body', editorMouseDown)
527+
.on( 'mousemove', '.notes-body', editorMouseMove);
475528
});

0 commit comments

Comments
 (0)