add glyf outout
This commit is contained in:
kekee000
@@ -88,3 +88,5 @@ sh build.sh
|
||||
21. 2015-8-9 增加按照unicode排序功能，增加菜单状态.
|
||||
|
||||
22. 2016-1-5 增加复合字形编辑和复制功能.
|
||||
|
||||
23. 2016-2-25 增加字形导出svg和png功能.
|
||||
|
||||
43
css/common/glyf-download.less
Normal file
43
css/common/glyf-download.less
Normal file
@@ -0,0 +1,43 @@
|
||||
// 字形下载对话框
|
||||
.glyf-download-dialog {
|
||||
|
||||
.field-margin {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
height: 360px;
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
>canvas {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.glyf-download-btn {
|
||||
text-align: center;
|
||||
|
||||
.btn-flat {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.field-margin {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// color picker 样式
|
||||
.cp-color-picker {
|
||||
z-index: 10000;
|
||||
}
|
||||
994
css/main.css
994
css/main.css
@@ -1,994 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
body,
|
||||
button,
|
||||
dd,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
input,
|
||||
legend,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
td,
|
||||
textarea,
|
||||
th,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: 12px/1.5 tahoma, arial, sans-serif;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: courier new, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
legend {
|
||||
color: #000000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.modal-dialog {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.modal-dialog hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-header {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
background: #327EC0;
|
||||
color: #FFF;
|
||||
}
|
||||
.modal-header .close {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.modal-header .modal-title {
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.modal-footer {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.modal-body {
|
||||
min-height: 100px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.modal-content {
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
background: #323842;
|
||||
border: none;
|
||||
}
|
||||
.dropdown-menu > li > a {
|
||||
cursor: pointer;
|
||||
color: #B6CBDD;
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: #FFF;
|
||||
background: #232830;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.input-group .input-group-addon {
|
||||
text-align: left;
|
||||
}
|
||||
.list-group-item .from {
|
||||
float: right;
|
||||
}
|
||||
hr {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.column-2 .form-group,
|
||||
.column-3 .form-group,
|
||||
.column-4 .form-group {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.column-2 .form-group {
|
||||
width: 45%;
|
||||
}
|
||||
.column-3 .form-group {
|
||||
width: 30%;
|
||||
}
|
||||
.column-4 .form-group {
|
||||
width: 22%;
|
||||
}
|
||||
.navbar {
|
||||
height: 50px;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.btn-groups {
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn-groups > .split {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #D8D8D8;
|
||||
margin: 0 8px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-flat {
|
||||
border-radius: 0;
|
||||
color: #FFF;
|
||||
background: #738089;
|
||||
}
|
||||
.btn-flat:hover,
|
||||
.btn-flat:focus {
|
||||
background: #323842;
|
||||
color: #B6CBDD;
|
||||
outline: none;
|
||||
}
|
||||
.btn-flat > .ico-left {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.btn-flat > .ico {
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-flat > .drop {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-new {
|
||||
color: #FFF;
|
||||
background: #4A90E2;
|
||||
}
|
||||
.btn-new:hover,
|
||||
.btn-new:focus {
|
||||
background: #2275d7;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn-preview {
|
||||
color: #FFF;
|
||||
background: #28B4A0;
|
||||
}
|
||||
.btn-preview:hover,
|
||||
.btn-preview:focus {
|
||||
background: #3bd4be;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn-preview.dropdown-toggle:focus {
|
||||
background: #323842;
|
||||
color: #B6CBDD;
|
||||
}
|
||||
.btn-confirm {
|
||||
color: #FFF;
|
||||
background: #4A90E2;
|
||||
}
|
||||
.btn-confirm:hover,
|
||||
.btn-confirm:focus {
|
||||
background: #2275d7;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn-ico {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.btn-ico > .ico {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.command-groups {
|
||||
height: 40px;
|
||||
padding-left: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(112, 119, 128, 0.8);
|
||||
}
|
||||
.command-groups > li {
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
padding: 0 8px;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.command-groups > li > i {
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.command-groups > li > .ico {
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.command-groups > li:hover {
|
||||
background: #8a919a;
|
||||
}
|
||||
.command-groups > li[data-theme="ico"] {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.command-groups > li[data-disabled] {
|
||||
color: #B9BDC1;
|
||||
}
|
||||
.command-groups > li[data-on] {
|
||||
background: #585e66;
|
||||
}
|
||||
.command-groups > [data-split] {
|
||||
padding: 0!important;
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: #989ea6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pager {
|
||||
margin: 0;
|
||||
}
|
||||
.pager .form-control {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
padding: 6px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.pager [data-pager="goto"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.pager [data-pager="info"] {
|
||||
margin: 0 5px;
|
||||
color: #FFF;
|
||||
}
|
||||
.form-line {
|
||||
line-height: 34px;
|
||||
}
|
||||
.form-title {
|
||||
vertical-align: 3px;
|
||||
}
|
||||
.btn-right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
min-height: 20px;
|
||||
background-clip: content-box;
|
||||
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-width: 1024px;
|
||||
top: 0;
|
||||
}
|
||||
.navbar > .logo {
|
||||
float: left;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background: url(img/logo.png) no-repeat;
|
||||
background-color: #fff;
|
||||
background-position: center;
|
||||
background-image: url(img/logo@1x.png);
|
||||
background-image: -webkit-image-set(url(img/logo@1x.png) 1x, url(img/logo@2x.png) 2x);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.navbar > .action-groups {
|
||||
margin-left: 180px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.navbar > .action-groups [data-disabled="1"] {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.navbar > .action-groups [data-disabled="1"] a {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
width: 180px;
|
||||
top: 50px;
|
||||
bottom: 0;
|
||||
background: #232830;
|
||||
}
|
||||
.main {
|
||||
margin-left: 180px;
|
||||
padding-top: 90px;
|
||||
height: 100%;
|
||||
background: #BCC5CD;
|
||||
}
|
||||
.main .glyf-list {
|
||||
padding: 10px 0 0 10px;
|
||||
}
|
||||
.main .command-groups {
|
||||
margin-top: -40px;
|
||||
display: none;
|
||||
}
|
||||
.main .pager {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
padding: 5px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #707780;
|
||||
display: none;
|
||||
}
|
||||
.main.editing {
|
||||
margin-left: 70%;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.main.editing .command-groups {
|
||||
display: none;
|
||||
}
|
||||
.loading {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 30%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
}
|
||||
.loading span {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
background: rgba(84, 114, 93, 0.9);
|
||||
color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
.loading[data-status="error"] span {
|
||||
color: red;
|
||||
background: rgba(236, 234, 69, 0.9);
|
||||
}
|
||||
.loading[data-status="warn"] span {
|
||||
color: #FF8722;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.editor {
|
||||
position: fixed;
|
||||
width: 70%;
|
||||
top: 50px;
|
||||
padding-top: 40px;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: #FEFEFE;
|
||||
border-right: 1px solid #DDD;
|
||||
display: none;
|
||||
}
|
||||
.editor .command-groups {
|
||||
background: #707780;
|
||||
margin-top: -40px;
|
||||
}
|
||||
.editor .close-editor {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-right: 5px;
|
||||
z-index: 100;
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
color: #FFF;
|
||||
display: none;
|
||||
}
|
||||
.editor .close-editor:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.editor:hover .close-editor {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (min-width: 1300px) and (max-width: 1600px) {
|
||||
.editor .command-groups > li,
|
||||
.editor .command-groups > li[data-theme="ico"] {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1300px) {
|
||||
.editor .command-groups > li,
|
||||
.editor .command-groups > li[data-theme="ico"] {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
.editor.editing {
|
||||
display: block;
|
||||
}
|
||||
.selection-range {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
border: 1px solid #CCC;
|
||||
background: rgba(222, 222, 222, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
.forkme,
|
||||
.userguide,
|
||||
.switch-lang {
|
||||
position: absolute;
|
||||
color: #FFF;
|
||||
color: #333;
|
||||
}
|
||||
.forkme {
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
.userguide {
|
||||
right: 2px;
|
||||
top: 24px;
|
||||
}
|
||||
.switch-lang {
|
||||
right: 140px;
|
||||
top: 2px;
|
||||
}
|
||||
.switch-lang a {
|
||||
color: #666;
|
||||
}
|
||||
.modal {
|
||||
background: -webkit-radial-gradient(center, circle contain, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-header {
|
||||
background: #fff;
|
||||
color: #202430;
|
||||
}
|
||||
.modal-body {
|
||||
background: #F8F9F9;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 0;
|
||||
background: #F8F9F9;
|
||||
}
|
||||
.modal-footer .btn-default {
|
||||
border-radius: 0;
|
||||
color: #FFF;
|
||||
background: #738089;
|
||||
}
|
||||
.modal-footer .btn-primary {
|
||||
border-radius: 0;
|
||||
background: #4A90E2;
|
||||
}
|
||||
html .hm-t-feedback-trigger {
|
||||
bottom: 80px!important;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'fonteditor';
|
||||
src: url('../font/fonteditor.ttf') format('truetype');
|
||||
}
|
||||
.ico {
|
||||
display: inline-block;
|
||||
}
|
||||
.ico:before,
|
||||
.ico:after {
|
||||
font-family: 'fonteditor';
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.1px;
|
||||
}
|
||||
.i-leave:before {
|
||||
content: '\e00c';
|
||||
}
|
||||
.i-edit,
|
||||
.i-del,
|
||||
.i-leave {
|
||||
font-size: 12px;
|
||||
}
|
||||
.i-edit:hover,
|
||||
.i-del:hover,
|
||||
.i-leave:hover {
|
||||
cursor: pointer;
|
||||
color: #4A90E2;
|
||||
}
|
||||
.i-edit,
|
||||
.i-del {
|
||||
color: #76abe9;
|
||||
}
|
||||
.i-edit:before {
|
||||
content: '\e021';
|
||||
}
|
||||
.i-del:before {
|
||||
content: '\e020';
|
||||
}
|
||||
.i-github:before {
|
||||
content: '\e01e';
|
||||
}
|
||||
.i-help:before {
|
||||
content: '\e016';
|
||||
}
|
||||
.i-new:before {
|
||||
content: '\e019';
|
||||
}
|
||||
.i-open:before {
|
||||
content: '\e01A';
|
||||
}
|
||||
.i-add:before {
|
||||
content: '\e003';
|
||||
}
|
||||
.i-undo:before {
|
||||
content: '\e001';
|
||||
}
|
||||
.i-redo:before {
|
||||
content: '\e002';
|
||||
}
|
||||
.i-down:before {
|
||||
content: '\e00e';
|
||||
}
|
||||
.i-left:before {
|
||||
content: '\e00a';
|
||||
}
|
||||
.i-ttf:before {
|
||||
content: '\e00f';
|
||||
}
|
||||
.i-woff:before {
|
||||
content: '\e010';
|
||||
}
|
||||
.i-zip:before {
|
||||
content: '\e011';
|
||||
}
|
||||
.i-save:before {
|
||||
content: '\e022';
|
||||
}
|
||||
.i-upshape:before {
|
||||
content: '\e014';
|
||||
}
|
||||
.i-downshape:before {
|
||||
content: '\e00b';
|
||||
}
|
||||
.i-reversepoints:before {
|
||||
content: '\e00d';
|
||||
}
|
||||
.i-alignleft:before {
|
||||
content: '\e006';
|
||||
}
|
||||
.i-aligncenter:before {
|
||||
content: '\e004';
|
||||
}
|
||||
.i-alignright:before {
|
||||
content: '\e007';
|
||||
}
|
||||
.i-aligntop:before {
|
||||
content: '\e008';
|
||||
}
|
||||
.i-alignmiddle:before {
|
||||
content: '\e005';
|
||||
}
|
||||
.i-aligndescent:before {
|
||||
content: '\e009';
|
||||
}
|
||||
.i-alignbaseline:before {
|
||||
content: '\e009';
|
||||
}
|
||||
.i-rotateleft:before {
|
||||
content: '\e01c';
|
||||
}
|
||||
.i-rotateright:before {
|
||||
content: '\e01d';
|
||||
}
|
||||
.i-flip:before {
|
||||
content: '\e013';
|
||||
}
|
||||
.i-mirror:before {
|
||||
content: '\e012';
|
||||
}
|
||||
.i-splitshapes:before {
|
||||
content: '\e024';
|
||||
}
|
||||
.i-joinshapes:before {
|
||||
content: '\e025';
|
||||
}
|
||||
.i-intersectshapes:before {
|
||||
content: '\e026';
|
||||
}
|
||||
.i-tangencyshapes:before {
|
||||
content: '\e027';
|
||||
}
|
||||
.i-rangemode:before {
|
||||
content: '\e029';
|
||||
}
|
||||
.i-pointmode:before {
|
||||
content: '\e028';
|
||||
}
|
||||
.project-btns {
|
||||
margin: 0 15px;
|
||||
padding: 10px 0;
|
||||
border-bottom: #353D45 1px solid;
|
||||
}
|
||||
.project-btns .btn {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.project-btns .btn:last-child {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
}
|
||||
.project .project-title {
|
||||
font-weight: bold;
|
||||
color: #6F7D88;
|
||||
padding-left: 15px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.project .project-list dl {
|
||||
padding: 0 10px 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project .project-list dl dt {
|
||||
line-height: 28px;
|
||||
font-weight: normal;
|
||||
color: #9EB0C0;
|
||||
}
|
||||
.project .project-list dl dd {
|
||||
display: none;
|
||||
line-height: 28px;
|
||||
color: #6F7D88;
|
||||
}
|
||||
.project .project-list dl dd span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.project .project-list dl dd span:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.project .project-list dl:hover {
|
||||
background: #48515f;
|
||||
}
|
||||
.project .project-list dl:hover dt {
|
||||
color: #FFF;
|
||||
}
|
||||
.project .project-list dl.selected {
|
||||
background: #323842;
|
||||
}
|
||||
.project .project-list dl.selected dd {
|
||||
display: block;
|
||||
}
|
||||
.glyf-list {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.glyf-list > .glyf-item {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
width: 80px;
|
||||
box-shadow: 1px 1px 4px #999;
|
||||
cursor: pointer;
|
||||
background: #ECECEC;
|
||||
}
|
||||
.glyf-list > .glyf-item .unicode,
|
||||
.glyf-list > .glyf-item .name {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
padding-left: 4px;
|
||||
color: #45283F;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.glyf-list > .glyf-item .unicode {
|
||||
color: #70A9D6;
|
||||
}
|
||||
.glyf-list > .glyf-item .glyf {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid #FFF;
|
||||
background: #FFF;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
.glyf-list > .glyf-item .glyf .path {
|
||||
fill: #232830;
|
||||
}
|
||||
.glyf-list > .glyf-item .i-del,
|
||||
.glyf-list > .glyf-item .i-edit {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
padding: 0 2px;
|
||||
display: none;
|
||||
}
|
||||
.glyf-list > .glyf-item .i-edit {
|
||||
right: 20px;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover .glyf,
|
||||
.glyf-list > .selected .glyf {
|
||||
border-color: #232830;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover .name,
|
||||
.glyf-list > .selected .name {
|
||||
color: #FFF;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover {
|
||||
background: #3C619B;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover .name {
|
||||
color: #FFF;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover .i-del {
|
||||
display: block;
|
||||
}
|
||||
.glyf-list > .glyf-item:hover .i-edit {
|
||||
display: block;
|
||||
}
|
||||
.glyf-list > .selected,
|
||||
.glyf-list > .selected:hover {
|
||||
background: #232830;
|
||||
}
|
||||
.glyf-list > .editing .glyf,
|
||||
.glyf-list > .editing:hover .glyf {
|
||||
border-color: #066BC5;
|
||||
}
|
||||
.glyf-list > .compound .path {
|
||||
fill: #80ff80 !important;
|
||||
}
|
||||
.glyf-list > .new .path,
|
||||
.glyf-list > .edit .path {
|
||||
fill: blue!important;
|
||||
}
|
||||
.glyf-list.xlarge > .glyf-item {
|
||||
width: 160px;
|
||||
}
|
||||
.glyf-list.xlarge > .glyf-item .glyf {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.glyf-list.large > .glyf-item {
|
||||
width: 120px;
|
||||
}
|
||||
.glyf-list.large > .glyf-item .glyf {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.glyf-list.small > .glyf-item {
|
||||
width: 60px;
|
||||
}
|
||||
.glyf-list.small > .glyf-item .glyf {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.glyf-list.no-hover .glyf-item {
|
||||
pointer-events: none;
|
||||
}
|
||||
.glyf-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
display: none;
|
||||
}
|
||||
.glyf-editor .marker-x,
|
||||
.glyf-editor .marker-y {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 60;
|
||||
pointer-events: none;
|
||||
}
|
||||
.glyf-editor .marker-x {
|
||||
width: 20px;
|
||||
border-top: 1px dashed #000;
|
||||
}
|
||||
.glyf-editor .marker-y {
|
||||
height: 20px;
|
||||
border-left: 1px dashed #000;
|
||||
}
|
||||
.editor-contextmenu {
|
||||
color: #333;
|
||||
width: 150px;
|
||||
border: 1px solid #999;
|
||||
background: #FEFEFE;
|
||||
line-height: 24px;
|
||||
padding: 0 4px;
|
||||
box-shadow: 1px 1px 1px #CCC;
|
||||
position: absolute;
|
||||
}
|
||||
.editor-contextmenu li {
|
||||
padding-left: 4px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #CCC;
|
||||
}
|
||||
.editor-contextmenu li > ul {
|
||||
display: none;
|
||||
color: #333;
|
||||
width: 150px;
|
||||
border: 1px solid #999;
|
||||
background: #FEFEFE;
|
||||
line-height: 24px;
|
||||
padding: 0 4px;
|
||||
box-shadow: 1px 1px 1px #CCC;
|
||||
position: absolute;
|
||||
margin-left: 130px;
|
||||
}
|
||||
.editor-contextmenu > li[data-sub] {
|
||||
color: #4A90E2;
|
||||
}
|
||||
.editor-contextmenu > li[data-sub]:after {
|
||||
content: '>';
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
font-family: 'Simsun';
|
||||
}
|
||||
.editor-contextmenu li[data-tag="selected"] {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
}
|
||||
.editor-contextmenu li[data-tag="selected"]:before,
|
||||
.editor-contextmenu li[data-tag="selected"]:after {
|
||||
font-family: 'fonteditor';
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.1px;
|
||||
}
|
||||
.editor-contextmenu li[data-tag="selected"]:after {
|
||||
content: '\e01f';
|
||||
}
|
||||
.editor-contextmenu li[data-tag="selected"]:after {
|
||||
float: right;
|
||||
margin-right: 4px;
|
||||
color: #4A90E2;
|
||||
}
|
||||
.editor-contextmenu li:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
.editor-contextmenu li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
.editor-contextmenu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.setting-metrics .modal-dialog {
|
||||
width: 800px;
|
||||
}
|
||||
.setting-metrics .panose-inline {
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
.setting-metrics .panose-inline .input-group {
|
||||
width: 100%;
|
||||
}
|
||||
.list-font-online {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
.import-pic-dialog .modal-dialog {
|
||||
width: 960px;
|
||||
}
|
||||
.import-pic-dialog .modal-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.import-pic-dialog .preview-panel {
|
||||
background: #FFF;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.import-pic-dialog .preview-panel .canvas-left,
|
||||
.import-pic-dialog .preview-panel .canvas-right {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 420px;
|
||||
overflow: auto;
|
||||
}
|
||||
.import-pic-dialog .preview-panel .canvas-left {
|
||||
border-right: 1px solid #BAC1CB;
|
||||
}
|
||||
.import-pic-dialog .preview-panel.fitpanel canvas {
|
||||
max-width: 100%;
|
||||
max-height: 99%;
|
||||
}
|
||||
.import-pic-dialog .preview-panel.showleft .canvas-left {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.import-pic-dialog .preview-panel.showleft .canvas-right {
|
||||
display: none;
|
||||
}
|
||||
.import-pic-dialog .preview-panel.showright .canvas-right {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.import-pic-dialog .preview-panel.showright .canvas-left {
|
||||
display: none;
|
||||
}
|
||||
.import-pic-dialog .import-pic-url {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
background: #4A90E2;
|
||||
padding: 10px 10px 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
display: none;
|
||||
}
|
||||
.import-pic-dialog .import-pic-url.show-url {
|
||||
display: block;
|
||||
}
|
||||
@@ -6,3 +6,4 @@
|
||||
@import './common/editor.less';
|
||||
@import './common/dialog.less';
|
||||
@import './common/import-pic.less';
|
||||
@import './common/glyf-download.less';
|
||||
|
||||
3
dep/jqColorPicker.min.js
vendored
Normal file
3
dep/jqColorPicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -8,15 +8,15 @@ exports.getProcessors = function () {
|
||||
|
||||
|
||||
return [
|
||||
new LessCompiler( {
|
||||
files: [
|
||||
'css/main.less',
|
||||
'css/preview.less'
|
||||
],
|
||||
compileOptions: {
|
||||
relativeUrls: false
|
||||
}
|
||||
}),
|
||||
// new LessCompiler( {
|
||||
// files: [
|
||||
// 'css/main.less',
|
||||
// 'css/preview.less'
|
||||
// ],
|
||||
// compileOptions: {
|
||||
// relativeUrls: false
|
||||
// }
|
||||
// }),
|
||||
|
||||
|
||||
new Html2JsCompiler({
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -145,6 +145,7 @@
|
||||
<iframe id="sync-frame" name="sync-frame" width="0" height="0" frameborder="0" style="display:none;"></iframe>
|
||||
<script src="./dep/esl.js"></script>
|
||||
<script src="./dep/jquery.min.js"></script>
|
||||
<script src="./dep/jqColorPicker.min.js"></script>
|
||||
<script src="./dep/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="./dep/clipper.js"></script>
|
||||
<script src="./dep/hidpi-canvas.js"></script>
|
||||
|
||||
@@ -344,6 +344,16 @@ define(
|
||||
}
|
||||
}).show();
|
||||
|
||||
})
|
||||
.on('download-glyf', function (e) {
|
||||
var SettingGlyfDownload = settingSupport['glyf-download'];
|
||||
// 获取需要下载的图标，转换成简单字形
|
||||
var list = program.ttfManager.getCopiedGlyf(e.list);
|
||||
!new SettingGlyfDownload().show({
|
||||
ttf: program.ttfManager.get(),
|
||||
glyf: list[0]
|
||||
});
|
||||
|
||||
})
|
||||
.on('setting-unicode', function (e) {
|
||||
var SettingUnicode = settingSupport.unicode;
|
||||
|
||||
52
src/fonteditor/dialog/colorpicker.js
Normal file
52
src/fonteditor/dialog/colorpicker.js
Normal file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* @file 颜色选择器
|
||||
* @author mengke01(kekee000@gmail.com)
|
||||
*/
|
||||
|
||||
|
||||
define(function(require) {
|
||||
var lang = require('common/lang');
|
||||
|
||||
var defaultOptions = {
|
||||
customBG: '#222',
|
||||
margin: '5px -2px 0',
|
||||
doRender: 'div div',
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-color-picker{border:1px solid #999; padding:10px 10px 0;' +
|
||||
'background:#eee; overflow:visible; border-radius:3px;}' +
|
||||
'.cp-color-picker:after{content:""; display:block; ' +
|
||||
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
|
||||
'border-color: transparent transparent #eee}' +
|
||||
// simulate border...
|
||||
'.cp-color-picker:before{content:""; display:block; ' +
|
||||
'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
|
||||
'border-color: transparent transparent #999}' +
|
||||
'.cp-xy-slider:active {cursor:none;}' +
|
||||
'.cp-xy-slider{border:1px solid #999; margin-bottom:10px;}' +
|
||||
'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
|
||||
'.cp-z-slider{margin-left:10px; border:1px solid #999;}' +
|
||||
'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
|
||||
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px; border-radius:6px;' +
|
||||
'overflow:visible; border:1px solid #999; box-sizing:border-box;' +
|
||||
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);}' +
|
||||
'.cp-color-picker .cp-alpha{margin:10px 0}' +
|
||||
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
|
||||
'width:14px; height:14px; margin:-5px -7px; border:1px solid #666!important;' +
|
||||
'box-shadow:inset -2px -4px 3px #ccc}',
|
||||
renderCallback: function (e, toggle) {
|
||||
if (false === toggle) {
|
||||
this.$trigger.trigger('change');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var exports = {
|
||||
show: function(element, options) {
|
||||
var picker = $(element).colorPicker($.extend({}, defaultOptions, options));
|
||||
return picker;
|
||||
}
|
||||
};
|
||||
|
||||
return exports;
|
||||
});
|
||||
86
src/fonteditor/dialog/glyf-download.js
Normal file
86
src/fonteditor/dialog/glyf-download.js
Normal file
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* @file 下载单个字形
|
||||
* @author mengke01(kekee000@gmail.com)
|
||||
*/
|
||||
|
||||
define(
|
||||
function (require) {
|
||||
var i18n = require('../i18n/i18n');
|
||||
var glyf2svgfile = require('../widget/util/glyf2svgfile');
|
||||
var svg2base64 = require('fonteditor-core/ttf/svg2base64');
|
||||
var bytes2base64 = require('fonteditor-core/ttf/util/bytes2base64');
|
||||
var colorpicker = require('./colorpicker');
|
||||
var pixelRatio = require('common/getPixelRatio');
|
||||
|
||||
function getSvg(setting) {
|
||||
var opt = {
|
||||
fillColor: $('#glyf-download-color').val().trim(),
|
||||
size: +$('#glyf-download-size').val(),
|
||||
unitsPerEm: setting.ttf.head.unitsPerEm
|
||||
};
|
||||
return glyf2svgfile(setting.glyf, opt);
|
||||
}
|
||||
|
||||
function previewGlyf() {
|
||||
// 由于生成的svg文档带xml头部，这里简单的去掉
|
||||
var svgText = getSvg(this.setting);
|
||||
var size = +$('#glyf-download-size').val();
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = canvas.height = size;
|
||||
|
||||
var img = new Image();
|
||||
img.src = 'data:image/svg+xml;base64,' + btoa(svgText);
|
||||
img.width = img.height = size;
|
||||
img.onload = function (e) {
|
||||
canvas.getContext('2d').drawImage(
|
||||
img,
|
||||
0, 0, size, size,
|
||||
0, 0, pixelRatio * size, pixelRatio * size
|
||||
);
|
||||
};
|
||||
|
||||
var previewer = $('#glyf-download-preview');
|
||||
previewer.children().remove();
|
||||
previewer.append(canvas);
|
||||
}
|
||||
|
||||
return require('./setting').derive({
|
||||
title: '导出字形',
|
||||
nofooter: true,
|
||||
getTpl: function () {
|
||||
return require('../template/dialog/glyf-download.tpl');
|
||||
},
|
||||
set: function (setting) {
|
||||
var onChange = $.proxy(previewGlyf, this);
|
||||
$('#glyf-download-color').on('change', onChange);
|
||||
$('#glyf-download-size').on('change', onChange);
|
||||
colorpicker.show('#glyf-download-color');
|
||||
$('#glyf-download-svg').on('mousedown', $.proxy(function (e) {
|
||||
var svgText = getSvg(this.setting);
|
||||
var target = $(e.target);
|
||||
target.attr('download', (this.setting.glyf.name || 'svg')+ '.svg');
|
||||
target.attr('href', svg2base64(svgText));
|
||||
}, this));
|
||||
|
||||
$('#glyf-download-png').on('mousedown', $.proxy(function (e) {
|
||||
var canvas = $('#glyf-download-preview canvas').get(0);
|
||||
var imgData = canvas.toDataURL();
|
||||
var target = $(e.target);
|
||||
target.attr('download', (this.setting.glyf.name || 'png')+ '.png');
|
||||
target.attr('href', imgData);
|
||||
}, this));
|
||||
|
||||
$('#glyf-download-name').html(setting.glyf.name);
|
||||
this.setting = setting;
|
||||
previewGlyf.call(this);
|
||||
},
|
||||
onDispose: function () {
|
||||
$('#glyf-download-color').off('change');
|
||||
$('#glyf-download-size').off('change');
|
||||
$('#glyf-download-svg').off('mousedown');
|
||||
$('#glyf-download-png').off('mousedown');
|
||||
this.setting = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -18,7 +18,8 @@ define(
|
||||
'find-glyf': require('../dialog/setting-find-glyf'),
|
||||
'ie': require('../dialog/setting-ie'),
|
||||
'import-pic': require('../dialog/setting-import-pic'),
|
||||
'sync': require('../dialog/setting-sync')
|
||||
'sync': require('../dialog/setting-sync'),
|
||||
'glyf-download': require('../dialog/glyf-download')
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
@@ -15,6 +15,7 @@ define(
|
||||
|
||||
scale: 'Scale By Percent',
|
||||
findglyf: 'Find Glyph',
|
||||
downloadglyf: 'Download Glyf',
|
||||
setunicode: 'Set Unicode',
|
||||
del: 'Delete',
|
||||
edit: 'Edit',
|
||||
|
||||
@@ -15,6 +15,7 @@ define(
|
||||
|
||||
scale: '按比例缩放',
|
||||
findglyf: '查找字形',
|
||||
downloadglyf: '导出字形',
|
||||
setunicode: '设置代码点',
|
||||
del: '删除',
|
||||
edit: '编辑',
|
||||
|
||||
@@ -54,6 +54,13 @@ define(
|
||||
name: 'find-glyf',
|
||||
title: i18n.lang.findglyf
|
||||
},
|
||||
{
|
||||
name: 'download-glyf',
|
||||
title: i18n.lang.downloadglyf
|
||||
},
|
||||
{
|
||||
type: 'split'
|
||||
},
|
||||
{
|
||||
name: 'setting-unicode',
|
||||
title: i18n.lang.setunicode
|
||||
|
||||
27
src/fonteditor/template/dialog/glyf-download.tpl
Normal file
27
src/fonteditor/template/dialog/glyf-download.tpl
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="glyf-download-dialog">
|
||||
<div class="form-inline">
|
||||
<span class="form-title">图标名称: <em id="glyf-download-name"></em></span>
|
||||
<div class="form-group field-margin">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">颜色</span>
|
||||
<input id="glyf-download-color" type="text" value="#666" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group field-margin">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">大小</span>
|
||||
<input id="glyf-download-size" type="number" value="128" min="10" max="10000" step="1" class="form-control"><span class="input-group-addon">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="glyf-download-preview" class="preview-panel">
|
||||
|
||||
</div>
|
||||
<div class="form-inline glyf-download-btn">
|
||||
<div class="input-group input-group-sm">
|
||||
<a id="glyf-download-svg" class="btn btn-flat btn-new">下载SVG</a>
|
||||
<a id="glyf-download-png" class="btn btn-flat field-margin">下载PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,10 +266,10 @@ define(
|
||||
selected.length === 1
|
||||
? 'enableCommands'
|
||||
: 'disableCommands'
|
||||
](['setting-font']);
|
||||
](['setting-font', 'download-glyf']);
|
||||
}
|
||||
else {
|
||||
commandMenu.disableCommands(['copy', 'cut', 'del', 'setting-font']);
|
||||
commandMenu.disableCommands(['copy', 'cut', 'del', 'setting-font', 'download-glyf']);
|
||||
}
|
||||
|
||||
}, 100));
|
||||
|
||||
58
src/fonteditor/widget/util/glyf2svgfile.js
Normal file
58
src/fonteditor/widget/util/glyf2svgfile.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* @file glyf列表渲染器
|
||||
* @author mengke01(kekee000@gmail.com)
|
||||
*/
|
||||
|
||||
|
||||
define(function (require) {
|
||||
var computeBoundingBox = require('fonteditor-core/graphics/computeBoundingBox');
|
||||
var contours2svg = require('fonteditor-core/ttf/util/contours2svg');
|
||||
var pathAdjust = require('fonteditor-core/graphics/pathAdjust');
|
||||
var pathCeil = require('fonteditor-core/graphics/pathCeil');
|
||||
var string = require('common/string');
|
||||
var lang = require('common/lang');
|
||||
var SVG_GLYF_TPL = ''
|
||||
+ '<?xml version="1.0" encoding="utf-8"?>'
|
||||
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"'
|
||||
+ ' "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'
|
||||
+ '<svg id="${name}" width="${size}" height="${size}"'
|
||||
+ ' style="width:${size}px;height:${size}px;" version="1.1"'
|
||||
+ ' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${unitsPerEm} ${unitsPerEm}"'
|
||||
+ ' enable-background="new 0 0 ${unitsPerEm} ${unitsPerEm}" xml:space="preserve">'
|
||||
+ '<path fill="${fillColor}" ${d}/>'
|
||||
+ '</svg>';
|
||||
|
||||
/**
|
||||
* 获取glyf渲染列表项目
|
||||
*
|
||||
* @param {Object} glyf glyf结构
|
||||
* @param {Object} opt 渲染参数
|
||||
* @return {string} glyf列表项目片段
|
||||
*/
|
||||
function glyf2svgfile(glyf, opt) {
|
||||
var g = {
|
||||
size: opt.size,
|
||||
unitsPerEm: opt.unitsPerEm,
|
||||
name: glyf.name,
|
||||
fillColor: opt.fillColor || '#000'
|
||||
};
|
||||
|
||||
var d = '';
|
||||
if (glyf.contours && glyf.contours.length) {
|
||||
var contours = lang.clone(glyf.contours);
|
||||
var bound = computeBoundingBox.computePath.apply(null, contours);
|
||||
var scale = opt.unitsPerEm / Math.max(bound.width, bound.height);
|
||||
contours.forEach(function (contour) {
|
||||
pathAdjust(contour, 1, 1, -bound.x, -bound.y - bound.height / 2);
|
||||
pathAdjust(contour, 1, -1, 0, 0);
|
||||
pathAdjust(contour, scale, scale, 0, bound.height / 2);
|
||||
pathCeil(contour, 2);
|
||||
});
|
||||
g.d = 'd="' + contours2svg(contours) + '"';
|
||||
}
|
||||
|
||||
return string.format(SVG_GLYF_TPL, g);
|
||||
}
|
||||
|
||||
return glyf2svgfile;
|
||||
});
|
||||
Reference in New Issue
Block a user