add drag handles

diff --git a/admin.js b/admin.js
index 2b82da75484393dec8d2f4e1f971cadb297d34a3..96e4d4609d0e7ea66e44272ace0b05f9ffcb41ea 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -71,7 +71,7 @@ var userListsCallback = function(lists) {
 
     var title = document.createElement("div");
     title.setAttribute("class", "title");
 
     var title = document.createElement("div");
     title.setAttribute("class", "title");

-    title.appendChild(grip)
+    ul.appendChild(grip)

     ul.appendChild(title);
 
     var p = document.createElement("p");
     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) {
   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");
     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.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", "<input type='text' class='colname' placeholder='category' value='" + titlep.innerText + "'>");
+    titlep.remove();
+    col.getElementsByClassName("grip")[0].style.display = "inline-block";

   }
   editMode = true;
 }
 
 function closeEdit(editbtn) {
   }
   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) {
   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 = "";
     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;
 }
 
   editMode = false;
 }
 


@@ -250,7 +262,10 @@ function addCol() {
   });
   title.appendChild(rmbutton);
   title.getElementsByClassName("add")[0].style.display = "flex";
   });
   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", "<input type='text' class='colname' placeholder='category'>");
+  titlep.remove();

   
   mainlist.push(["new"]);
   save();
   
   mainlist.push(["new"]);
   save();

diff --git a/options.html b/options.html
index 582a242f011ddb3222220aa7d71404c81baa1bf9..54a63f5fb6d3110085a685a164359494fa169a87 100644 (file)
--- a/options.html
+++ b/options.html
@@ -10,18 +10,6 @@
 
   <body>
     <table>
 
   <body>
     <table>

-      <tr>
-        <td>Column 1</td>
-        <td><input type="text" id="l1"></td>
-      </tr>
-      <tr>
-        <td>Column 2</td>
-        <td><input type="text" id="l2"></td>
-      </tr>
-      <tr>
-        <td>Column 3</td>
-        <td><input type="text" id="l3"></td>
-      </tr>

       <tr>
         <td>Background</td><td><input type="text" id="bg"></td>
       </tr>
       <tr>
         <td>Background</td><td><input type="text" id="bg"></td>
       </tr>

diff --git a/options.js b/options.js
index a12b9c9b3786c423fa41fb8422874f20fe73623e..7580131f78b69e43f5e9eca1d7249a43ae84834f 100644 (file)
--- a/options.js
+++ b/options.js
@@ -1,15 +1,9 @@
 function save_options() {
 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({
     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() {
        "bgvalue": bgvalue,
        "fgvalue": fgvalue,
        }, function() {


@@ -21,15 +15,9 @@ function save_options() {
 
 function restore_options() {
     chrome.storage.sync.get({
 
 function restore_options() {
     chrome.storage.sync.get({

-    "l1name": "Productivity",
-    "l2name": "General",
-    "l3name": "Social",

     "bgvalue": "#2E3440",
     "fgvalue": "#D8DEE9"},
     function(items) {
     "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"];
     });
         document.getElementById('bg').value = items["bgvalue"];
        document.getElementById('fg').value = items["fgvalue"];
     });

diff --git a/style.css b/style.css
index ac31d9e983a581215be3900a5e93f101431fb03b..4bd955f1bc74e273440fbf568dc8e16d8cb5dde6 100644 (file)
--- a/style.css
+++ b/style.css
@@ -29,6 +29,7 @@ body {
 }
 
 ul {
 }
 
 ul {

+  position: relative;

   list-style: none;
   padding: 0;
   width: 10rem;
   list-style: none;
   padding: 0;
   width: 10rem;


@@ -58,11 +59,21 @@ input.url {
   margin-top: 2.5px
 }
 
   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;
 .remove {
   width: 29px;
   height: 35px;
   padding: 0;

-  background: var(--hover-bg);
+  background-color: var(--hover-bg);

   float: right;
   text-align: center;
   justify-content: center;
   float: right;
   text-align: center;
   justify-content: center;


@@ -85,11 +96,11 @@ input.url {
 }
 
 .save:hover, .save:focus, .save:focus-within {
 }
 
 .save:hover, .save:focus, .save:focus-within {

-  background: var(--hover-grn);
+  background-color: var(--hover-grn);

 }
 
 .remove:hover {
 }
 
 .remove:hover {

-  background: var(--remove-bg);
+  background-color: var(--remove-bg);

 }
 
 #edit, #addcol {
 }
 
 #edit, #addcol {


@@ -104,6 +115,7 @@ input.url {
   justify-content: center;
   align-items: center;
   cursor: pointer;
   justify-content: center;
   align-items: center;
   cursor: pointer;

+  font-weight: bold;

 }
 
 #edit:hover {
 }
 
 #edit:hover {


@@ -184,7 +196,7 @@ a {
   display: none;
 }
 
   display: none;
 }
 

-a, ul > .title > p {
+a, ul > .title > p, .colname {

   width: calc(100% - 45px);
   display: inline-block;
 }
   width: calc(100% - 45px);
   display: inline-block;
 }


@@ -197,6 +209,29 @@ li.sortable-chosen.sortable-ghost {
  /* border: 2px dashed var(--default-fg);*/
 }
 
  /* 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;
 .glyphicon-move {
   cursor: move;
   cursor: -webkit-grabbing;


@@ -211,6 +246,5 @@ li.sortable-chosen.sortable-ghost {
 
 .title p {
   width: 160px;
 
 .title p {
   width: 160px;

-  margin-left: 0.5rem;
-  margin-bottom: 0.5rem !important;
+  margin: 16px 0 8px 0;

 }
 }