mirror of
https://github.com/alexadam/save-as-ebook.git
synced 2025-09-14 19:29:50 +00:00
css editor ui changes
This commit is contained in:
alexadam
parent
7dd34efee5
commit
cbf7e1816a
4 changed files with 100 additions and 85 deletions
|
|
@ -1,16 +1,68 @@
|
|||
body.dragging, body.dragging * {
|
||||
cursor: move !important;
|
||||
#cssEditor-removeStyle {
|
||||
display: none;
|
||||
}
|
||||
.dragged {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
z-index: 2000;
|
||||
#cssEditor-saveStyle {
|
||||
display: none;
|
||||
}
|
||||
ul.cssEditor-chapters-list li.placeholder {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 10px #f5f5f5;
|
||||
#cssEditor-selectStyle {
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<select id="allStylesList"></select>
|
||||
</div>
|
||||
<div class="">
|
||||
<button id="applyStyle" type="button" name="button" style="display:inline-block;width:47%;border-right:solid 1px black;">Apply</button>
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue