feat: tui-image-editor 使用
lichaojun
8 months ago
parent
b251ff51bd
commit
75e9dd2c51
@ -1,7 +1,77 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>123</div>
|
<Teleport to="body">
|
||||||
|
<div class="tui-image-editor-wrap">
|
||||||
|
<div id="tui-image-editor"></div>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="jsx">
|
<script setup>
|
||||||
import { ref } from 'vue';
|
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||||
|
import '../css/tui-color-picker.css';
|
||||||
|
import '../css/tui-image-editor.css';
|
||||||
|
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
function createScriptElement(src) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = src;
|
||||||
|
script.async = true;
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 加载同级目录下的js文件
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/fabric.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-code-snippet.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-color-picker.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/FileSaver.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-image-editor.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/white-theme.js');
|
||||||
|
await createScriptElement('/src/views/demo/tuiImageEditor/js/black-theme.js');
|
||||||
|
initTuiImageEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
const initTuiImageEditor = () => {
|
||||||
|
// Image editor
|
||||||
|
var imageEditor = new tui.ImageEditor('#tui-image-editor', {
|
||||||
|
includeUI: {
|
||||||
|
loadImage: {
|
||||||
|
path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
|
||||||
|
name: 'SampleImage',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
'common.bi.image': '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cssMaxWidth: 700,
|
||||||
|
cssMaxHeight: 500,
|
||||||
|
usageStatistics: false,
|
||||||
|
});
|
||||||
|
window.onresize = function () {
|
||||||
|
imageEditor.ui.resizeEditor();
|
||||||
|
};
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tui-image-editor-wrap {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
|
#tui-image-editor {
|
||||||
|
position: relative;
|
||||||
|
width: 800px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,154 @@
|
|||||||
|
/*!
|
||||||
|
* TOAST UI Color Picker
|
||||||
|
* @version 2.2.6
|
||||||
|
* @author NHN FE Development Team <dl_javascript@nhn.com>
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
.tui-colorpicker-clearfix {
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-clearfix:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-vml {
|
||||||
|
behavior: url("#default#VML");
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-container {
|
||||||
|
width: 152px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-container {
|
||||||
|
width: 152px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-container ul {
|
||||||
|
width: 152px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-container li {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 3px 3px 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-button {
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
outline: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-button.tui-colorpicker-selected {
|
||||||
|
border: 2px solid #000;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-button.tui-colorpicker-color-transparent {
|
||||||
|
barckground-repeat: repeat;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGAqSSwoyGFhYGDIzSspCnJ3UoiIjFJgv8PAzcDDIMRgxSCemFxc4BgQ4MOAE3y7xsAIoi/rgsxK8/x506a1fP4WNq+ZclYlOrj1gQF3SmpxMgMDIweQnZxSnJwLZOcA2TrJBUUlQPYMIFu3vKQAxD4BZIsUAR0IZN8BsdMh7A8gdhKYzcQCVhMS5AxkSwDZAkkQtgaInQ5hW4DYyRmJKUC2B8guiBvAgNPDRcHcwFLXkYC7SQa5OaUwO0ChxZOaFxoMcgcQyzB4MLgwKDCYMxgwWDLoMjiWpFaUgBQ65xdUFmWmZ5QoOAJDNlXBOT+3oLQktUhHwTMvWU9HwcjA0ACkDhRnEKM/B4FNZxQ7jxDLX8jAYKnMwMDcgxBLmsbAsH0PA4PEKYSYyjwGBn5rBoZt5woSixLhDmf8xkKIX5xmbARh8zgxMLDe+///sxoDA/skBoa/E////73o//+/i4H2A+PsQA4AJHdp4IxrEg8AAAGbaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE0PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CghrN1AAAABzSURBVCgVldKxEYAgDAXQD5VOpLuwgi4jlrTMqF00oOd5Aia/CcV/F4oYOgNlrLjvVyCEVJchBjEC25538PeaWTzRMBLxvIL7UZwFwL06qoA6aoAy+gFfJABvJAQPUoCMlICRRd8BzgHzJL4ok9aJ67l4AK9AxVKhHryUAAAAAElFTkSuQmCC");
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-hex {
|
||||||
|
font-family: monospace;
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
width: 60px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-preview {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
vertical-align: middle;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-palette-toggle-slider {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
vertical-align: middle;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-slider-container {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
height: 122px;
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-slider-container:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-slider-left {
|
||||||
|
float: left;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-slider-right {
|
||||||
|
float: right;
|
||||||
|
width: 32px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-svg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-slider-handle {
|
||||||
|
position: absolute;
|
||||||
|
overflow: visible;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-svg-slider {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-vml-slider {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-vml-slider-bg {
|
||||||
|
position: absolute;
|
||||||
|
margin: -1px 0 0 -1px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 122px;
|
||||||
|
height: 122px;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-svg-huebar {
|
||||||
|
float: right;
|
||||||
|
width: 18px;
|
||||||
|
height: 120px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-vml-huebar {
|
||||||
|
width: 32px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tui-colorpicker-vml-huebar-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 121px;
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,188 @@
|
|||||||
|
/* FileSaver.js
|
||||||
|
* A saveAs() FileSaver implementation.
|
||||||
|
* 1.3.2
|
||||||
|
* 2016-06-16 18:25:19
|
||||||
|
*
|
||||||
|
* By Eli Grey, http://eligrey.com
|
||||||
|
* License: MIT
|
||||||
|
* See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global self */
|
||||||
|
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
|
||||||
|
|
||||||
|
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
||||||
|
|
||||||
|
var saveAs = saveAs || (function(view) {
|
||||||
|
"use strict";
|
||||||
|
// IE <10 is explicitly unsupported
|
||||||
|
if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var
|
||||||
|
doc = view.document
|
||||||
|
// only get URL when necessary in case Blob.js hasn't overridden it yet
|
||||||
|
, get_URL = function() {
|
||||||
|
return view.URL || view.webkitURL || view;
|
||||||
|
}
|
||||||
|
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
|
||||||
|
, can_use_save_link = "download" in save_link
|
||||||
|
, click = function(node) {
|
||||||
|
var event = new MouseEvent("click");
|
||||||
|
node.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
, is_safari = /constructor/i.test(view.HTMLElement) || view.safari
|
||||||
|
, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
|
||||||
|
, throw_outside = function(ex) {
|
||||||
|
(view.setImmediate || view.setTimeout)(function() {
|
||||||
|
throw ex;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
, force_saveable_type = "application/octet-stream"
|
||||||
|
// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
|
||||||
|
, arbitrary_revoke_timeout = 1000 * 40 // in ms
|
||||||
|
, revoke = function(file) {
|
||||||
|
var revoker = function() {
|
||||||
|
if (typeof file === "string") { // file is an object URL
|
||||||
|
get_URL().revokeObjectURL(file);
|
||||||
|
} else { // file is a File
|
||||||
|
file.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
setTimeout(revoker, arbitrary_revoke_timeout);
|
||||||
|
}
|
||||||
|
, dispatch = function(filesaver, event_types, event) {
|
||||||
|
event_types = [].concat(event_types);
|
||||||
|
var i = event_types.length;
|
||||||
|
while (i--) {
|
||||||
|
var listener = filesaver["on" + event_types[i]];
|
||||||
|
if (typeof listener === "function") {
|
||||||
|
try {
|
||||||
|
listener.call(filesaver, event || filesaver);
|
||||||
|
} catch (ex) {
|
||||||
|
throw_outside(ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
, auto_bom = function(blob) {
|
||||||
|
// prepend BOM for UTF-8 XML and text/* types (including HTML)
|
||||||
|
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
|
||||||
|
if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
|
||||||
|
return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
|
||||||
|
}
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
|
, FileSaver = function(blob, name, no_auto_bom) {
|
||||||
|
if (!no_auto_bom) {
|
||||||
|
blob = auto_bom(blob);
|
||||||
|
}
|
||||||
|
// First try a.download, then web filesystem, then object URLs
|
||||||
|
var
|
||||||
|
filesaver = this
|
||||||
|
, type = blob.type
|
||||||
|
, force = type === force_saveable_type
|
||||||
|
, object_url
|
||||||
|
, dispatch_all = function() {
|
||||||
|
dispatch(filesaver, "writestart progress write writeend".split(" "));
|
||||||
|
}
|
||||||
|
// on any filesys errors revert to saving with object URLs
|
||||||
|
, fs_error = function() {
|
||||||
|
if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
|
||||||
|
// Safari doesn't allow downloading of blob urls
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onloadend = function() {
|
||||||
|
var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
|
||||||
|
var popup = view.open(url, '_blank');
|
||||||
|
if(!popup) view.location.href = url;
|
||||||
|
url=undefined; // release reference before dispatching
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
filesaver.readyState = filesaver.INIT;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// don't create more object URLs than needed
|
||||||
|
if (!object_url) {
|
||||||
|
object_url = get_URL().createObjectURL(blob);
|
||||||
|
}
|
||||||
|
if (force) {
|
||||||
|
view.location.href = object_url;
|
||||||
|
} else {
|
||||||
|
var opened = view.open(object_url, "_blank");
|
||||||
|
if (!opened) {
|
||||||
|
// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
|
||||||
|
view.location.href = object_url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
revoke(object_url);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
filesaver.readyState = filesaver.INIT;
|
||||||
|
|
||||||
|
if (can_use_save_link) {
|
||||||
|
object_url = get_URL().createObjectURL(blob);
|
||||||
|
setTimeout(function() {
|
||||||
|
save_link.href = object_url;
|
||||||
|
save_link.download = name;
|
||||||
|
click(save_link);
|
||||||
|
dispatch_all();
|
||||||
|
revoke(object_url);
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fs_error();
|
||||||
|
}
|
||||||
|
, FS_proto = FileSaver.prototype
|
||||||
|
, saveAs = function(blob, name, no_auto_bom) {
|
||||||
|
return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
// IE 10+ (native saveAs)
|
||||||
|
if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
|
||||||
|
return function(blob, name, no_auto_bom) {
|
||||||
|
name = name || blob.name || "download";
|
||||||
|
|
||||||
|
if (!no_auto_bom) {
|
||||||
|
blob = auto_bom(blob);
|
||||||
|
}
|
||||||
|
return navigator.msSaveOrOpenBlob(blob, name);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
FS_proto.abort = function(){};
|
||||||
|
FS_proto.readyState = FS_proto.INIT = 0;
|
||||||
|
FS_proto.WRITING = 1;
|
||||||
|
FS_proto.DONE = 2;
|
||||||
|
|
||||||
|
FS_proto.error =
|
||||||
|
FS_proto.onwritestart =
|
||||||
|
FS_proto.onprogress =
|
||||||
|
FS_proto.onwrite =
|
||||||
|
FS_proto.onabort =
|
||||||
|
FS_proto.onerror =
|
||||||
|
FS_proto.onwriteend =
|
||||||
|
null;
|
||||||
|
|
||||||
|
return saveAs;
|
||||||
|
}(
|
||||||
|
typeof self !== "undefined" && self
|
||||||
|
|| typeof window !== "undefined" && window
|
||||||
|
|| this.content
|
||||||
|
));
|
||||||
|
// `self` is undefined in Firefox for Android content script context
|
||||||
|
// while `this` is nsIContentFrameMessageManager
|
||||||
|
// with an attribute `content` that corresponds to the window
|
||||||
|
|
||||||
|
if (typeof module !== "undefined" && module.exports) {
|
||||||
|
module.exports.saveAs = saveAs;
|
||||||
|
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
|
||||||
|
define("FileSaver.js", function() {
|
||||||
|
return saveAs;
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
var blackTheme = {
|
||||||
|
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
|
||||||
|
'common.bisize.width': '251px',
|
||||||
|
'common.bisize.height': '21px',
|
||||||
|
'common.backgroundImage': 'none',
|
||||||
|
'common.backgroundColor': '#1e1e1e',
|
||||||
|
'common.border': '0px',
|
||||||
|
|
||||||
|
// header
|
||||||
|
'header.backgroundImage': 'none',
|
||||||
|
'header.backgroundColor': 'transparent',
|
||||||
|
'header.border': '0px',
|
||||||
|
|
||||||
|
// load button
|
||||||
|
'loadButton.backgroundColor': '#fff',
|
||||||
|
'loadButton.border': '1px solid #ddd',
|
||||||
|
'loadButton.color': '#222',
|
||||||
|
'loadButton.fontFamily': "'Noto Sans', sans-serif",
|
||||||
|
'loadButton.fontSize': '12px',
|
||||||
|
|
||||||
|
// download button
|
||||||
|
'downloadButton.backgroundColor': '#fdba3b',
|
||||||
|
'downloadButton.border': '1px solid #fdba3b',
|
||||||
|
'downloadButton.color': '#fff',
|
||||||
|
'downloadButton.fontFamily': "'Noto Sans', sans-serif",
|
||||||
|
'downloadButton.fontSize': '12px',
|
||||||
|
|
||||||
|
// main icons
|
||||||
|
'menu.normalIcon.color': '#8a8a8a',
|
||||||
|
'menu.activeIcon.color': '#555555',
|
||||||
|
'menu.disabledIcon.color': '#434343',
|
||||||
|
'menu.hoverIcon.color': '#e9e9e9',
|
||||||
|
'menu.iconSize.width': '24px',
|
||||||
|
'menu.iconSize.height': '24px',
|
||||||
|
|
||||||
|
// submenu icons
|
||||||
|
'submenu.normalIcon.color': '#8a8a8a',
|
||||||
|
'submenu.activeIcon.color': '#e9e9e9',
|
||||||
|
'submenu.iconSize.width': '32px',
|
||||||
|
'submenu.iconSize.height': '32px',
|
||||||
|
|
||||||
|
// submenu primary color
|
||||||
|
'submenu.backgroundColor': '#1e1e1e',
|
||||||
|
'submenu.partition.color': '#3c3c3c',
|
||||||
|
|
||||||
|
// submenu labels
|
||||||
|
'submenu.normalLabel.color': '#8a8a8a',
|
||||||
|
'submenu.normalLabel.fontWeight': 'lighter',
|
||||||
|
'submenu.activeLabel.color': '#fff',
|
||||||
|
'submenu.activeLabel.fontWeight': 'lighter',
|
||||||
|
|
||||||
|
// checkbox style
|
||||||
|
'checkbox.border': '0px',
|
||||||
|
'checkbox.backgroundColor': '#fff',
|
||||||
|
|
||||||
|
// range style
|
||||||
|
'range.pointer.color': '#fff',
|
||||||
|
'range.bar.color': '#666',
|
||||||
|
'range.subbar.color': '#d1d1d1',
|
||||||
|
|
||||||
|
'range.disabledPointer.color': '#414141',
|
||||||
|
'range.disabledBar.color': '#282828',
|
||||||
|
'range.disabledSubbar.color': '#414141',
|
||||||
|
|
||||||
|
'range.value.color': '#fff',
|
||||||
|
'range.value.fontWeight': 'lighter',
|
||||||
|
'range.value.fontSize': '11px',
|
||||||
|
'range.value.border': '1px solid #353535',
|
||||||
|
'range.value.backgroundColor': '#151515',
|
||||||
|
'range.title.color': '#fff',
|
||||||
|
'range.title.fontWeight': 'lighter',
|
||||||
|
|
||||||
|
// colorpicker style
|
||||||
|
'colorpicker.button.border': '1px solid #1e1e1e',
|
||||||
|
'colorpicker.title.color': '#fff',
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,76 @@
|
|||||||
|
var whiteTheme = {
|
||||||
|
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
|
||||||
|
'common.bisize.width': '251px',
|
||||||
|
'common.bisize.height': '21px',
|
||||||
|
'common.backgroundImage': './img/bg.png',
|
||||||
|
'common.backgroundColor': '#fff',
|
||||||
|
'common.border': '1px solid #c1c1c1',
|
||||||
|
|
||||||
|
// header
|
||||||
|
'header.backgroundImage': 'none',
|
||||||
|
'header.backgroundColor': 'transparent',
|
||||||
|
'header.border': '0px',
|
||||||
|
|
||||||
|
// load button
|
||||||
|
'loadButton.backgroundColor': '#fff',
|
||||||
|
'loadButton.border': '1px solid #ddd',
|
||||||
|
'loadButton.color': '#222',
|
||||||
|
'loadButton.fontFamily': "'Noto Sans', sans-serif",
|
||||||
|
'loadButton.fontSize': '12px',
|
||||||
|
|
||||||
|
// download button
|
||||||
|
'downloadButton.backgroundColor': '#fdba3b',
|
||||||
|
'downloadButton.border': '1px solid #fdba3b',
|
||||||
|
'downloadButton.color': '#fff',
|
||||||
|
'downloadButton.fontFamily': "'Noto Sans', sans-serif",
|
||||||
|
'downloadButton.fontSize': '12px',
|
||||||
|
|
||||||
|
// main icons
|
||||||
|
'menu.normalIcon.color': '#8a8a8a',
|
||||||
|
'menu.activeIcon.color': '#555555',
|
||||||
|
'menu.disabledIcon.color': '#434343',
|
||||||
|
'menu.hoverIcon.color': '#e9e9e9',
|
||||||
|
'menu.iconSize.width': '24px',
|
||||||
|
'menu.iconSize.height': '24px',
|
||||||
|
|
||||||
|
// submenu icons
|
||||||
|
'submenu.normalIcon.color': '#8a8a8a',
|
||||||
|
'submenu.activeIcon.color': '#555555',
|
||||||
|
'submenu.iconSize.width': '32px',
|
||||||
|
'submenu.iconSize.height': '32px',
|
||||||
|
|
||||||
|
// submenu primary color
|
||||||
|
'submenu.backgroundColor': 'transparent',
|
||||||
|
'submenu.partition.color': '#e5e5e5',
|
||||||
|
|
||||||
|
// submenu labels
|
||||||
|
'submenu.normalLabel.color': '#858585',
|
||||||
|
'submenu.normalLabel.fontWeight': 'normal',
|
||||||
|
'submenu.activeLabel.color': '#000',
|
||||||
|
'submenu.activeLabel.fontWeight': 'normal',
|
||||||
|
|
||||||
|
// checkbox style
|
||||||
|
'checkbox.border': '1px solid #ccc',
|
||||||
|
'checkbox.backgroundColor': '#fff',
|
||||||
|
|
||||||
|
// rango style
|
||||||
|
'range.pointer.color': '#333',
|
||||||
|
'range.bar.color': '#ccc',
|
||||||
|
'range.subbar.color': '#606060',
|
||||||
|
|
||||||
|
'range.disabledPointer.color': '#d3d3d3',
|
||||||
|
'range.disabledBar.color': 'rgba(85,85,85,0.06)',
|
||||||
|
'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
|
||||||
|
|
||||||
|
'range.value.color': '#000',
|
||||||
|
'range.value.fontWeight': 'normal',
|
||||||
|
'range.value.fontSize': '11px',
|
||||||
|
'range.value.border': '0',
|
||||||
|
'range.value.backgroundColor': '#f5f5f5',
|
||||||
|
'range.title.color': '#000',
|
||||||
|
'range.title.fontWeight': 'lighter',
|
||||||
|
|
||||||
|
// colorpicker style
|
||||||
|
'colorpicker.button.border': '0px',
|
||||||
|
'colorpicker.title.color': '#000',
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue