Commit 0623dfd44954fececcff7762b5e50ea88ea3b156

Authored by OpenWapp Developer

Merge branch 'profile-group-pictures' of /home/git/repositories/openwapp/openwapp

Showing 7 changed files

app/scripts/localisations/translation.js View file @ 0623dfd
... ... @@ -182,7 +182,11 @@
182 182 ' El límite es 50. Por favor, abandona uno antes de crear otro',
183 183 accountExpired: 'Su cuenta ha caducado. ¿Desea actualizar su cuenta?',
184 184 accountExpiration: 'Fecha de expiración',
185   - upgradeNow: 'Actualizar ahora'
  185 + upgradeNow: 'Actualizar ahora',
  186 + notSquarePicture: 'La imagen seleccionada no es cuadrada. Esto hará que' +
  187 + ' aparezcan bandas de relleno alrededor. Si quieres arreglarlo, ' +
  188 + 'abre la aplicación de Galería y edita y recorta la imagen para que ' +
  189 + 'tenga un aspecto 1:1'
186 190 },
187 191 'en-US': {
188 192 all: 'All',
... ... @@ -368,7 +372,10 @@
368 372 accountExpired: 'Your account has expired. Do you want to upgrade ' +
369 373 'your account now?',
370 374 accountExpiration: 'Expiration date',
371   - upgradeNow: 'Upgrade now'
  375 + upgradeNow: 'Upgrade now',
  376 + notSquarePicture: 'The selected image is not square. This will make to ' +
  377 + 'appear padding bands around. If you want to fix it, go to the ' +
  378 + 'Gallery, and edit and crop the photo, using a 1:1 aspect ratio.'
372 379 },
373 380 pt : {
374 381 all: 'Tudo',
... ... @@ -551,7 +558,11 @@
551 558 accountExpired: 'Sua conta expirou. Você quer atualizar a sua conta ' +
552 559 'agora?',
553 560 accountExpiration: 'Data de validade',
554   - upgradeNow: 'Actualizar agora'
  561 + upgradeNow: 'Actualizar agora',
  562 + notSquarePicture: 'A imagem selecionada não é quadrado. Isso fará com ' +
  563 + 'que apareçam faixas ao redor. Se você quiser corrigi-lo, ' +
  564 + 'vá até a Galeria e editar e cortar a foto, usando uma relação de ' +
  565 + 'aspecto de 1:1.'
555 566 },
556 567 'pt-BR' : {
557 568 all: 'Tudo',
... ... @@ -735,7 +746,11 @@
735 746 accountExpired: 'Sua conta expirou. Você quer atualizar a sua conta ' +
736 747 'agora?',
737 748 accountExpiration: 'Data de validade',
738   - upgradeNow: 'Actualizar agora'
  749 + upgradeNow: 'Actualizar agora',
  750 + notSquarePicture: 'A imagem selecionada não é quadrado. Isso fará com ' +
  751 + 'que apareçam faixas ao redor. Se você quiser corrigi-lo, ' +
  752 + 'vá até a Galeria e editar e cortar a foto, usando uma relação de ' +
  753 + 'aspecto de 1:1.'
739 754 }
740 755 };
741 756 });
app/scripts/templates/group-profile.hbs View file @ 0623dfd
... ... @@ -22,6 +22,7 @@
22 22 <img id="profile-picture" type="text" src="/images/unknown_avatar.png"
23 23 alt="{{translate 'groupPictureDescription'}}"/>
24 24 </p>
  25 + <p class="not-square hidden">{{translate 'notSquarePicture'}}</p>
25 26 <p>{{translate 'groupPictureDescription'}}</p>
26 27 <p>
27 28 <input type="text" max="{{maxSubjectLength}}"
app/scripts/templates/profile.hbs View file @ 0623dfd
... ... @@ -24,6 +24,7 @@
24 24 <img id="profile-picture" type="text" src="/images/unknown_avatar.png"
25 25 alt="Avatar"/>
26 26 </p>
  27 + <p class="not-square hidden">{{translate 'notSquarePicture'}}</p>
27 28 <p>{{translate 'pictureDescription'}}</p>
28 29 <p>
29 30 <input type="text"
app/scripts/utils/thumbnail.js View file @ 0623dfd
... ... @@ -10,6 +10,8 @@
10 10 generate: function (imageBlob, callback, options) {
11 11 options = options || {};
12 12 var maxSize = this.maxSize || DEFAULT_MAX_SIZE;
  13 + var quality = options.quality || 0.8;
  14 + var forceSquare = options.forceSquare || false;
13 15  
14 16 var fileReader = new FileReader();
15 17 fileReader.readAsDataURL(imageBlob);
16 18  
17 19  
18 20  
19 21  
... ... @@ -22,18 +24,32 @@
22 24 height = img.height;
23 25  
24 26 var scale = Math.min(maxSize / Math.max(height, width), 1);
  27 + var ratio = width / height;
25 28  
26 29 var c = document.createElement('canvas');
27   - c.width = width * scale;
28   - c.height = height * scale;
  30 + var newWidth = width * scale;
  31 + var newHeight = height * scale;
  32 + if (forceSquare) {
  33 + c.width = Math.max(newWidth, newHeight);
  34 + c.height = c.width;
  35 + }
  36 + else {
  37 + c.width = newWidth;
  38 + c.height = newHeight;
  39 + }
29 40  
30 41 var ctx = c.getContext('2d');
31   - ctx.drawImage(img, 0, 0, width * scale, height * scale);
  42 + var offsetX = (c.width - newWidth) / 2;
  43 + var offsetY = (c.height - newHeight) / 2;
  44 + ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
32 45  
33 46 if (options.asBlob) {
34   - c.toBlob(callback.bind(null, null), 'image/jpeg');
  47 + c.toBlob(function (blob) {
  48 + callback(null, blob, ratio);
  49 + }, 'image/jpeg', quality);
35 50 } else {
36   - callback(null, c.toDataURL('image/jpeg').split('base64,')[1]);
  51 + callback(
  52 + null, c.toDataURL('image/jpeg').split('base64,')[1], ratio);
37 53 }
38 54 };
39 55  
app/scripts/views/group-profile.js View file @ 0623dfd
... ... @@ -31,7 +31,7 @@
31 31  
32 32 PICTURE_MAX_SIZE: 640,
33 33  
34   - THUMB_MAX_SIZE: 180,
  34 + THUMB_MAX_SIZE: 96,
