Skip to content

C
converse.js
Commit b2a118ca authored by JC Brand's avatar JC Brand
Browse files
Options

Refactor slide methods in utils and use them for toolbar menus

parent ce2548c8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 587 deletions
Makefile
View file @ b2a118ca
...@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/* ...@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/*
.PHONY: watch .PHONY: watch
watch: stamp-bundler watch: stamp-bundler
$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css $(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css
.PHONY: watchjs .PHONY: watchjs
watchjs: stamp-npm watchjs: stamp-npm
......
css/converse.css
View file @ b2a118ca
This diff is collapsed.
css/inverse.css
View file @ b2a118ca
This diff is collapsed.
sass/_chatbox.scss
View file @ b2a118ca
...@@ -272,14 +272,6 @@ ...@@ -272,14 +272,6 @@
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
} }
.emoji-picker {
margin-bottom: $toolbar-height + 5px;
}
.toolbar-picker-panel {
a {
color: $link-color;
}
}
.chat-toolbar-text { .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px;
...@@ -287,7 +279,7 @@ ...@@ -287,7 +279,7 @@
.unencrypted a, .unencrypted a,
.unencrypted { .unencrypted {
color: $text-color; color: $text-color;
.toolbar-picker-panel { .toolbar-menu {
a { a {
color: $link-color; color: $link-color;
} }
...@@ -307,84 +299,84 @@ ...@@ -307,84 +299,84 @@
float: right; float: right;
} }
li { li {
cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 3px 0 3px;
cursor: pointer;
margin-top: 1px; margin-top: 1px;
} padding: 0 3px 0 3px;
li:hover { &:hover {
cursor: pointer;
}
ul {
background: #fff;
bottom: 100%;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px;
margin: 0;
position: absolute;
right: 0;
li {
cursor: pointer; cursor: pointer;
list-style: none;
position: relative;
a:hover {
color: #8f2831;
}
} }
} .toolbar-menu {
li { background-color: #fff;
margin-left: 0; bottom: 100%;
} box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
.toggle-smiley { font-size: 12px;
color: $text-color; margin: 0;
padding-left: 5px; position: absolute;
ul { right: 0;
&.emoji-category-picker { a {
z-index: 100; color: $link-color;
.picked {
background-color: $highlight-color;
}
} }
&.emoji-picker { ul {
height: 250px; &.emoji-category-picker {
overflow: scroll; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
z-index: 100;
.picked {
background-color: $highlight-color;
}
}
&.emoji-picker {
height: 250px;
overflow: scroll;
}
li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative;
a:hover {
color: #8f2831;
}
}
} }
left: 0; }
li { &.toggle-toolbar-menu {
font-size: $font-size; color: $text-color;
padding: 5px; ul {
z-index: 98; li {
&.emoji { &:hover {
a { background-color: $highlight-color;
font-size: $font-size-huge;
} }
} }
} }
li:hover { }
background-color: $highlight-color; &.toggle-smiley {
padding-left: 5px;
ul {
left: 0;
li {
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
} }
} }
} &.toggle-otr {
.toggle-otr { ul {
ul {
li {
padding: 7px;
background-color: white;
display: block;
z-index: 99; z-index: 99;
a { li {
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
display: block; display: block;
padding: 1px; padding: 7px;
text-decoration: none; a {
display: block;
}
} }
} }
li:hover {
background-color: $highlight-color;
}
} }
} }
} }
......
sass/_core.scss
View file @ b2a118ca
...@@ -74,6 +74,10 @@ ...@@ -74,6 +74,10 @@
opacity: 0; opacity: 0;
display: none; display: none;
} }
.collapsed {
height: 0;
overflow: hidden;
}
.locked { .locked {
padding-right: 22px; padding-right: 22px;
......
src/converse-chatview.js
View file @ b2a118ca
...@@ -54,14 +54,13 @@ ...@@ -54,14 +54,13 @@
// //
registerGlobalEventHandlers: function () { registerGlobalEventHandlers: function () {
this.__super__.registerGlobalEventHandlers(); this.__super__.registerGlobalEventHandlers();
document.addEventListener('click', function () { document.addEventListener(
if ($('.toggle-smiley ul').is(':visible')) { 'click', function () {
_.each( utils.slideInAllElements(
document.querySelectorAll('.toggle-smiley .emoji-picker-container'), document.querySelectorAll('.toolbar-menu')
utils.hideElement )
);
} }
}); );
}, },
ChatBoxViews: { ChatBoxViews: {
...@@ -114,7 +113,7 @@ ...@@ -114,7 +113,7 @@
}); });
_converse.EmojiPickerView = Backbone.View.extend({ _converse.EmojiPickerView = Backbone.View.extend({
className: 'emoji-picker-container hidden', className: 'emoji-picker-container toolbar-menu collapsed',
events: { events: {
'click .emoji-category-picker li a': 'chooseCategory', 'click .emoji-category-picker li a': 'chooseCategory',
}, },
...@@ -710,7 +709,16 @@ ...@@ -710,7 +709,16 @@
return; return;
} }
} }
utils.toggleElement(this.emoji_picker_view.el); const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
utils.slideInAllElements(elements).then(
_.partial(
utils.slideToggleElement,
this.emoji_picker_view.el
)
);
}, },
toggleCall (ev) { toggleCall (ev) {
......
src/converse-otr.js
View file @ b2a118ca
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
OTR_CLASS_MAPPING[VERIFIED] = 'verified'; OTR_CLASS_MAPPING[VERIFIED] = 'verified';
OTR_CLASS_MAPPING[FINISHED] = 'finished'; OTR_CLASS_MAPPING[FINISHED] = 'finished';
converse.plugins.add('converse-otr', { converse.plugins.add('converse-otr', {
overrides: { overrides: {
...@@ -51,15 +52,6 @@ ...@@ -51,15 +52,6 @@
// //
// New functions which don't exist yet can also be added. // New functions which don't exist yet can also be added.
registerGlobalEventHandlers () {
this.__super__.registerGlobalEventHandlers();
document.addEventListener('click', function () {
if ($('.toggle-otr ul').is(':visible')) {
_.each($('.toggle-otr ul', this), utils.hideElement);
}
});
},
ChatBox: { ChatBox: {
initialize () { initialize () {
this.__super__.initialize.apply(this, arguments); this.__super__.initialize.apply(this, arguments);
...@@ -347,7 +339,6 @@ ...@@ -347,7 +339,6 @@
}, },
startOTRFromToolbar (ev) { startOTRFromToolbar (ev) {
$(ev.target).parent().parent().slideUp();
ev.stopPropagation(); ev.stopPropagation();
this.model.initiateOTR(); this.model.initiateOTR();
}, },
...@@ -392,7 +383,17 @@ ...@@ -392,7 +383,17 @@
toggleOTRMenu (ev) { toggleOTRMenu (ev) {
ev.stopPropagation(); ev.stopPropagation();
utils.toggleElement(this.el.querySelector('.toggle-otr ul')); const menu = this.el.querySelector('.toggle-otr ul');
const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
[menu]
);
utils.slideInAllElements(elements).then(
_.partial(
utils.slideToggleElement,
menu
)
);
}, },
getOTRTooltip () { getOTRTooltip () {
......
src/converse-roomslist.js
View file @ b2a118ca
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
}); });
this.hide(); this.hide();
if (this.list_model.get('toggle-state') !== _converse.OPENED) { if (this.list_model.get('toggle-state') !== _converse.OPENED) {
this.el.querySelector('.open-rooms-list').classList.add('hidden'); this.el.querySelector('.open-rooms-list').classList.add('collapsed');
} }
this.model.each(this.renderRoomsListElement.bind(this)); this.model.each(this.renderRoomsListElement.bind(this));
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
...@@ -142,13 +142,13 @@ ...@@ -142,13 +142,13 @@
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const el = ev.target; const el = ev.target;
if (el.classList.contains("icon-opened")) { if (el.classList.contains("icon-opened")) {
utils.slideUp(this.el.querySelector('.open-rooms-list')).then(() => { utils.slideIn(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.CLOSED}); this.list_model.save({'toggle-state': _converse.CLOSED});
el.classList.remove("icon-opened"); el.classList.remove("icon-opened");
el.classList.add("icon-closed"); el.classList.add("icon-closed");
}); });
} else { } else {
utils.slideDown(this.el.querySelector('.open-rooms-list')).then(() => { utils.slideOut(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.OPENED}); this.list_model.save({'toggle-state': _converse.OPENED});
el.classList.remove("icon-closed"); el.classList.remove("icon-closed");
el.classList.add("icon-opened"); el.classList.add("icon-opened");
......
src/templates/emojis.html
View file @ b2a118ca
<ul class="emoji-category-picker">
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
<a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
</li>
{[ }); ]}
</ul>
{[ _.forEach(emojis_by_category, function (obj, category) { ]} {[ _.forEach(emojis_by_category, function (obj, category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}"> <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
{[ _.forEach(emojis_by_category[category], function (emoji) { ]} {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
...@@ -14,3 +7,10 @@ ...@@ -14,3 +7,10 @@
{[ }); ]} {[ }); ]}
</ul> </ul>
{[ }); ]} {[ }); ]}
<ul class="emoji-category-picker">
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
<a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
</li>
{[ }); ]}
</ul>
src/templates/toolbar.html
View file @ b2a118ca
{[ if (use_emoji) { ]} {[ if (use_emoji) { ]}
<li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}"> <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
<ul class="emoji-picker"></ul> <ul class="emoji-picker"></ul>
</li> </li>
{[ } ]} {[ } ]}
......
src/templates/toolbar_otr.html
View file @ b2a118ca
{[ if (allow_otr) { ]} {[ if (allow_otr) { ]}
<li class="toggle-otr {{{otr_status_class}}}" title="{{{otr_tooltip}}}"> <li class="toggle-toolbar-menu toggle-otr {{{otr_status_class}}}" title="{{{otr_tooltip}}}">
<span class="chat-toolbar-text">{{{otr_translated_status}}}</span> <span class="chat-toolbar-text">{{{otr_translated_status}}}</span>
{[ if (otr_status == UNENCRYPTED) { ]} {[ if (otr_status == UNENCRYPTED) { ]}
<span class="icon-unlocked"></span> <span class="icon-unlocked"></span>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
{[ if (otr_status == FINISHED) { ]} {[ if (otr_status == FINISHED) { ]}
<span class="icon-unlocked"></span> <span class="icon-unlocked"></span>
{[ } ]} {[ } ]}
<ul class="toolbar-picker-panel"> <ul class="toolbar-menu collapsed">
{[ if (otr_status == UNENCRYPTED) { ]} {[ if (otr_status == UNENCRYPTED) { ]}
<li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li> <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
{[ } ]} {[ } ]}
......
src/utils.js
View file @ b2a118ca
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7