css editor ui changes

web-extension/cssEditor.css

@@ -1,16 +1,68 @@
-body.dragging, body.dragging * {
+#cssEditor-removeStyle {
-    cursor: move !important;
+    display: none;
 }
-.dragged {
+#cssEditor-saveStyle {
-    position: absolute;
+    display: none;
-    opacity: 0.5;
-    z-index: 2000;
 }
-ul.cssEditor-chapters-list li.placeholder {
+#cssEditor-selectStyle {
-    position: relative;
+    padding: 3px;
-    margin: 0;
+    cursor: pointer;
-    padding: 0;
+    font-size: 15px;
-    border: solid 10px #f5f5f5;
+    font-family: "sans-serif";
+}
+#cssEditor-selectStyle > option {
+    padding: 3px;
+    font-size: 1em;
+    cursor: pointer;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+#cssEditor-orLabel {
+    padding: 3px;
+    margin: 0 3px;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+#cssEditor-createNewStyle {
+    padding: 3px;
+    cursor: pointer;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+.cssEditor-field-label-holder {
+    margin-top: 10px;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+.cssEditor-field-holder {
+    padding: 3px;
+}
+.cssEditor-field-label {
+    padding: 0 3px;
+    margin-top: 5px;
+}
+
+#cssEditor-styleName {
+    width: 50%;
+    padding: 5px;
+    border: solid rgba(0, 0, 0, 0.25) 1px;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+#cssEditor-matchUrl {
+    width: 50%;
+    padding: 5px;
+    border: solid rgba(0, 0, 0, 0.25) 1px;
+    font-size: 15px;
+    font-family: "sans-serif";
+}
+#cssEditor-styleContent {
+    width: 100%;
+    height: 100px;
+    padding: 5px;
+    border: solid rgba(0, 0, 0, 0.25) 1px;
+    font-size: 15px;
+    font-family: "sans-serif";
 }
 
 #cssEditor-Title {
@@ -26,51 +78,6 @@ ul.cssEditor-chapters-list li.placeholder {
     padding: 10px 20px;
     margin-bottom: 10px;
 }
-#cssEditor-ebookTitleLabel {
-    font-weight: bold;
-    font-size: 18px;
-    font-family: sans-serif;
-    margin-right: 10px;
-}
-#cssEditor-ebookTitle {
-    padding: 5px;
-    font-size: 15px;
-    font-family: "sans-serif";
-    width: 85%;
-}
-ul, ul.cssEditor-chapters-list {
-    width: 100%;
-    display: block;
-    padding: 0;
-    margin: 0;
-    list-style-type: none !important;
-}
-.cssEditor-chapter-item {
-    display: block;
-    line-height: 35px;
-    height: 35px;
-    padding: 5px 0;
-    vertical-align: middle;
-    font-size: 17px;
-    list-style-type: none;
-}
-.cssEditor-chapter-item:hover {
-    background-color: #f5f5f5;
-}
-.cssEditor-drag-handler {
-    cursor: move;
-    padding: 3px;
-    margin-right: 5px;
-    border-radius: 5px;
-}
-.cssEditor-chapter-item > input[type="text"] {
-    padding: 5px;
-    font-size: 15px;
-    font-family: "sans-serif";
-    width: 80%;
-    border: none;
-    border-bottom: solid 1px #aaa;
-}
 
 #cssEditor-modalHeader {
     display: block;
@@ -79,9 +86,6 @@ ul, ul.cssEditor-chapters-list {
 }
 #cssEditor-modalList {
     display: block;
-    /*width: 100%;*/
-    /*border-top: solid 1px black;*/
-    /*border-bottom: solid 1px black;*/
     padding: 20px;
     padding-top: 0;
 }
@@ -89,13 +93,6 @@ ul, ul.cssEditor-chapters-list {
     display: block;
     overflow: hidden;
 }
