Change lock icon when clicking the toggle

updates #497
This commit is contained in:
JC Brand 2018-05-15 16:37:25 +02:00
parent 61dcebbbf6
commit a99e7a317e
4 changed files with 36 additions and 17 deletions

View File

@ -5,6 +5,7 @@
var b64_sha1 = converse.env.b64_sha1; var b64_sha1 = converse.env.b64_sha1;
var $iq = converse.env.$iq; var $iq = converse.env.$iq;
var _ = converse.env._; var _ = converse.env._;
var u = converse.env.utils;
describe("The OMEMO module", function() { describe("The OMEMO module", function() {
@ -151,12 +152,24 @@
const view = _converse.chatboxviews.get(contact_jid); const view = _converse.chatboxviews.get(contact_jid);
const toolbar = view.el.querySelector('.chat-toolbar'); const toolbar = view.el.querySelector('.chat-toolbar');
expect(view.model.get('omemo_active')).toBe(undefined); expect(view.model.get('omemo_active')).toBe(undefined);
expect(_.isNull(toolbar.querySelector('.toggle-omemo'))).toBe(false); const toggle = toolbar.querySelector('.toggle-omemo');
expect(_.isNull(toggle)).toBe(false);
expect(u.hasClass('fa-unlock', toggle)).toBe(true);
expect(u.hasClass('fa-lock', toggle)).toBe(false);
spyOn(view, 'toggleOMEMO').and.callThrough(); spyOn(view, 'toggleOMEMO').and.callThrough();
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
toolbar.querySelector('.toggle-omemo').click(); toolbar.querySelector('.toggle-omemo').click();
expect(view.toggleOMEMO).toHaveBeenCalled(); expect(view.toggleOMEMO).toHaveBeenCalled();
expect(view.model.get('omemo_active')).toBe(true); expect(view.model.get('omemo_active')).toBe(true);
return test_utils.waitUntil(() => u.hasClass('fa-lock', toolbar.querySelector('.toggle-omemo')));
}).then(function () {
const view = _converse.chatboxviews.get(contact_jid);
const toolbar = view.el.querySelector('.chat-toolbar');
const toggle = toolbar.querySelector('.toggle-omemo');
expect(u.hasClass('fa-unlock', toggle)).toBe(false);
expect(u.hasClass('fa-lock', toggle)).toBe(true);
done(); done();
}).catch(_.partial(console.error, _)); }).catch(_.partial(console.error, _));
})); }));

View File

@ -336,7 +336,8 @@
'time': moment().format(), 'time': moment().format(),
'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined, 'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
'is_spoiler': is_spoiler, 'is_spoiler': is_spoiler,
'spoiler_hint': is_spoiler ? spoiler_hint : undefined 'spoiler_hint': is_spoiler ? spoiler_hint : undefined,
'type': this.get('message_type')
}); });
}, },
@ -390,8 +391,7 @@
this.getOutgoingMessageAttributes(), { this.getOutgoingMessageAttributes(), {
'file': file, 'file': file,
'progress': 0, 'progress': 0,
'slot_request_url': slot_request_url, 'slot_request_url': slot_request_url
'type': this.get('message_type'),
}) })
); );
} }

View File

@ -64,9 +64,26 @@
'click .toggle-omemo': 'toggleOMEMO' 'click .toggle-omemo': 'toggleOMEMO'
}, },
renderOMEMOToolbarButton () {
const { _converse } = this.__super__,
{ __ } = _converse;
contactHasOMEMOSupport(_converse, this.model.get('jid')).then((support) => {
if (support) {
const icon = this.el.querySelector('.toggle-omemo'),
html = tpl_toolbar_omemo(_.extend(this.model.toJSON(), {'__': __}));
if (icon) {
icon.outerHTML = html;
} else {
this.el.querySelector('.chat-toolbar').insertAdjacentHTML('beforeend', html);
}
}
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
},
toggleOMEMO (ev) { toggleOMEMO (ev) {
ev.preventDefault(); ev.preventDefault();
this.model.save({'omemo_active': !this.model.get('omemo_active')}); this.model.save({'omemo_active': !this.model.get('omemo_active')});
this.renderOMEMOToolbarButton();
} }
} }
}, },
@ -326,17 +343,6 @@
return _converse.omemo_store.fetchSession(); return _converse.omemo_store.fetchSession();
} }
function addOMEMOToolbarButton (view) {
const { __ } = _converse;
contactHasOMEMOSupport(_converse, view.model.get('jid')).then((support) => {
if (support) {
view.el.querySelector('.chat-toolbar').insertAdjacentHTML(
'beforeend',
tpl_toolbar_omemo({'__': __}));
}
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
}
function initOMEMO() { function initOMEMO() {
_converse.devicelists = new _converse.DeviceLists(); _converse.devicelists = new _converse.DeviceLists();
_converse.devicelists.browserStorage = new Backbone.BrowserStorage.session( _converse.devicelists.browserStorage = new Backbone.BrowserStorage.session(
@ -351,7 +357,7 @@
_converse.api.listen.on('afterTearDown', () => _converse.devices.reset()); _converse.api.listen.on('afterTearDown', () => _converse.devices.reset());
_converse.api.listen.on('connected', registerPEPPushHandler); _converse.api.listen.on('connected', registerPEPPushHandler);
_converse.api.listen.on('renderToolbar', addOMEMOToolbarButton); _converse.api.listen.on('renderToolbar', (view) => view.renderOMEMOToolbarButton());
_converse.api.listen.on('statusInitialized', initOMEMO); _converse.api.listen.on('statusInitialized', initOMEMO);
_converse.api.listen.on('addClientFeatures', _converse.api.listen.on('addClientFeatures',
() => _converse.api.disco.own.features.add(Strophe.NS.OMEMO_DEVICELIST+"notify")); () => _converse.api.disco.own.features.add(Strophe.NS.OMEMO_DEVICELIST+"notify"));

View File

@ -1 +1 @@
<li class="toggle-omemo fa fa-unlock" title="{{{o.__('Messages are being sent in plaintext')}}}"></li> <li class="toggle-omemo fa {[ if (o.omemo_active) { ]} fa-lock {[ } else { ]} fa-unlock {[ } ]}" title="{{{o.__('Messages are being sent in plaintext')}}}"></li>