mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-07-30 21:40:43 +02:00
Code Issues Releases Wiki Activity

[ticket/15769] Crop avatars on upload

Browse Source 
PHPBB3-15769
This commit is contained in:
mrgoldy
2020-05-10 00:30:30 +02:00
committed by Marc Alexander
parent eb1edd12a1
commit 4d860bf967
17 changed files with 4693 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
phpBB/styles/prosilver/template/ucp_avatar_options.html
View File

@@ -8,7 +8,7 @@
<!-- IF ERROR --><p class="error">{ERROR}</p><!-- ENDIF -->
<dl>
<dt><label>{L_CURRENT_IMAGE}{L_COLON}</label><br /><span>{L_AVATAR_EXPLAIN}</span></dt>
<dd><!-- IF AVATAR -->{AVATAR_HTML}<!-- ELSE --><img src="{{ NO_AVATAR_SOURCE }}" alt="" /><!-- ENDIF --></dd>
<dd id="avatar-box"><!-- IF AVATAR -->{AVATAR_HTML}<!-- ELSE --><img src="{{ NO_AVATAR_SOURCE }}" alt="" /><!-- ENDIF --></dd>
<dd><label for="avatar_delete"><input type="checkbox" name="avatar_delete" id="avatar_delete" /> {L_DELETE_AVATAR}</label></dd>
</dl>
</fieldset>

67
phpBB/styles/prosilver/template/ucp_avatar_options_upload.html
View File

@@ -2,3 +2,70 @@
<dt><label for="avatar_upload_file">{L_UPLOAD_AVATAR_FILE}{L_COLON}</label></dt>
<dd><input type="hidden" name="MAX_FILE_SIZE" value="{AVATAR_UPLOAD_SIZE}" /><input type="file" name="avatar_upload_file" id="avatar_upload_file" class="inputbox autowidth" accept="{{ AVATAR_ALLOWED_EXTENSIONS }}" /></dd>
</dl>
{% if S_CROPPING_AVAILABLE %}
{% INCLUDECSS T_ASSETS_PATH ~ '/css/cropper.min.css' %}
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/cropper.min.js' %}
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/jquery-cropper.js' %}
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/phpbb-avatars.js' %}
<input type="hidden" id="avatar-cropper-data" name="avatar_cropper_data" value=""
data-min-width="{{ AVATAR_MIN_WIDTH }}" data-max-width="{{ AVATAR_MAX_WIDTH }}"
data-min-height="{{ AVATAR_MIN_HEIGHT }}" data-max-height="{{ AVATAR_MAX_HEIGHT }}"
/>
{% apply spaceless %}
<div class="avatar-cropper-buttons" id="avatar-cropper-buttons">
<div class="button-group">
<button class="button" type="button" title="{{ lang('ZOOM_IN') }}" data-cropper-action="zoom,0.1">
<i class="icon fa-search-plus fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('ZOOM_OUT') }}" data-cropper-action="zoom,-0.1">
<i class="icon fa-search-minus fa-fw"></i>
</button>
</div>
<div class="button-group">
<button class="button" type="button" title="{{ lang('MOVE_LEFT') }}" data-cropper-action="move,-10,0">
<i class="icon fa-arrow-left fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('MOVE_RIGHT') }}" data-cropper-action="move,10,0">
<i class="icon fa-arrow-right fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('MOVE_UP') }}" data-cropper-action="move,0,-10">
<i class="icon fa-arrow-up fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('MOVE_DOWN') }}" data-cropper-action="move,0,10">
<i class="icon fa-arrow-down fa-fw"></i>
</button>
</div>
<div class="button-group">
<button class="button" type="button" title="{{ lang('ROTATE_LEFT') }}" data-cropper-action="rotate,-90">
<i class="icon fa-rotate-left fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('ROTATE_RIGHT') }}" data-cropper-action="rotate,90">
<i class="icon fa-rotate-right fa-fw"></i>
</button>
</div>
<div class="button-group">
<button class="button" type="button" title="{{ lang('FLIP_HORIZONTALLY') }}" data-cropper-action="scaleX">
<i class="icon fa-arrows-h fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('FLIP_VERTICALLY') }}" data-cropper-action="scaleY">
<i class="icon fa-arrows-v fa-fw"></i>
</button>
</div>
<div class="button-group">
<button class="button" type="button" title="{{ lang('RESET') }}" data-cropper-action="reset">
<i class="icon fa-refresh fa-fw"></i>
</button>
<button class="button" type="button" title="{{ lang('CLEAR') }}" data-cropper-action="clear">
<i class="icon fa-times fa-fw"></i>
</button>
</div>
</div>
{% endapply %}
{% endif %}

33
phpBB/styles/prosilver/theme/buttons.css
View File

@@ -42,6 +42,29 @@
vertical-align: top;
}
/** Button groups */
.button-group {
display: inline-block;
}
.button-group + .button-group {
margin-left: 8px;
}
.button-group > .button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-group > .button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.button-group > .button:not(:first-child):not(:last-child) {
border-radius: 0;
}
/* Posting page styles
---------------------------------------- */
.button-form,
@@ -173,3 +196,13 @@ button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* UCP: Avatar cropper */
.avatar-cropper-buttons {
text-align: center;
display: none;
}
.avatar-cropper-buttons > .button-group {
margin: 4px;
}