Skip to content

fix: basic details image display enhancement #5109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 24, 2020
Merged

fix: basic details image display enhancement #5109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b30e070
basic details image display enhancement
maze-runnar Sep 21, 2020
3c2c145
make text as prop
maze-runnar Sep 21, 2020
1a832f3
just for now..
maze-runnar Sep 21, 2020
0428e1c
image upload fix
maze-runnar Sep 22, 2020
3eb945f
working,,
maze-runnar Sep 22, 2020
85b8e76
chaning to 250px to similar view as event page(...)
maze-runnar Sep 22, 2020
fce4b7c
making as required
maze-runnar Sep 23, 2020
6b2a0d3
Merge branch 'development' into image
iamareebjamal Sep 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions app/templates/components/forms/wizard/basic-details-step.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,27 +120,30 @@
</div>

<div class="fields">
<div class="ten wide field">
<Widgets::Forms::ImageUpload
@imageUrl={{this.data.event.logoUrl}}
@label={{t "Logo"}}
@id="event_logo"
@icon="image"
@hint={{t "Select Logo"}}
@maxSizeInKb={{1000}} />
</div>
<div class="ten wide field">
<div class="fifteen wide field">
<Widgets::Forms::ImageUpload
@imageUrl={{this.data.event.originalImageUrl}}
@needsCropper={{true}}
@label={{t "Event Image"}}
@id="event_image"
@icon="camera"
@hint={{t "Select Event Image"}}
@hint={{t "Select Event Header Image"}}
@imageText={{t "Header Image"}}
@isHeaderImage={{true}}
@maxSizeInKb={{10000}}
@helpText={{t "We recommend using at least a 2160x1080px (2:1 ratio) image"}}
@requiresDivider={{true}} />
</div>
<div class="five wide field">
<Widgets::Forms::ImageUpload
@imageUrl={{this.data.event.logoUrl}}
@label={{t "Logo"}}
@id="event_logo"
@icon="image"
@hint={{t "Select Logo"}}
@imageText={{t "Logo"}}
@maxSizeInKb={{1000}} />
</div>
</div>

<div class="ui section divider"></div>
Expand Down
64 changes: 47 additions & 17 deletions app/templates/components/widgets/forms/image-upload.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,59 @@
{{#if (and this.requiresDivider this.device.isMobile)}}
<div class="ui hidden divider"></div>
{{/if}}
<div class="ui card">
{{#if this.uploadingImage}}
<div class="ui active dimmer">
<div class="ui text loader">{{t 'Image Uploading'}}</div>
{{#if this.isHeaderImage}}
<div class="ui centered card" style="width:100%;height: auto;overflow: hidden;">
{{#if this.uploadingImage}}
<div class="ui active dimmer">
<div class="ui text loader">{{t 'Image Uploading'}}</div>
</div>
{{/if}}
<div class="image" style="width:100%;height: 250px;overflow: hidden;">
<img src={{this.selectedImage}} alt="Selected image">
</div>
{{#if this.allowReCrop}}
<div class="ui bottom attached mini buttons">
<button type="button" class="ui teal button" {{action 'reCrop'}}>
<i class="crop icon"></i>
{{t 'Re-crop'}}
</button>
</div>
{{/if}}
<div class="ui bottom attached mini buttons">
<button type="button" class="ui red button" {{action 'removeSelection'}}>
<i class="trash icon"></i>
{{if this.needsConfirmation 'Delete' 'Confirm Delete'}}
</button>
</div>
{{/if}}
<div class="image">
<img src="{{this.selectedImage}}" alt="Selected image">
</div>
{{#if this.allowReCrop}}
{{else}}
<div class="ui centered card">
{{#if this.uploadingImage}}
<div class="ui active dimmer">
<div class="ui text loader">{{t 'Image Uploading'}}</div>
</div>
{{/if}}
<div class="image">
<img src={{this.selectedImage}} alt="Selected image">
</div>
{{#if this.allowReCrop}}
<div class="ui bottom attached mini buttons">
<button type="button" class="ui teal button" {{action 'reCrop'}}>
<i class="crop icon"></i>
{{t 'Re-crop'}}
</button>
</div>
{{/if}}
<div class="ui bottom attached mini buttons">
<button type="button" class="ui teal button" {{action 'reCrop'}}>
<i class="crop icon"></i>
{{t 'Re-crop'}}
<button type="button" class="ui red button" {{action 'removeSelection'}}>
<i class="trash icon"></i>
{{if this.needsConfirmation 'Delete' 'Confirm Delete'}}
</button>
</div>
{{/if}}
<div class="ui bottom attached mini buttons">
<button type="button" class="ui red button" {{action 'removeSelection'}}>
<i class="trash icon"></i>
{{if this.needsConfirmation 'Delete' 'Confirm Delete'}}
</button>
</div>
{{/if}}
<div class="ui center aligned text mb-8" style="margin-top:-5px">
<span>{{this.imageText}}</span>
</div>
{{else}}
<Input
Expand Down