Merge enhanced UI from ytilis repro
This commit is contained in:
OzzieIsaacs
parent
8c573ff6d8
commit
9f8cbe8c1f
|
|
@ -1,27 +1,58 @@
|
|||
body {
|
||||
background: #444;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: re;
|
||||
left: 5px;
|
||||
overflow: hidden;
|
||||
right: 5px;
|
||||
#main {
|
||||
text-align: center;
|
||||
top: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#sidebar a,
|
||||
#sidebar ul,
|
||||
#sidebar li,
|
||||
#sidebar li img {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebar li img {
|
||||
display: block;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
#sidebar li img + span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
min-width: 25px;
|
||||
line-height: 25px;
|
||||
background: #6b6b6b;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#sidebar #panels {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#progress {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
left: 90px;
|
||||
right: 160px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 20px;
|
||||
margin-top: 1px;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -29,6 +60,10 @@ body {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
#mainContent {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#mainText {
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
|
|
@ -42,29 +77,9 @@ body {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#mainImage{
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
#titlebar.main {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: black;
|
||||
padding-bottom: 70px;
|
||||
-webkit-transition: opacity 0.2s ease;
|
||||
-moz-transition: opacity 0.2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
background: -moz-linear-gradient(top, rgba(0,2,34,1) 0%, rgba(0,1,24,1) 30%, rgba(0,0,0,0) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,2,34,1)), color-stop(30%,rgba(0,1,24,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, rgba(0,2,34,1) 0%,rgba(0,1,24,1) 30%,rgba(0,0,0,0) 100%); /* W3C */
|
||||
#titlebar {
|
||||
min-height: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#prev {
|
||||
|
|
@ -100,6 +115,67 @@ body {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.modal {
|
||||
/* Makes the modal responsive. Note sure if this should be moved to main.css */
|
||||
margin: 0;
|
||||
max-width: 96%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.md-content {
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.md-content > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-content > div p {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.settings-column {
|
||||
float: left;
|
||||
min-width: 35%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.inputs input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.inputs label {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dark-theme #main {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.dark-theme #titlebar {
|
||||
color: #DDD;
|
||||
}
|
||||
|
||||
.dark-theme #titlebar a:active {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.dark-theme .overlay {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,9 +55,6 @@ kthoom.Key = {
|
|||
RIGHT_SQUARE_BRACKET: 221
|
||||
};
|
||||
|
||||
// The rotation orientation of the comic.
|
||||
kthoom.rotateTimes = 0;
|
||||
|
||||
// global variables
|
||||
var unarchiver = null;
|
||||
var currentImage = 0;
|
||||
|
|
@ -66,33 +63,45 @@ var imageFilenames = [];
|
|||
var totalImages = 0;
|
||||
var lastCompletion = 0;
|
||||
|
||||
var hflip = false, vflip = false, fitMode = kthoom.Key.B;
|
||||
var settings = {
|
||||
hflip: false,
|
||||
vflip: false,
|
||||
rotateTimes: 0,
|
||||
fitMode: kthoom.Key.B,
|
||||
theme: 'light'
|
||||
};
|
||||
|
||||
var canKeyNext = true, canKeyPrev = true;
|
||||
|
||||
kthoom.saveSettings = function() {
|
||||
localStorage.kthoomSettings = JSON.stringify({
|
||||
rotateTimes: kthoom.rotateTimes,
|
||||
hflip: hflip,
|
||||
vflip: vflip,
|
||||
fitMode: fitMode
|
||||
});
|
||||
localStorage.kthoomSettings = JSON.stringify(settings);
|
||||
};
|
||||
|
||||
kthoom.loadSettings = function() {
|
||||
try {
|
||||
if (localStorage.kthoomSettings.length < 10){
|
||||
if (!localStorage.kthoomSettings){
|
||||
return;
|
||||
}
|
||||
var s = JSON.parse(localStorage.kthoomSettings);
|
||||
kthoom.rotateTimes = s.rotateTimes;
|
||||
hflip = s.hflip;
|
||||
vflip = s.vflip;
|
||||
fitMode = s.fitMode;
|
||||
|
||||
$.extend(settings, JSON.parse(localStorage.kthoomSettings));
|
||||
|
||||
kthoom.setSettings();
|
||||
} catch (err) {
|
||||
alert("Error load settings");
|
||||
}
|
||||
};
|
||||
|
||||
kthoom.setSettings = function() {
|
||||
// Set settings control values
|
||||
$.each(settings, function(key, value) {
|
||||
if (typeof value === "boolean") {
|
||||
$('input[name='+key+']').prop('checked', value);
|
||||
} else {
|
||||
$('input[name='+key+']').val([value]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var createURLFromArray = function(array, mimeType) {
|
||||
var offset = array.byteOffset, len = array.byteLength;
|
||||
var url;
|
||||
|
|
@ -279,6 +288,17 @@ function loadFromArrayBuffer(ab) {
|
|||
if (imageFilenames.indexOf(f.filename) === -1) {
|
||||
imageFilenames.push(f.filename);
|
||||
imageFiles.push(new kthoom.ImageFile(f));
|
||||
|
||||
// add thumbnails to the TOC list
|
||||
$('#thumbnails').append(
|
||||
"<li> \
|
||||
<a data-page='"+ imageFiles.length +"'> \
|
||||
<img src='"+ imageFiles[imageFiles.length - 1].dataURI +"' /> \
|
||||
<span>"+ imageFiles.length +"</span> \
|
||||
</a> \
|
||||
</li>"
|
||||
);
|
||||
//}
|
||||
}
|
||||
var percentage = (ab.page+1) / (ab.last+1);
|
||||
totalImages = ab.last+1;
|
||||
|
|
@ -304,6 +324,11 @@ function updatePage() {
|
|||
} else {
|
||||
setImage("loading");
|
||||
}
|
||||
|
||||
$('body').toggleClass('dark-theme', settings.theme === 'dark');
|
||||
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
function setImage(url) {
|
||||
|
|
@ -359,22 +384,22 @@ function setImage(url) {
|
|||
w = img.width,
|
||||
sw = w,
|
||||
sh = h;
|
||||
kthoom.rotateTimes = (4 + kthoom.rotateTimes) % 4;
|
||||
settings.rotateTimes = (4 + settings.rotateTimes) % 4;
|
||||
x.save();
|
||||
if (kthoom.rotateTimes % 2 === 1) {
|
||||
if (settings.rotateTimes % 2 === 1) {
|
||||
sh = w;
|
||||
sw = h;
|
||||
}
|
||||
canvas.height = sh;
|
||||
canvas.width = sw;
|
||||
x.translate(sw / 2, sh / 2);
|
||||
x.rotate(Math.PI / 2 * kthoom.rotateTimes);
|
||||
x.rotate(Math.PI / 2 * settings.rotateTimes);
|
||||
x.translate(-w / 2, -h / 2);
|
||||
if (vflip) {
|
||||
if (settings.vflip) {
|
||||
x.scale(1, -1);
|
||||
x.translate(0, -h);
|
||||
}
|
||||
if (hflip) {
|
||||
if (settings.hflip) {
|
||||
x.scale(-1, 1);
|
||||
x.translate(-w, 0);
|
||||
}
|
||||
|
|
@ -418,19 +443,19 @@ function updateScale(clear) {
|
|||
mainImageStyle.height = "";
|
||||
mainImageStyle.maxWidth = "";
|
||||
mainImageStyle.maxHeight = "";
|
||||
var maxheight = innerHeight - 15;
|
||||
if (!/main/.test(getElem("titlebar").className)) {
|
||||
maxheight -= 25;
|
||||
}
|
||||
if (clear || fitMode === kthoom.Key.N) {
|
||||
} else if (fitMode === kthoom.Key.B) {
|
||||
var maxheight = innerHeight - 50;
|
||||
|
||||
if (clear || settings.fitMode === kthoom.Key.N) {
|
||||
} else if (settings.fitMode === kthoom.Key.B) {
|
||||
mainImageStyle.maxWidth = "100%";
|
||||
mainImageStyle.maxHeight = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.H) {
|
||||
} else if (settings.fitMode === kthoom.Key.H) {
|
||||
mainImageStyle.height = maxheight + "px";
|
||||
} else if (fitMode === kthoom.Key.W) {
|
||||
} else if (settings.fitMode === kthoom.Key.W) {
|
||||
mainImageStyle.width = "100%";
|
||||
}
|
||||
$('#mainContent').css({maxHeight: maxheight + 5});
|
||||
kthoom.setSettings();
|
||||
kthoom.saveSettings();
|
||||
}
|
||||
|
||||
|
|
@ -446,50 +471,53 @@ function keyHandler(evt) {
|
|||
if (evt.ctrlKey || evt.shiftKey || evt.metaKey) return;
|
||||
switch (code) {
|
||||
case kthoom.Key.LEFT:
|
||||
if (canKeyPrev) showPrevPage();
|
||||
showPrevPage();
|
||||
break;
|
||||
case kthoom.Key.RIGHT:
|
||||
if (canKeyNext) showNextPage();
|
||||
showNextPage();
|
||||
break;
|
||||
case kthoom.Key.L:
|
||||
kthoom.rotateTimes--;
|
||||
if (kthoom.rotateTimes < 0) {
|
||||
kthoom.rotateTimes = 3;
|
||||
settings.rotateTimes--;
|
||||
if (settings.rotateTimes < 0) {
|
||||
settings.rotateTimes = 3;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.R:
|
||||
kthoom.rotateTimes++;
|
||||
if (kthoom.rotateTimes > 3) {
|
||||
kthoom.rotateTimes = 0;
|
||||
settings.rotateTimes++;
|
||||
if (settings.rotateTimes > 3) {
|
||||
settings.rotateTimes = 0;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.F:
|
||||
if (!hflip && !vflip) {
|
||||
hflip = true;
|
||||
} else if (hflip === true) {
|
||||
vflip = true;
|
||||
hflip = false;
|
||||
} else if (vflip === true) {
|
||||
vflip = false;
|
||||
if (!settings.hflip && !settings.vflip) {
|
||||
settings.hflip = true;
|
||||
} else if (settings.hflip === true && settings.vflip === true) {
|
||||
settings.vflip = false;
|
||||
settings.hflip = false;
|
||||
} else if (settings.hflip === true) {
|
||||
settings.vflip = true;
|
||||
settings.hflip = false;
|
||||
} else if (settings.vflip === true) {
|
||||
settings.hflip = true;
|
||||
}
|
||||
updatePage();
|
||||
break;
|
||||
case kthoom.Key.W:
|
||||
fitMode = kthoom.Key.W;
|
||||
settings.fitMode = kthoom.Key.W;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.H:
|
||||
fitMode = kthoom.Key.H;
|
||||
settings.fitMode = kthoom.Key.H;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.B:
|
||||
fitMode = kthoom.Key.B;
|
||||
settings.fitMode = kthoom.Key.B;
|
||||
updateScale();
|
||||
break;
|
||||
case kthoom.Key.N:
|
||||
fitMode = kthoom.Key.N;
|
||||
settings.fitMode = kthoom.Key.N;
|
||||
updateScale();
|
||||
break;
|
||||
default:
|
||||
|
|
@ -520,35 +548,70 @@ function init(fileid) {
|
|||
request.open("GET", fileid);
|
||||
request.responseType = "json";
|
||||
request.fileid=fileid.substring(0,fileid.length - 2);
|
||||
request.addEventListener("load",ImageLoadCallback);/* function(event) {
|
||||
var jso=request.response;
|
||||
if (jso.page!=jso.length)
|
||||
{
|
||||
// var secRequest = new XMLHttpRequest();
|
||||
request.open("GET", fileid + "/../"+(jso.page+1));
|
||||
request.addEventListener("load",ImageLoadCallback);
|
||||
request.send();
|
||||
//secRequest.responseType = "json";
|
||||
//finished;
|
||||
}
|
||||
loadFromArrayBuffer(jso);
|
||||
|
||||
// var byteArray = new Uint8Array(request.response);
|
||||
// if you want to access the bytes:
|
||||
});*/
|
||||
request.send();
|
||||
|
||||
kthoom.initProgressMeter();
|
||||
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
|
||||
updateScale(true);
|
||||
kthoom.loadSettings();
|
||||
updateScale(true);
|
||||
$(document).keydown(keyHandler);
|
||||
|
||||
$(window).resize(function() {
|
||||
var f = (screen.width - innerWidth < 4 && screen.height - innerHeight < 4);
|
||||
getElem("titlebar").className = f ? "main" : "";
|
||||
updateScale();
|
||||
});
|
||||
|
||||
// Open TOC menu
|
||||
$("#slider").click(function(evt) {
|
||||
$('#sidebar').toggleClass('open');
|
||||
$('#main').toggleClass('closed');
|
||||
$(this).toggleClass('icon-menu icon-right');
|
||||
});
|
||||
|
||||
// Open Settings modal
|
||||
$("#setting").click(function(evt) {
|
||||
$("#settings-modal").toggleClass('md-show');
|
||||
});
|
||||
|
||||
// On Settings input change
|
||||
$("#settings input").on("change", function(evt){
|
||||
// Get either the checked boolean or the assigned value
|
||||
var value = this.type === 'checkbox' ? this.checked : this.value;
|
||||
|
||||
// If it's purely numeric, parse it to an integer
|
||||
value = /^\d+$/.test(value) ? parseInt(value) : value;
|
||||
|
||||
settings[this.name] = value;
|
||||
updatePage();
|
||||
updateScale();
|
||||
});
|
||||
|
||||
// Close modal
|
||||
$(".closer, .overlay").click(function(evt) {
|
||||
$(".md-show").removeClass('md-show');
|
||||
});
|
||||
|
||||
// TOC thumbnail pagination
|
||||
$('#thumbnails').on("click", "a", function(evt) {
|
||||
currentImage = $(this).data('page') - 1;
|
||||
updatePage();
|
||||
});
|
||||
|
||||
// Fullscreen mode
|
||||
if (typeof screenfull !== "undefined") {
|
||||
$('#fullscreen').click(function(evt) {
|
||||
screenfull.toggle($("#container")[0])
|
||||
});
|
||||
|
||||
if (screenfull.raw) {
|
||||
var $button = $('#fullscreen');
|
||||
document.addEventListener(screenfull.raw.fullscreenchange,function(){
|
||||
screenfull.isFullscreen
|
||||
? $button.addClass("icon-resize-small").removeClass("icon-resize-full")
|
||||
: $button.addClass("icon-resize-full").removeClass("icon-resize-small")
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$("#mainImage").click(function(evt) {
|
||||
// Firefox does not support offsetX/Y so we have to manually calculate
|
||||
// where the user clicked in the image.
|
||||
|
|
@ -564,7 +627,7 @@ function init(fileid) {
|
|||
// Determine if the user clicked/tapped the left side or the
|
||||
// right side of the page.
|
||||
var clickedPrev = false;
|
||||
switch (kthoom.rotateTimes) {
|
||||
switch (settings.rotateTimes) {
|
||||
case 0:
|
||||
clickedPrev = clickX < (comicWidth / 2);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,14 @@
|
|||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
|
||||
<link href="{{ url_for('static', filename='css/libs/bootstrap.min.css') }}" rel="stylesheet" media="screen">
|
||||
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap.min.js') }}"></script>
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css"/>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
|
||||
<!--script src="{{ url_for('static', filename='js/archive.js') }}"></script-->
|
||||
<script>
|
||||
document.onreadystatechange = function () {
|
||||
if (document.readyState == "complete") {
|
||||
|
|
@ -23,8 +24,34 @@
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main" id="main">
|
||||
<div id="titlebar">
|
||||
<div id="sidebar">
|
||||
<div id="panels">
|
||||
<!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> -->
|
||||
<!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
|
||||
</div>
|
||||
<div id="tocView" class="view">
|
||||
<ul id="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="bookmarksView" class="view">
|
||||
<ul id="bookmarks"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main" class="main">
|
||||
<div id="titlebar" class="main">
|
||||
<div id="opener">
|
||||
<a id="slider" class="icon-menu">Menu</a>
|
||||
</div>
|
||||
<div id="metainfo">
|
||||
<span id="book-title"></span>
|
||||
<span id="title-seperator"> – </span>
|
||||
<span id="chapter-title"></span>
|
||||
</div>
|
||||
<div id="title-controls">
|
||||
<a id="setting" class="icon-cog">Settings</a>
|
||||
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
|
||||
</div>
|
||||
|
||||
<div id="progress" class="hide"></div>
|
||||
<div class="progress2" style="display:none">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="70"
|
||||
|
|
@ -33,6 +60,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mainContent">
|
||||
<div id="mainText" style="display:none"></div>
|
||||
<canvas id="mainImage"></canvas>
|
||||
|
|
@ -40,5 +68,85 @@
|
|||
<div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
|
||||
<div id="next" class="arrow" onclick="showNextPage()">›</div>
|
||||
</div>
|
||||
|
||||
<div class="modal md-effect-1" id="settings-modal">
|
||||
<div class="md-content">
|
||||
<h3>{{_('Settings')}}</h3>
|
||||
<div>
|
||||
<div class="settings-column">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>←</td> <td>{{_('Previous Page')}}</td></tr>
|
||||
<tr><td>→</td> <td>{{_('Next Page')}}</td></tr>
|
||||
<tr><td>B</td> <td>{{_('Scale to Best')}}</td></tr>
|
||||
<tr><td>W</td> <td>{{_('Scale to Width')}}</td></tr>
|
||||
<tr><td>H</td> <td>{{_('Scale to Height')}}</td></tr>
|
||||
<tr><td>N</td> <td>{{_('Scale to Native')}}</td></tr>
|
||||
<tr><td>R</td> <td>{{_('Rotate Right')}}</td></tr>
|
||||
<tr><td>L</td> <td>{{_('Rotate Left')}}</td></tr>
|
||||
<tr><td>F</td> <td>{{_('Flip Image')}}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="settings-column">
|
||||
<table id="settings">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{_('Settings')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{_('Theme')}}:</th>
|
||||
<td>
|
||||
<div class="inputs">
|
||||
<label for="lightTheme"><input type="radio" id="lightTheme" name="theme" value="light" /> {{_('Light')}}</label>
|
||||
<label for="darkTheme"><input type="radio" id="darkTheme" name="theme" value="dark" /> {{_('Dark')}}</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{_('Scale')}}:</th>
|
||||
<td>
|
||||
<div class="inputs">
|
||||
<label for="fitBest"><input type="radio" id="fitBest" name="fitMode" value="66" /> {{_('Best')}}</label>
|
||||
<label for="fitWidth"><input type="radio" id="fitWidth" name="fitMode" value="87" /> {{_('Width')}}</label>
|
||||
<label for="fitHeight"><input type="radio" id="fitHeight" name="fitMode" value="72" /> {{_('Height')}}</label>
|
||||
<label for="fitNative"><input type="radio" id="fitNative" name="fitMode" value="78" /> {{_('Native')}}</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{_('Rotate')}}:</th>
|
||||
<td>
|
||||
<div class="inputs">
|
||||
<label for="r0"><input type="radio" id="r0" name="rotateTimes" value="0" /> 0°</label>
|
||||
<label for="r90"><input type="radio" id="r90" name="rotateTimes" value="1" /> 90°</label>
|
||||
<label for="r180"><input type="radio" id="r180" name="rotateTimes" value="2" /> 180°</label>
|
||||
<label for="r270"><input type="radio" id="r270" name="rotateTimes" value="3" /> 270°</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{_('Flip')}}:</th>
|
||||
<td>
|
||||
<div class="inputs">
|
||||
<label for="vflip"><input type="checkbox" id="vflip" name="vflip" /> {{_('Horizontal')}}</label>
|
||||
<label for="hflip"><input type="checkbox" id="hflip" name="hflip" /> {{_('Vertical')}}</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="closer icon-cancel-circled"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user