From: Damyan Ivanov Date: Sat, 5 Mar 2022 21:27:40 +0000 (+0000) Subject: move edi list trigger to list name heading X-Git-Url: https://git.ktnx.net/?a=commitdiff_plain;h=948c49fb7f8fabddc217fcedc3e88a9e315ba661;p=lsl.git move edi list trigger to list name heading no need to be able to edit non-selected lists. that would require that pencil buttons are present for all lists (because of phones) --- diff --git a/public/css/style.css b/public/css/style.css index 7ed63f7..f419d54 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -35,7 +35,7 @@ input { } h1 { -font-size: 200%; +font-size: 150%; color: #000; } @@ -51,7 +51,7 @@ background-color: #ddd; display: grid; margin: 0 1em 1em 1em; } -@media (min-width: 640pt) { +@media (min-width: 500pt) { #page { grid-template-columns: auto minmax(25%,20em); grid-column-gap: 1em; @@ -66,7 +66,6 @@ padding: 1em; } #sidebar { - min-width: 15em; } #about, #getting-started { @@ -74,6 +73,13 @@ padding-left: 75px; padding-right: 30px; } +#head-list-name { + display: grid; + grid-template-columns: auto 2em; + grid-column-gap: 1ex; + min-height: 2em; + align-items: center; +} #header h1, #header h2 {margin: 0} #header { font-weight: bold; } @@ -178,9 +184,8 @@ font-size: 10px; opacity: 1; padding: 0 0.5ex; } -.list-edit-trigger:hover { - background: hsla(0, 0%, 80%, 1); - border-left: 1px solid black; +#list-edit-trigger:hover { + background: hsla(0, 0%, 90%, 1); } #busy-screen { @@ -231,23 +236,22 @@ ul#lists > li.selected { #new-list-item { margin-top: 1em; } -span.list-edit-trigger { - visibility: hidden; - opacity: 0; +#list-edit-trigger { transition: 0.25s; - height: 100%; - min-width: 2em; + height: 2em; + width: 2em; display: grid; align-items: center; justify-items: center; -} -ul#lists > li:hover span.list-edit-trigger { - visibility: visible; - opacity: 1; + border-radius: 0.75ex; } ul#lists > li.editing span.ui-icon-disk { display: inline-block; } +ul#list-items { + padding: 0; +} + .ui-widget-overlay { opacity: 0.3; } diff --git a/public/javascripts/lsl.js b/public/javascripts/lsl.js index 46eebf7..7ca9c80 100644 --- a/public/javascripts/lsl.js +++ b/public/javascripts/lsl.js @@ -80,15 +80,14 @@ function select_list(new_selected_list) { selected_list = new_selected_list; } -function edit_list(li) { - li.addClass('editing'); - +function edit_list() { var d = $('
') .append( $('
') .append( $('').text('List name'), - $('').val(li.data('lsl-name')) + $('') + .val(selected_list.data('lsl-name')) ) ); @@ -96,9 +95,6 @@ function edit_list(li) { autoOpen: true, modal: true, title: 'Edit list', - close: ()=>{ - li.removeClass('editing'); - }, width: 'max-content', buttons: [ { @@ -106,7 +102,7 @@ function edit_list(li) { icon: 'ui-icon-trash', text: 'Delete', click: () => { - delete_list(li, d); + delete_list(d); }, }, { @@ -117,38 +113,41 @@ function edit_list(li) { icon: 'ui-icon-disk', text: 'OK', click: () => { - save_list(li, d); + save_list(d); }, }, ], }); } -function delete_list(li, dlg) { - // TODO: fetch all list items and store all data in a "Deleted" +function delete_list(dlg) { + // TODO: store all data including list items in a "Deleted" // pop-up with an "Undo" link that can be used to restore the list var lists_ver = lists_version; - $.ajax( li.data('lsl-uri'), + $.ajax( selected_list.data('lsl-uri'), { type: 'DELETE' } ) .done((d)=>{ lists_version = lists_ver + 1; - if (li.hasClass('selected')) { - var new_selected = li.next(); + var deleted_list = selected_list; + + var new_selected = deleted_list.next(); + if (new_selected.length) { + select_list(new_selected) + } + else { + new_selected = deleted_list.prev(); if (new_selected.length) { - select_list(new_selected) + select_list(new_selected); } else { - new_selected = li.prev(); - if (new_selected.length) { - select_list(new_selected); - } - else { - $('#page').removeClass('have-lists'); - } + $('#page').removeClass('have-lists'); } } - li.remove(); + deleted_list.remove(); + dlg.dialog('destroy'); + got_lists_version(d.lists_version); + }); dlg.dialog('destroy'); got_lists_version(d.lists_version); }); @@ -199,10 +198,6 @@ function load_lists() { .append( $('') .text(list.name) - ) - .append( - $('') - .append('') ); lists.append(list_item); } @@ -320,14 +315,14 @@ $(function(){ return true; }); - $('ul#lists') + $('#lists') .on('click', 'li', ev=>{ select_list($(ev.target).closest('li')); - }) - .on('click', 'li > span.list-edit-trigger', ev => { - edit_list($(ev.target).closest('li')); - return false; }); + $('#list-edit-trigger').on('click', ev => { + edit_list(); + return false; + }); $('#new-list-item button').on('click', handle_new_list_item_submission); $('#new-list-item input').on('keypress', ev => { if (13 == ev.keyCode) { diff --git a/views/index.tt b/views/index.tt index 8e13575..069f5f4 100644 --- a/views/index.tt +++ b/views/index.tt @@ -4,7 +4,12 @@