-.chapter-item * {
-    vertical-align: middle;
-}
-#dragHandler {
-    padding: 0 5px;
-}
-
 
 .cssEditor-text-button {
     border: none;
@@ -143,17 +140,6 @@ ul, ul.cssEditor-chapters-list {
 }
 
 @media (max-width: 1700px) {
-    .cssEditor-chapter-item {
-        line-height: 30px;
-        height: 30px;
-        padding: 4px 0;
-        font-size: 14px;
-    }
-    .cssEditor-chapter-item > input[type="text"] {
-        padding: 3px;
-        font-size: 12px;
-        width: 75%;
-    }
     .cssEditor-text-button {
         font-size: 12px;
         padding: 3px;

web-extension/cssEditor.js

@@ -54,12 +54,14 @@ function showEditor() {
     titleHolder.id = 'cssEditor-ebookTitleHolder';
 
     var existingStyles = document.createElement('select');
-    existingStyles.id = "selectStyle";
+    existingStyles.id = "cssEditor-selectStyle";
     existingStyles.onchange = function (event) {
         if (existingStyles.selectedIndex === 0) {
             currentStyle = null;
             currentStyleIndex = -1;
             hideStyleEditor();
+            hideRemoveStyle();
+            hideSaveStyle();
             return;
         }
         currentStyle = allStyles[existingStyles.selectedIndex - 1];
@@ -72,12 +74,13 @@ function showEditor() {
     titleHolder.appendChild(existingStyles);
 
     var titleLabel = document.createElement('label');
-    titleLabel.innerText = ' or ';
+    titleLabel.id = 'cssEditor-orLabel';
+    titleLabel.innerText = 'or';
     titleHolder.appendChild(titleLabel);
 
     var createNewStyleButton = document.createElement('button');
+    createNewStyleButton.id = 'cssEditor-createNewStyle';
     createNewStyleButton.innerText = 'Create New Style';
-    createNewStyleButton.className = 'cssEditor-cancel-button';
     createNewStyleButton.onclick = createNewStyle;
     titleHolder.appendChild(createNewStyleButton);
 
@@ -88,6 +91,7 @@ function showEditor() {
         currentStyleIndex = -1;
         resetFields();
         showStyleEditor();
+        showSaveStyle();
         hideRemoveStyle();
         createStyleList();
     }
@@ -99,12 +103,15 @@ function showEditor() {
     editorHolder.id = 'cssEditor-styleEditor';
 
     var nameLabelHolder = document.createElement('div');
+    nameLabelHolder.className = 'cssEditor-field-label-holder';
     var nameLabel = document.createElement('label');
+    nameLabel.className = 'cssEditor-field-label';
     nameLabel.innerText = 'Name';
     nameLabelHolder.appendChild(nameLabel);
     editorHolder.appendChild(nameLabelHolder);
 
     var nameInputHolder = document.createElement('div');
+    nameInputHolder.className = 'cssEditor-field-holder';
     var cssNameInput = document.createElement('input');
     cssNameInput.id = 'cssEditor-styleName';
     cssNameInput.type = 'text';
@@ -113,12 +120,15 @@ function showEditor() {
 
 
     var urlLabelHolder = document.createElement('div');
+    urlLabelHolder.className = 'cssEditor-field-label-holder';
     var urlLabel = document.createElement('label');
+    urlLabel.className = 'cssEditor-field-label';
     urlLabel.innerText = 'URL Starts With';
     urlLabelHolder.appendChild(urlLabel);
     editorHolder.appendChild(urlLabelHolder);
 
     var urlInputHolder = document.createElement('div');
+    urlInputHolder.className = 'cssEditor-field-holder';
     var urlInput = document.createElement('input');
     urlInput.id = 'cssEditor-matchUrl';
     urlInput.type = 'text';
@@ -126,14 +136,18 @@ function showEditor() {
     editorHolder.appendChild(urlInputHolder);
 
     var contentLabelHolder = document.createElement('div');
+    contentLabelHolder.className = 'cssEditor-field-label-holder';
     var contentLabel = document.createElement('label');
+    contentLabel.className = 'cssEditor-field-label';
     contentLabel.innerText = 'CSS';
     contentLabelHolder.appendChild(contentLabel);
     editorHolder.appendChild(contentLabelHolder);
 
     var contentInputHolder = document.createElement('div');
+    contentInputHolder.className = 'cssEditor-field-holder';
     var contentInput = document.createElement('textarea');
     contentInput.id = 'cssEditor-styleContent';
+    contentInput.setAttribute('data', 'language: css');
     contentInputHolder.appendChild(contentInput);
     editorHolder.appendChild(contentInputHolder);
 
@@ -151,6 +165,7 @@ function showEditor() {
     saveButtonsHolder.appendChild(removeCssButton);
 
     var saveCssButton = document.createElement('button');
+    saveCssButton.id = 'cssEditor-saveStyle';
     saveCssButton.innerText = 'Save Style';
     saveCssButton.className = 'cssEditor-footer-button cssEditor-float-right cssEditor-save-button';
     saveCssButton.onclick = saveStyle;
@@ -189,6 +204,7 @@ function showEditor() {
 
         showStyleEditor();
         showRemoveStyle();
+        showSaveStyle();
 
         document.getElementById('cssEditor-styleName').value = currentStyle.title;
         document.getElementById('cssEditor-matchUrl').value = currentStyle.url;
@@ -218,6 +234,14 @@ function showEditor() {
         document.getElementById('cssEditor-removeStyle').style.display = 'none';
     }
 
+    function showSaveStyle() {
+        document.getElementById('cssEditor-saveStyle').style.display = 'inline-block';
+    }
+
+    function hideSaveStyle() {
+        document.getElementById('cssEditor-saveStyle').style.display = 'none';
+    }
+
     function saveStyle() {
         var tmpValue = {
             title: document.getElementById('cssEditor-styleName').value,

web-extension/menu.html

@@ -63,11 +63,18 @@
             color: white;
             padding: 5px;
         }
-
         @keyframes rotate {
           0%    { transform: rotate(0deg); }
           100%  { transform: rotate(360deg); }
         }
+        #styleLabel {
+           padding-bottom: 5px;
+        }
+        #allStylesList {
+            display: inline-block;
+            width: 100%;
+            padding: 3px;
+        }
     </style>
 </head>
 
@@ -75,10 +82,9 @@
     <div class="menu-holder">
         <div id="menuTitle">Save as eBook:</div>
         <hr/>
-        <div><label for="">Custom Styles:</label></div>
+        <div id="styleLabel"><label>Custom Styles:</label></div>
         <div>
-            <select id="allStylesList" class="" name="" style="display:inline-block;width:100%;">
+            <select id="allStylesList"></select>
-            </select>
         </div>
         <div class="">
             <button id="applyStyle" type="button" name="button" style="display:inline-block;width:47%;border-right:solid 1px black;">Apply</button>

web-extension/menu.js

@@ -78,7 +78,6 @@ document.getElementById("editStyles").onclick = function() {
         chrome.tabs.executeScript(tab[0].id, {file: '/jszip.js'});
         chrome.tabs.executeScript(tab[0].id, {file: '/jszip-utils.js'});
         chrome.tabs.executeScript(tab[0].id, {file: '/saveEbook.js'});
-        chrome.tabs.executeScript(tab[0].id, {file: '/jquery-sortable.js'});
         chrome.tabs.insertCSS(tab[0].id, {file: '/cssEditor.css'});
 
         chrome.tabs.executeScript(tab[0].id, {