diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 11138afe43..0000000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "public/assets/javascript/cropperjs"] - path = public/assets/javascript/cropperjs - url = https://github.com/fengyuanchen/cropperjs.git diff --git a/public/assets/css/cropperjs/cropper.css b/public/assets/css/cropperjs/cropper.css new file mode 100644 index 0000000000..cc32e6ac05 --- /dev/null +++ b/public/assets/css/cropperjs/cropper.css @@ -0,0 +1,304 @@ +/*! + * Cropper.js v1.5.11 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2021-02-17T11:53:21.992Z + */ + +.cropper-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cropper-container img { + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; +} + +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.cropper-wrap-box, +.cropper-canvas { + overflow: hidden; +} + +.cropper-drag-box { + background-color: #fff; + opacity: 0; +} + +.cropper-modal { + background-color: #000; + opacity: 0.5; +} + +.cropper-view-box { + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; +} + +.cropper-dashed { + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; +} + +.cropper-dashed.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; +} + +.cropper-dashed.dashed-v { + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); +} + +.cropper-center { + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; +} + +.cropper-center::before, +.cropper-center::after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; +} + +.cropper-center::before { + height: 1px; + left: -3px; + top: 0; + width: 7px; +} + +.cropper-center::after { + height: 7px; + left: 0; + top: -3px; + width: 1px; +} + +.cropper-face, +.cropper-line, +.cropper-point { + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; +} + +.cropper-face { + background-color: #fff; + left: 0; + top: 0; +} + +.cropper-line { + background-color: #39f; +} + +.cropper-line.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; +} + +.cropper-line.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; +} + +.cropper-point { + background-color: #39f; + height: 5px; + opacity: 0.75; + width: 5px; +} + +.cropper-point.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; +} + +.cropper-point.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; +} + +.cropper-point.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; +} + +.cropper-point.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; +} + +.cropper-point.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; +} + +.cropper-point.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; +} + +.cropper-point.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; +} + +.cropper-point.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; +} + +@media (min-width: 768px) { + .cropper-point.point-se { + height: 15px; + width: 15px; + } +} + +@media (min-width: 992px) { + .cropper-point.point-se { + height: 10px; + width: 10px; + } +} + +@media (min-width: 1200px) { + .cropper-point.point-se { + height: 5px; + opacity: 0.75; + width: 5px; + } +} + +.cropper-point.point-se::before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; +} + +.cropper-invisible { + opacity: 0; +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + display: block; + height: 0; + position: absolute; + width: 0; +} + +.cropper-hidden { + display: none !important; +} + +.cropper-move { + cursor: move; +} + +.cropper-crop { + cursor: crosshair; +} + +.cropper-disabled .cropper-drag-box, +.cropper-disabled .cropper-face, +.cropper-disabled .cropper-line, +.cropper-disabled .cropper-point { + cursor: not-allowed; +} diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 9d9b6bc8e1..f9b59301d5 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -81,7 +81,7 @@ .icon-avatar { order: 1; height: calc(5 * var(--unit-size)); - calc(5 * var(--unit-size)); + width: calc(5 * var(--unit-size)); margin-right: var(--small-size); } diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css index 7a6b30d1a4..093720b637 100644 --- a/public/assets/css/left/left_mid.css +++ b/public/assets/css/left/left_mid.css @@ -88,7 +88,7 @@ input.larger { .icon-avatar { order: 1; height: calc(5 * var(--unit-size)); -calc(5 * var(--unit-size)); + width: calc(5 * var(--unit-size)); margin-right: var(--small-size); } diff --git a/public/assets/css/left/left_small.css b/public/assets/css/left/left_small.css index 99e27096aa..d66c05ee60 100644 --- a/public/assets/css/left/left_small.css +++ b/public/assets/css/left/left_small.css @@ -88,7 +88,7 @@ input.larger { .icon-avatar { order: 1; height: calc(5 * var(--unit-size)); -calc(5 * var(--unit-size)); + width: calc(5 * var(--unit-size)); margin-right: var(--small-size); } diff --git a/public/assets/javascript/cropping.js b/public/assets/javascript/cropping.js index ddff3d892c..bdc1aa68b8 100644 --- a/public/assets/javascript/cropping.js +++ b/public/assets/javascript/cropping.js @@ -1,37 +1,19 @@ -function getRoundedCanvas(sourceCanvas) { - var canvas = document.createElement('canvas'); - var context = canvas.getContext('2d'); - var width = sourceCanvas.width; - var height = sourceCanvas.height; - - canvas.width = width; - canvas.height = height; - context.imageSmoothingEnabled = true; - context.drawImage(sourceCanvas, 0, 0, width, height); - context.globalCompositeOperation = 'destination-in'; - context.beginPath(); - context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true); - context.fill(); - return canvas; -} - -var input = document.getElementById('form_avatar') -var container = document.getElementById('img-container') -var cropImage = document.getElementById('img-cropped') -var cropped = document.getElementById('form_hidden') +var input = document.getElementById('save_avatar'); +var container = document.getElementById('img-container'); +var cropImage = document.getElementById('img-cropped'); +var cropped = document.getElementById('save_hidden'); input.addEventListener('change', function (e) { if (!input.files || !input.files[0]) return; var reader = new FileReader() reader.onload = function (e) { - container.style = 'display: block' - cropImage.setAttribute('src', e.target.result) + container.style = 'display: block'; + cropImage.setAttribute('src', e.target.result); function update() { - var croppedCanvas = cropper.getCroppedCanvas() - var roundedCanvas = getRoundedCanvas(croppedCanvas) - cropped.value = roundedCanvas.toDataURL() - input.files = undefined + var croppedCanvas = cropper.getCroppedCanvas(); + cropped.value = croppedCanvas.toDataURL(); + input.files = undefined; } var cropper = new Cropper(cropImage, { aspectRatio: 1, @@ -40,6 +22,5 @@ input.addEventListener('change', function (e) { ready: update, }) } - reader.readAsDataURL(input.files[0]) -}) - + reader.readAsDataURL(input.files[0]); +}); diff --git a/src/Entity/Avatar.php b/src/Entity/Avatar.php index a7deebb1cb..641db91516 100644 --- a/src/Entity/Avatar.php +++ b/src/Entity/Avatar.php @@ -144,7 +144,7 @@ class Avatar extends Entity 'name' => 'avatar', 'fields' => [ 'gsactor_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'GSActor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to gsactor table'], - 'attachment_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'File.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to file table'], + 'attachment_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'Attachment.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to attachment table'], 'created' => ['type' => 'datetime', 'not null' => true, 'description' => 'date this record was created', 'default' => 'CURRENT_TIMESTAMP'], 'modified' => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'], ], diff --git a/templates/settings/avatar.html.twig b/templates/settings/avatar.html.twig index 9c0a250764..b1290db77b 100644 --- a/templates/settings/avatar.html.twig +++ b/templates/settings/avatar.html.twig @@ -4,8 +4,8 @@ {% block stylesheets %} {{ parent() }} - - + + {% endblock %} {% block body %}