openwapp

Download as
Browse Code ยป

Commit 1cb6aa15a5267f740081e850fb656c46dcac215c

Authored by OpenWapp Developer
1 parent 432901bf1c

Allowing multiline messages and visual refresh

Showing 14 changed files with 72 additions and 55 deletions

app/images/send.png View file @ 1cb6aa1

3.2 KB
app/images/send2x.png View file @ 1cb6aa1

3.8 KB
app/images/shared/headers/images/icons/attachments.png View file @ 1cb6aa1

377 Bytes
app/images/shared/headers/images/icons/attachments2x.png View file @ 1cb6aa1

744 Bytes
app/images/shared/headers/images/icons/location.png View file @ 1cb6aa1

640 Bytes
app/images/shared/headers/images/icons/location2x.png View file @ 1cb6aa1

1.13 KB
app/scripts/templates/compose-message.hbs View file @ 1cb6aa1
1 1 <footer>
2 2 <form id="conversation-compose">
3 3 {{! buttons have a type=submit by default }}
4   - <button type="button" class="back">Back</button>
5   - <input type="text" id="message-text-input">
6 4 <button id="insert-emoji" type="button">Emoji</button>
7   - <input type="submit" value="{{translate 'sendButton'}}"
8   - data-l10n-id="conversation-send-button">
  5 + <div contentEditable="true" id="message-text-input"></div>
  6 + <button id="conversation-send-button" type="button">Send</button>
9 7 </form>
10   - <nav><ul>
11   - <li><button class="text">Message</button></li>
12   - <li><button class="image">Image</button></li>
13   - <li><button class="location">Location</button></li>
14   - </ul></nav>
15 8 </footer>
app/scripts/templates/conversation.hbs View file @ 1cb6aa1
... ... @@ -240,6 +240,12 @@
240 240 <section id="conversation" role="region">
241 241 <header>
242 242 <a href="#inbox"><span class="icon icon-back">Back</span></a>
  243 + <menu type="toolbar">
  244 + <a class="multimedia" href="#"><span class="icon icon-attach">
  245 + compose image</span></a>
  246 + <a class="location" href="#"><span class="icon icon-location">
  247 + send location</span></a>
  248 + </menu>
