mitri4
/
dokumentor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add operate image buttons

Browse Source
prod
Dmitriy Shesterkin 9 years ago
parent d78e17fd9e
commit dc6f4b0140
7 changed files with 162 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/dokumentor/static/css/style.css
  2. 46
      src/dokumentor/static/img/rotate-left-black.svg
  3. 16
      src/dokumentor/static/img/rotate-left.svg
  4. 46
      src/dokumentor/static/img/rotate-right-black.svg
  5. 13
      src/dokumentor/static/img/rotate-right.svg
  6. 33
      src/dokumentor/static/js/profile/asset.js
  7. 10
      src/dokumentor/templates/customer/profile/edit.html

12
src/dokumentor/static/css/style.css
Unescape View File

@ -1002,3 +1002,15 @@ input[type=number] {
font-size: 1em;
}
.modal-upload__btn--image {
width: 13px;
}
.modal-upload__bottom--operation-image,
.modal-upload__bottom--operation-modal {
display: inline-block;
}
.modal-upload__bottom--operation-modal {
padding-left: 110px;
}

46
src/dokumentor/static/img/rotate-left-black.svg
Unescape View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<g>
<g>
<polygon points="42.667,358.507 42.667,273.173 0,273.173 0,401.173 426.667,401.173 426.667,358.507 "/>
</g>
</g>
<g>
<g>
<path d="M170.667,102.507h-97.28l25.6-8.96l39.893-39.893l-27.947-28.16L12.587,123.84l98.347,98.56l27.733-28.16l-40.32-40.32
l-25.173-8.747h97.493c70.692,0,128,57.308,128,128v42.667h42.667v-42.667C341.333,178.917,264.923,102.507,170.667,102.507z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 958 B

16
src/dokumentor/static/img/rotate-left.svg
Unescape View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="427px" height="377px" viewBox="0 0 427 377" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>Untitled</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="rotate-left">
<polygon id="Shape" fill="#4E5661" points="42.667 333.507 42.667 248.173 0 248.173 0 376.173 426.667 376.173 426.667 333.507"></polygon>
<text id="#4e5661" font-family="AvenirNextCyr-Light, Avenir Next Cyr" font-size="28" font-weight="300" fill="#FFFFFF">
<tspan x="158.252" y="199">#4e5661</tspan>
</text>
<path d="M170.667,77.507 L73.387,77.507 L98.987,68.547 L138.88,28.654 L110.933,0.494 L12.587,98.84 L110.934,197.4 L138.667,169.24 L98.347,128.92 L73.174,120.173 L170.667,120.173 C241.359,120.173 298.667,177.481 298.667,248.173 L298.667,290.84 L341.334,290.84 L341.334,248.173 C341.333,153.917 264.923,77.507 170.667,77.507 L170.667,77.507 Z" id="Shape" fill="#4E5661"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

46
src/dokumentor/static/img/rotate-right-black.svg
Unescape View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<g>
<g>
<polygon points="384,273.067 384,358.4 0,358.4 0,401.067 426.667,401.067 426.667,273.067 "/>
</g>
</g>
<g>
<g>
<path d="M315.947,25.6l-28.16,27.947l38.4,38.4l23.68,10.453H256c-94.257,0-170.667,76.41-170.667,170.667v42.667H128v-42.667
c0-70.692,57.308-128,128-128h92.16l-21.333,9.387L288,194.133l28.373,27.733l97.707-98.133L315.947,25.6z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

13
src/dokumentor/static/img/rotate-right.svg
Unescape View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="427px" height="377px" viewBox="0 0 427 377" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>Untitled</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="rotate-right" fill="#4E5661">
<polygon id="Shape" points="384 248.067 384 333.4 0 333.4 0 376.067 426.667 376.067 426.667 248.067"></polygon>
<path d="M315.947,0.6 L287.787,28.547 L326.187,66.947 L349.867,77.4 L256,77.4 C161.743,77.4 85.333,153.81 85.333,248.067 L85.333,290.734 L128,290.734 L128,248.067 C128,177.375 185.308,120.067 256,120.067 L348.16,120.067 L326.827,129.454 L288,169.133 L316.373,196.866 L414.08,98.733 L315.947,0.6 L315.947,0.6 Z" id="Shape"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 975 B

33
src/dokumentor/static/js/profile/asset.js
Unescape View File

@ -58,17 +58,18 @@ $(document).ready(function () {
function initCropper(width, height, type) {
$uploadCrop = $('#imageCropper').croppie({
enableExif: true,
enforceBoundary: false,
viewport: {
width: width,
height: height,
type: type
},
boundary: {
width: 300,
height: 300
}
enableExif: true,
enforceBoundary: false,
enableOrientation: true,
viewport: {
width: width,
height: height,
type: type
},
boundary: {
width: 300,
height: 300
}
});
}
@ -107,7 +108,15 @@ $(document).ready(function () {
});
});
$('#cropImageBtn').on('click', function (ev) {
$("#cropImageBtnLeft").on("click", function() {
$uploadCrop.croppie('rotate', -90);
});
$("#cropImageBtnRight").on("click", function() {
$uploadCrop.croppie('rotate', 90);
});
$('#cropImageBtnSave').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'png',

10
src/dokumentor/templates/customer/profile/edit.html
Unescape View File

@ -460,8 +460,14 @@
<div class="modal-upload__body--editor" id="imageCropper"></div>
</div>
<div class="modal-upload__bottom">
<button class="yellow-btn form__yellow-btn_save" id="cropImageBtn">Сохранить</button>
<button class="close-form modal-upload__cleaner-btn">Отмена</button>
<div class="modal-upload__bottom--operation-image">
<button class="yellow-btn form__yellow-btn_save" id="cropImageBtnLeft"><img class="modal-upload__btn--image" src="{% static 'img/rotate-left.svg' %}"></button>
<button class="yellow-btn form__yellow-btn_save" id="cropImageBtnRight"><img class="modal-upload__btn--image" src="{% static 'img/rotate-right.svg' %}"></button>
</div>
<div class="modal-upload__bottom--operation-modal">
<button class="yellow-btn form__yellow-btn_save" id="cropImageBtnSave">Сохранить</button>
<button class="close-form modal-upload__cleaner-btn">Отмена</button>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save