Commit a18d1641 authored by Gabriel Engel's avatar Gabriel Engel Committed by GitHub

Merge pull request #5231 from RocketChat/livechat-icon-minimize-maximize

Add icon to minimize and maximize livechat widget
parents d9dc99d3 69e8fd1a
......@@ -26,6 +26,8 @@ this.Livechat = new (class Livechat {
this._ready = new ReactiveVar(false);
this._widgetOpened = new ReactiveVar(false);
Tracker.autorun(() => {
if (this._room.get() && Meteor.userId()) {
RoomHistoryManager.getMoreIfIsEmpty(this._room.get());
......@@ -150,4 +152,16 @@ this.Livechat = new (class Livechat {
isReady() {
return this._ready.get();
}
setWidgetOpened() {
return this._widgetOpened.set(true);
}
setWidgetClosed() {
return this._widgetOpened.set(false);
}
isWidgetOpened() {
return this._widgetOpened.get();
}
})();
......@@ -27,6 +27,14 @@ var api = {
clearDepartment: function() {
Livechat.department = null;
},
widgetOpened: function() {
Livechat.setWidgetOpened();
},
widgetClosed: function() {
Livechat.setWidgetClosed();
}
};
......
......@@ -153,6 +153,7 @@ input:focus {
padding-right: 5px;
svg {
cursor: pointer;
fill: currentColor;
width: 14px;
margin: 0 2px;
......@@ -160,6 +161,16 @@ input:focus {
}
}
}
&.popout {
border-top-right-radius: 0;
border-top-left-radius: 0;
.title {
cursor: default;
}
}
.messages {
flex: 1 1 100%;
......
<template name="livechatWindow">
{{#if livechatStarted}}
<div class="livechat-room">
<div class="livechat-room {{#if popoutActive}}popout{{/if}}">
<div class="title" style="background-color:{{color}}; color: {{fontColor}}">
<div class="toolbar">
&nbsp;
{{#unless popoutActive}}
{{#if isOpened}}
<svg class="minimize" title="Minimize" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg">
<path d="M448 328v48c0 22-18 40-40 40h-368c-22 0-40-18-40-40v-48c0-22 18-40 40-40h368c22 0 40 18 40 40z"></path>
</svg>
{{else}}
<svg class="maximize" title="Maximize" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg">
<path d="M64 352h320v-192h-320v192zM448 72v304c0 22-18 40-40 40h-368c-22 0-40-18-40-40v-304c0-22 18-40 40-40h368c22 0 40 18 40 40z"></path>
</svg>
{{/if}}
{{/unless}}
{{#if soundActive}}
<svg class="sound" title="Toggle notification sound" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z" />
......@@ -14,9 +25,8 @@
</svg>
{{/if}}
{{#unless popoutActive}}
<svg class="popout" aria-label="{{_ "Open in a new window"}}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M392.857,292.354h-18.274c-2.669,0-4.859,0.855-6.563,2.573c-1.718,1.708-2.573,3.897-2.573,6.563v91.361 c0,12.563-4.47,23.315-13.415,32.262c-8.945,8.945-19.701,13.414-32.264,13.414H82.224c-12.562,0-23.317-4.469-32.264-13.414 c-8.945-8.946-13.417-19.698-13.417-32.262V155.31c0-12.562,4.471-23.313,13.417-32.259c8.947-8.947,19.702-13.418,32.264-13.418 h200.994c2.669,0,4.859-0.859,6.57-2.57c1.711-1.713,2.566-3.9,2.566-6.567V82.221c0-2.662-0.855-4.853-2.566-6.563 c-1.711-1.713-3.901-2.568-6.57-2.568H82.224c-22.648,0-42.016,8.042-58.102,24.125C8.042,113.297,0,132.665,0,155.313v237.542 c0,22.647,8.042,42.018,24.123,58.095c16.086,16.084,35.454,24.13,58.102,24.13h237.543c22.647,0,42.017-8.046,58.101-24.13 c16.085-16.077,24.127-35.447,24.127-58.095v-91.358c0-2.669-0.856-4.859-2.574-6.57 C397.709,293.209,395.519,292.354,392.857,292.354z"></path>
<path d="M506.199,41.971c-3.617-3.617-7.905-5.424-12.85-5.424H347.171c-4.948,0-9.233,1.807-12.847,5.424 c-3.617,3.615-5.428,7.898-5.428,12.847s1.811,9.233,5.428,12.85l50.247,50.248L198.424,304.067 c-1.906,1.903-2.856,4.093-2.856,6.563c0,2.479,0.953,4.668,2.856,6.571l32.548,32.544c1.903,1.903,4.093,2.852,6.567,2.852 s4.665-0.948,6.567-2.852l186.148-186.148l50.251,50.248c3.614,3.617,7.898,5.426,12.847,5.426s9.233-1.809,12.851-5.426 c3.617-3.616,5.424-7.898,5.424-12.847V54.818C511.626,49.866,509.813,45.586,506.199,41.971z"></path>
<svg class="popout" aria-label="{{_ "Open in a new window"}}" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg">
<path d="M320 232v-120c0-8.75-7.25-16-16-16h-120c-6.5 0-12.25 4-14.75 9.75-2.5 6-1.25 13 3.5 17.5l36 36-133.5 133.5c-6.25 6.25-6.25 16.25 0 22.5l25.5 25.5c6.25 6.25 16.25 6.25 22.5 0l133.5-133.5 36 36c3 3.25 7 4.75 11.25 4.75 2 0 4.25-0.5 6.25-1.25 5.75-2.5 9.75-8.25 9.75-14.75zM384 104v240c0 39.75-32.25 72-72 72h-240c-39.75 0-72-32.25-72-72v-240c0-39.75 32.25-72 72-72h240c39.75 0 72 32.25 72 72z"></path>
</svg>
{{/unless}}
</div>
......
......@@ -41,6 +41,9 @@ Template.livechatWindow.helpers({
},
videoCalling() {
return LivechatVideoCall.isActive();
},
isOpened() {
return Livechat.isWidgetOpened();
}
});
......
......@@ -6,16 +6,6 @@
var hookQueue = [];
var ready = false;
var closeWidget = function() {
widget.dataset.state = 'closed';
widget.style.height = '30px';
};
var openWidget = function() {
widget.dataset.state = 'opened';
widget.style.height = '300px';
};
// hooks
var callHook = function(action, params) {
if (!ready) {
......@@ -29,6 +19,18 @@
iframe.contentWindow.postMessage(data, '*');
};
var closeWidget = function() {
widget.dataset.state = 'closed';
widget.style.height = '30px';
callHook('widgetClosed');
};
var openWidget = function() {
widget.dataset.state = 'opened';
widget.style.height = '300px';
callHook('widgetOpened');
};
var api = {
ready: function() {
ready = true;
......
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