243 249 <h1>
244 250 <a id="group-profile" href="#conversation/{{id}}/profile">{{title}}</a>
245 251 </h1>
app/scripts/templates/helpers.js View file @ 1cb6aa1
... ... @@ -107,6 +107,7 @@
107 107 _scheme: /(^|[^\/])(www\.[\S]+(\b|$))/gim,
108 108  
109 109 _expand: function (text) {
  110 + text = Handlebars.Utils.escapeExpression(text);
110 111 text = text.replace(
111 112 Helpers._protocol,
112 113 '<a href="$1" target="_blank">$1</a>'
app/scripts/views/compose-message.js View file @ 1cb6aa1
... ... @@ -14,7 +14,7 @@
14 14 model: Message,
15 15  
16 16 events: {
17   - 'submit form#conversation-compose' : '_createTextMessage',
  17 + 'click #conversation-send-button' : '_createTextMessage',
18 18 'click #insert-emoji': '_showEmojiList'
19 19 },
20 20  
... ... @@ -38,10 +38,17 @@
38 38 _createTextMessage: function (event) {
39 39 event.preventDefault();
40 40  
41   - var input = this.$el.find('#message-text-input');
42   - var text = input.val();
43   - text = text.replace(/^\s+/g, '').replace(/\s+$/g, '');
44   - if (text === '') { return; } // TODO: do proper validation
  41 + var input = this.$el.find('#message-text-input')[0];
  42 + var html = input.innerHTML;
  43 + html = html.trim();
  44 + if (html.length === 0) { return; }
  45 + var lines = html.split(/<br\/?>/g);
  46 + lines = lines.map(function _unscape(line) {
  47 + var d = document.createElement('div');
  48 + d.innerHTML = line;
  49 + return d.textContent;
  50 + });
  51 + var text = lines.join('\n');
45 52  
46 53 var newModel = new Message({
47 54 type: 'text',
... ... @@ -50,7 +57,7 @@
50 57 meta: {date: new Date()}
51 58 });
52 59  
53   - input.val('');
  60 + input.innerHTML = '';
54 61 this.trigger('compose:message:text', newModel);
55 62 },
56 63  
app/scripts/views/conversation.js View file @ 1cb6aa1
... ... @@ -34,11 +34,10 @@
34 34 contact: null,
35 35  
36 36 events: {
37   - 'click button.text': 'showComposeText',
38   - 'click button.location': 'showComposeLocation',
  37 + 'click a.location': 'showComposeLocation',
  38 + 'click a.multimedia': 'showComposeImage',
39 39 'click form#conversation-compose button.back': 'hideComposeText',
40 40 'keyup input#message-text-input': 'sendTypingActive',
41   - 'click button.image': 'showComposeImage',
42 41 'click li.location img': 'goToImageViewer',
43 42 'click header > a': 'goToInbox',
44 43 'click #emoji-list button': '_hideEmojiList',
45 44  
... ... @@ -277,17 +276,13 @@
277 276 this.$el.find('.is-online').addClass('hide');
278 277 },
279 278  
280   - showComposeText: function () {
281   - this.$footer.addClass('typing');
282   - this.$footer.find('input#message-text-input').focus();
283   - },
284   -
285 279 hideComposeText: function () {
286 280 this.$footer.removeClass('typing');
287 281 this.sendTypingIdle();
288 282 },
289 283  
290   - showComposeLocation: function () {
  284 + showComposeLocation: function (evt) {
  285 + if (evt) { evt.preventDefault(); }
291 286 global.router.navigate('conversation/' + this.model.get('id') +
292 287 '/sendlocation', {trigger: true});
293 288 },
... ... @@ -575,7 +570,8 @@
575 570 global.router.navigate(link, {trigger: true});
576 571 },
577 572  
578   - showComposeImage: function () {
  573 + showComposeImage: function (evt) {
  574 + if (evt) { evt.preventDefault(); }
579 575 global.router.navigate('conversation/' + this.model.get('id') +
580 576 '/sendimage', { trigger: true });
581 577 },
app/styles/_conversation.sass View file @ 1cb6aa1
... ... @@ -5,8 +5,6 @@
5 5 background: #ebebeb url(/images/divider_line2x.png) center top repeat-y
6 6 +background-size(1.2rem 1rem)
7 7 position: relative
8   - header menu
9   - visibility: hidden
10 8 &.group header menu
11 9 visibility: visible
12 10 &:not(.group) h2.participants
... ... @@ -38,7 +36,7 @@
38 36 #conversation > header h2.in-app-notification
39 37 background-color: rgba(0, 0, 0, 0.9)
40 38 color: #FFF
41   - text-overflow: ellipsis
  39 + text-overflow: ellipsis
42 40 white-space: nowrap
43 41 overflow: hidden
44 42  
... ... @@ -280,6 +278,10 @@
280 278 background-image: url(/images/btn_#{$image-name}_button_pressed2x.png)
281 279  
282 280 #conversation > footer
  281 + position: absolute
  282 + bottom: 0
  283 + left: 0
  284 + right: 0
283 285 +box-sizing(border-box)
284 286 padding: 0rem
285 287 nav
286 288  
... ... @@ -301,19 +303,31 @@
301 303 +conversation-button(pin)
302 304 form
303 305 +box-sizing(border-box)
304   - display: none
305   - height: $conversation-footer-height
306   - &.typing
307   - nav
308   - display: none
309   - form
310   - display: block
  306 + white-space: nowrap
  307 + #message-text-input
  308 + font: inherit
  309 + font-size: 1.7rem
  310 + border: none
  311 + border-bottom: 0.1rem solid #F97C17
  312 + border-radius: 0 0 0.5rem 0.5rem
  313 + background: transparent
  314 + width: calc(100% - 0.6rem * 4 - 3rem - 3rem)
  315 + max-height: 8rem
  316 + min-height: 2.2rem
  317 + overflow: auto
  318 + &:focus
  319 + outline: none
  320 + form > *
  321 + display: inline-block
  322 + vertical-align: middle
  323 + margin: 0 0.3rem
  324 + white-space: normal
311 325  
312 326 form#conversation-compose,
313 327 form#conversation-compose-image
314 328 +box-shadow(0 -0.2rem 0.1rem rgba(0, 0, 0, 0.15))
315 329 background: #ebebeb
316   - padding: 0.7rem
  330 + padding: 0.6rem 0.3rem
317 331 font-size: 0
318 332  
319 333 form#conversation-compose input[type=text],
320 334  
321 335  
... ... @@ -345,17 +359,22 @@
345 359 background: rgb(0, 173, 225) // TODO: to hex
346 360  
347 361 // TODO: refactor commom button code
348   -form#conversation-compose button.back
  362 +#conversation-send-button,
  363 +#insert-emoji
349 364 +appearance(none)
350 365 padding: 0
351 366 border: none
352   - background: url(/images/control_button.png) center center no-repeat
353   - +background-size(3rem 0.8rem)
354 367 text-indent: -999rem
355 368 width: 3rem
356 369 height: 100%
357 370 display: inline-block
358 371 margin-right: 0.7rem
359   - &:active
360   - background-image: url(/images/control_button_active.png)
  372 +
  373 +#insert-emoji
  374 + background: url(/images/emoji_button.png) center center no-repeat
  375 + +background-size(3rem 3rem)
  376 +
  377 +#conversation-send-button
  378 + background: url(/images/send.png) center center no-repeat
  379 + +background-size(3rem 3rem)
app/styles/_emoji.sass View file @ 1cb6aa1
... ... @@ -10,19 +10,4 @@
10 10 #emoji-list.hidden
11 11 opacity: 0
12 12 pointer-events: none
13   -
14   -// TODO: refactor commom button code with _conversation.sass
15   -#insert-emoji
16   - +appearance(none)
17   - padding: 0
18   - border: none
19   - background: url(/images/emoji_button.png) center center no-repeat
20   - +background-size(3rem 3rem)
21   - text-indent: -999rem
22   - width: 3rem
23   - height: 100%
24   - display: inline-block
25   - margin-right: 0.7rem
26   - &:active
27   - background-image: url(/images/emoji_button_active.png)
app/styles/shared/_overrides.scss View file @ 1cb6aa1
... ... @@ -11,6 +11,14 @@
11 11 background-color: rgba(255, 255, 255, 0.9);
12 12 }
13 13  
  14 +section[role="region"] > header:first-child .icon.icon-location {
  15 + background-image: url(/images/shared/headers/images/icons/location.png);
  16 +}
  17 +
  18 +section[role="region"] > header:first-child .icon.icon-attach {
  19 + background-image: url(/images/shared/headers/images/icons/attachments.png);
  20 +}
  21 +
14 22 section[role="region"] > header:first-child .icon.icon-group {
15 23 background-image: url(/images/shared/headers/images/icons/group.png);
16 24 }