From 4b283ea7b7fe2197ad79bca1c62ccf802d123603 Mon Sep 17 00:00:00 2001 From: Andrew Lorimer Date: Sat, 17 Aug 2019 17:27:23 +1000 Subject: [PATCH] add drag handles --- admin.js | 25 ++++++++++++++++++++----- options.html | 12 ------------ options.js | 12 ------------ style.css | 46 ++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 60 insertions(+), 35 deletions(-) diff --git a/admin.js b/admin.js index 2b82da7..96e4d46 100644 --- a/admin.js +++ b/admin.js @@ -71,7 +71,7 @@ var userListsCallback = function(lists) { var title = document.createElement("div"); title.setAttribute("class", "title"); - title.appendChild(grip) + ul.appendChild(grip) ul.appendChild(title); var p = document.createElement("p"); @@ -171,6 +171,7 @@ function edit() { addbtn.style.display = "flex"; var cols = document.getElementsByTagName("ul"); for (let col of cols) { + col.style.bottom = "26px"; title = col.getElementsByClassName("title")[0]; rmbutton = document.createElement("span"); rmbutton.setAttribute("class", "rmcol"); @@ -188,24 +189,35 @@ function edit() { }); title.appendChild(rmbutton); title.getElementsByClassName("add")[0].style.display = "flex"; - title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)"; + titlep = title.getElementsByTagName("p")[0]; + editTitle = document.createElement("input"); + titlep.insertAdjacentHTML("afterend", ""); + titlep.remove(); + col.getElementsByClassName("grip")[0].style.display = "inline-block"; } editMode = true; } function closeEdit(editbtn) { - editbtn.style.background = hoverbg; + editbtn.style.background = ""; editbtn.innerText = "e"; addbtn = document.getElementById("addcol"); addbtn.style.display = "none"; var cols = document.getElementsByTagName("ul"); for (let col of cols) { + col.style.bottom = "0"; rmbutton = col.getElementsByClassName("title")[0].getElementsByClassName("rmcol")[0]; rmbutton.remove(); title = col.getElementsByClassName("title")[0]; title.getElementsByClassName("add")[0].style.display = ""; - title.getElementsByTagName("p")[0].style.width = "calc(100% - 45px)"; + editTitle = title.getElementsByClassName("colname")[0]; + titlep = document.createElement("p"); + titlep.innerText = editTitle.value; + editTitle.remove(); + title.appendChild(titlep); + col.getElementsByClassName("grip")[0].style.display = "none"; } + save(); editMode = false; } @@ -250,7 +262,10 @@ function addCol() { }); title.appendChild(rmbutton); title.getElementsByClassName("add")[0].style.display = "flex"; - title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)"; + titlep = title.getElementsByTagName("p")[0]; + editTitle = document.createElement("input"); + titlep.insertAdjacentHTML("afterend", ""); + titlep.remove(); mainlist.push(["new"]); save(); diff --git a/options.html b/options.html index 582a242..54a63f5 100644 --- a/options.html +++ b/options.html @@ -10,18 +10,6 @@ - - - - - - - - - - - - diff --git a/options.js b/options.js index a12b9c9..7580131 100644 --- a/options.js +++ b/options.js @@ -1,15 +1,9 @@ function save_options() { - var l1name = document.getElementById('l1').value; - var l2name = document.getElementById('l2').value; - var l3name = document.getElementById('l3').value; var bgvalue = document.getElementById('bg').value; var fgvalue = document.getElementById('fg').value; console.log(bgvalue); chrome.storage.sync.set({ - "l1name": l1name, - "l2name": l2name, - "l3name": l3name, "bgvalue": bgvalue, "fgvalue": fgvalue, }, function() { @@ -21,15 +15,9 @@ function save_options() { function restore_options() { chrome.storage.sync.get({ - "l1name": "Productivity", - "l2name": "General", - "l3name": "Social", "bgvalue": "#2E3440", "fgvalue": "#D8DEE9"}, function(items) { - document.getElementById('l1').value = items["l1name"]; - document.getElementById('l2').value = items["l2name"]; - document.getElementById('l3').value = items["l3name"]; document.getElementById('bg').value = items["bgvalue"]; document.getElementById('fg').value = items["fgvalue"]; }); diff --git a/style.css b/style.css index ac31d9e..4bd955f 100644 --- a/style.css +++ b/style.css @@ -29,6 +29,7 @@ body { } ul { + position: relative; list-style: none; padding: 0; width: 10rem; @@ -58,11 +59,21 @@ input.url { margin-top: 2.5px } +input.colname { + width: calc(100% - 68px); + height: 19px; + margin: 14px 0 6px 0; + border: 2px var(--hover-bg) dashed; + background-color: var(--default-bg); + color: inherit; + font-family: inherit; +} + .remove { width: 29px; height: 35px; padding: 0; - background: var(--hover-bg); + background-color: var(--hover-bg); float: right; text-align: center; justify-content: center; @@ -85,11 +96,11 @@ input.url { } .save:hover, .save:focus, .save:focus-within { - background: var(--hover-grn); + background-color: var(--hover-grn); } .remove:hover { - background: var(--remove-bg); + background-color: var(--remove-bg); } #edit, #addcol { @@ -104,6 +115,7 @@ input.url { justify-content: center; align-items: center; cursor: pointer; + font-weight: bold; } #edit:hover { @@ -184,7 +196,7 @@ a { display: none; } -a, ul > .title > p { +a, ul > .title > p, .colname { width: calc(100% - 45px); display: inline-block; } @@ -197,6 +209,29 @@ li.sortable-chosen.sortable-ghost { /* border: 2px dashed var(--default-fg);*/ } +span.grip { + content: '....'; + position: relative; + right: 20px; + top: 35px; + width: 10px; + height: 20px; + display: none; + overflow: hidden; + line-height: 5px; + padding: 3px 4px; + cursor: move; + vertical-align: middle; + font-size: 12px; + font-family: sans-serif; + font-weight: bold; + letter-spacing: 2px; +} + +span.grip::after { + content: '.. .. .. ..'; +} + .glyphicon-move { cursor: move; cursor: -webkit-grabbing; @@ -211,6 +246,5 @@ li.sortable-chosen.sortable-ghost { .title p { width: 160px; - margin-left: 0.5rem; - margin-bottom: 0.5rem !important; + margin: 16px 0 8px 0; } -- 2.47.1

Column 1
Column 2
Column 3
Background