-
Notifications
You must be signed in to change notification settings - Fork 0
/
avatar.html
73 lines (70 loc) · 3.69 KB
/
avatar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script>
$(".aside .nav li").removeClass("active");
$(".anonym, .anonym_avatar").addClass("active");
$(".wrapper").addClass("map");
Vue.config.delimiters = ['${', '}']
</script>
<script type="text/javascript" src="static/js/photoEditor/editor.js"></script>
<div class="content-heading">
Avatar
</div>
<ol class="breadcrumb">
<li><a href="#" onclick="dl_navigate0('dashboardAnonym')">Dashboard</a></li>
<li class="active">Avatar</li>
</ol>
<section id="photoEditor" class="avatar">
<div class="avatar_container">
<header class="header"><span class="title">Photo Editor</span>
<button-box></button-box>
</header>
<main class="main">
<upload-box></upload-box>
<canvas-box></canvas-box>
</main>
<script id="button-box" type="text/x-template">
<div @click="click" class="menu">
<label for="file" title="Upload" v-show="!uploaded" class="menu__button"><span class="fa fa-upload"></span></label>
<button data-action="restore" title="Undo (Ctrl + Z)" v-show="cropped" class="menu__button"><span class="fa fa-undo"></span></button>
<button data-action="remove" title="Delete (Delete)" v-show="uploaded && !cropping" class="menu__button menu__button--danger"><span class="fa fa-trash"></span></button>
<button data-action="clear" title="Cancel (Esc)" v-show="cropping" class="menu__button menu__button--danger"><span class="fa fa-ban"></span></button>
<button data-action="crop" title="OK (Enter)" v-show="cropping" class="menu__button menu__button--success"><span class="fa fa-check"></span></button>
<a data-action="download" href="${ url }" title="Download" download="${ name }" v-show="url" class="menu__button menu__button--success"><span class="fa fa-download"></span></a>
</div>
</script>
<script id="upload-box" type="text/x-template">
<div @change="change" @dragover="dragover" @drop="drop" v-show="!uploaded" class="upload">
<p>Drop image here or
<label class="browse">browse...
<input id="file" type="file" accept="image/*" class="sr-only">
</label>
</p>
</div>
</script>
<script id="canvas-box" type="text/x-template">
<div v-show="editable" class="canvas">
<div @dblclick="dblclick" class="editor">
<template v-if="url"><img src="${ url }" alt="${ name }" @load="load"></template>
</div>
<div @click="click" v-show="cropper" class="toolbar">
<button data-action="move" title="Move (M)" class="toolbar__button"><span class="fa fa-arrows"></span></button>
<button data-action="crop" title="Crop (C)" class="toolbar__button"><span class="fa fa-crop"></span></button>
<button data-action="zoom-in" title="Zoom In (I)" class="toolbar__button"><span class="fa fa-search-plus"></span></button>
<button data-action="zoom-out" title="Zoom Out (O)" class="toolbar__button"><span class="fa fa-search-minus"></span></button>
<button data-action="rotate-left" title="Rotate Left (L)" class="toolbar__button"><span class="fa fa-rotate-left"></span></button>
<button data-action="rotate-right" title="Rotate Right (R)" class="toolbar__button"><span class="fa fa-rotate-right"></span></button>
<button data-action="flip-horizontal" title="Flip Horizontal (H)" class="toolbar__button"><span class="fa fa-arrows-h"></span></button>
<button data-action="flip-vertical" title="Flip Vertical (V)" class="toolbar__button"><span class="fa fa-arrows-v"></span></button>
</div>
</div>
</script>
</div>
</section>
<div class="clearfix" style="padding-top:20px;">
<div class="pull-left">
<button class="btn btn-primary" type="button">1</button>
<button class="btn btn-primary" type="button">2</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>