35 35  
36 36 initialize: function () {
37 37 this.picture = this.model.get('photo');
38 38  
39 39  
... ... @@ -226,12 +226,14 @@
226 226 });
227 227  
228 228 var _this = this;
  229 + var quality = global.client.getProperty('image_quality');
229 230 requestPicture.onsuccess = function () {
230 231 var picture = requestPicture.result.blob;
231 232 _this.isGroupPictureDirty = true;
232 233 Thumbnail.setMaxSize(_this.PICTURE_MAX_SIZE);
233   - Thumbnail.generate(picture, function (err, picture) {
  234 + Thumbnail.generate(picture, function (err, picture, ratio) {
234 235 if (err) { return; }
  236 + if (ratio !== 1) { _this._showNotSquareWarning(); }
235 237 _this.picture = picture;
236 238 _this._replacePhoto(picture);
237 239  
238 240  
... ... @@ -240,13 +242,17 @@
240 242 Thumbnail.generate(picture, function (err, thumb) {
241 243 if (err) { return; }
242 244 _this.thumb = thumb;
243   - }, { asBlob: true });
244   - }, { asBlob: true });
  245 + }, { asBlob: true, quality: quality / 2, forceSquare: true });
  246 + }, { asBlob: true, quality: quality, forceSquare: true });
245 247 };
246 248  
247 249 requestPicture.onerror = function () {
248 250 console.error('Impossible to get profile\'s picture.');
249 251 };
  252 + },
  253 +
  254 + _showNotSquareWarning: function () {
  255 + this.$el.find('.not-square').get(0).classList.remove('hidden');
250 256 },
251 257  
252 258 showParticipants: function () {
app/scripts/views/profile.js View file @ 0623dfd
... ... @@ -22,7 +22,7 @@
22 22  
23 23 PICTURE_MAX_SIZE: 640,
24 24  
25   - THUMB_MAX_SIZE: 180,
  25 + THUMB_MAX_SIZE: 96,
26 26  
27 27 initialize: function () {
28 28 this.picture = this.model.get('photo');
... ... @@ -90,6 +90,10 @@
90 90 });
91 91 },
92 92  
  93 + _showNotSquareWarning: function () {
  94 + this.$el.find('.not-square').get(0).classList.remove('hidden');
  95 + },
  96 +
93 97 updateProfileData: function (evt) {
94 98 evt.preventDefault();
95 99  
96 100  
... ... @@ -113,8 +117,9 @@
113 117 var _this = this;
114 118 requestPicture.onsuccess = function () {
115 119 var picture = requestPicture.result.blob;
116   - _this.generatePicture(picture, function (err, resizedPic) {
  120 + _this.generatePicture(picture, function (err, resizedPic, ratio) {
117 121 if (err) { return; }
  122 + if (ratio !== 1) { _this._showNotSquareWarning(); }
118 123 _this.picture = resizedPic;
119 124 _this._replacePhoto(resizedPic);
120 125 });
121 126  
122 127  
123 128  
... ... @@ -131,13 +136,21 @@
131 136 },
132 137  
133 138 generatePicture: function (picture, callback) {
  139 + var quality = global.client.getProperty('image_quality');
134 140 Thumbnail.setMaxSize(this.PICTURE_MAX_SIZE);
135   - Thumbnail.generate(picture, callback, { asBlob: true });
  141 + Thumbnail.generate(
  142 + picture, callback,
  143 + { asBlob: true, quality: quality, forceSquare: true }
  144 + );
136 145 },
137 146  
138 147 generateThumbnail: function (picture, callback) {
  148 + var quality = global.client.getProperty('image_quality');
139 149 Thumbnail.setMaxSize(this.THUMB_MAX_SIZE);
140   - Thumbnail.generate(picture, callback, { asBlob: true });
  150 + Thumbnail.generate(
  151 + picture, callback,
  152 + { asBlob: true, quality: quality / 2, forceSquare: true }
  153 + );
141 154 },
142 155  
143 156 showSelect: function () {
app/styles/_common.sass View file @ 0623dfd
... ... @@ -158,4 +158,7 @@
158 158 overflow-y: auto
159 159 height: -moz-calc(100% - #{$header-height})
160 160 height: -webkit-calc(100% - #{$header-height})
  161 +
  162 +.not-square
  163 + color: #FF3939