Skip to content

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

Work on the status modal

parent ec2bda33
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 370 deletions
css/converse.css
View file @ b5812e25
...@@ -5013,6 +5013,11 @@ body.reset { ...@@ -5013,6 +5013,11 @@ body.reset {
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #777; } background-color: #777; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
...@@ -5628,10 +5633,22 @@ body.reset { ...@@ -5628,10 +5633,22 @@ body.reset {
flex-direction: column; } flex-direction: column; }
#conversejs:not(.fullscreen) > .row.no-gutters { #conversejs:not(.fullscreen) > .row.no-gutters {
margin: -1em; } } margin: -1em; } }
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
color: #3AA569; }
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
color: #E77051; }
#conversejs .set-xmpp-status .fa-dot-circle-o, #conversejs .xmpp-status .fa-dot-circle-o, #conversejs .roster-contacts .fa-dot-circle-o {
color: #E7A151; }
#conversejs .set-xmpp-status .fa-circle-o, #conversejs .xmpp-status .fa-circle-o, #conversejs .roster-contacts .fa-circle-o {
color: #A8ABA1; }
#conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
color: #A8ABA1; }
#conversejs #converse-modals .set-xmpp-status {
margin: 1em; }
#conversejs #converse-modals .set-xmpp-status .custom-control-label {
margin-top: 0.25em; }
#conversejs #controlbox { #conversejs #controlbox {
margin-right: 1.5em; } margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
overflow-y: auto; } overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
...@@ -5869,54 +5886,6 @@ body.reset { ...@@ -5869,54 +5886,6 @@ body.reset {
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: 4px 7px 0 5px; } padding: 4px 7px 0 5px; }
#conversejs #controlbox #select-xmpp-status {
display: none;
float: right;
margin-right: 0.5em; }
#conversejs #controlbox .fancy-dropdown {
border: 1px solid #B1BFC4;
height: 25px;
border-radius: 5px;
text-align: left; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
line-height: 25px;
text-shadow: 0 1px 0 #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
color: #206485; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
padding: 0 0.5em;
width: 100%; }
#conversejs #controlbox .fancy-dropdown.no-border {
border: 0; }
#conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
padding: 0 0.5em; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
line-height: 25px;
float: right;
clear: right;
width: 12px;
color: #578EA9; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
color: #206485; }
#conversejs #controlbox #fancy-xmpp-status-select fieldset {
padding: 0;
margin-top: -1px; }
#conversejs #controlbox #fancy-xmpp-status-select input {
height: 26px;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
padding: 0 0 0 0.5em; }
#conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
height: 26px;
width: 40px;
padding: 1px;
float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -5955,24 +5924,6 @@ body.reset { ...@@ -5955,24 +5924,6 @@ body.reset {
width: 100%; } width: 100%; }
#conversejs #controlbox .add-xmpp-contact button { #conversejs #controlbox .add-xmpp-contact button {
width: 100%; } width: 100%; }
#conversejs #controlbox .xmpp-status-menu {
text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .xmpp-status-menu.collapsed {
box-shadow: none; }
#conversejs #controlbox .xmpp-status-menu li {
padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a {
width: 100%;
padding: 0.3em; }
#conversejs #controlbox .xmpp-status-menu li a.logout,
#conversejs #controlbox .xmpp-status-menu li a.logout span {
color: #D24E2B; }
#conversejs #controlbox .set-xmpp-status {
background: none;
margin: 1em 0 0.5em 0em; }
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .toggle-controlbox { #conversejs .toggle-controlbox {
background-color: #578EA9; background-color: #578EA9;
border-top-left-radius: 5px; border-top-left-radius: 5px;
...@@ -5984,14 +5935,6 @@ body.reset { ...@@ -5984,14 +5935,6 @@ body.reset {
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span { #conversejs .toggle-controlbox span {
color: white; } color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
color: #33925d; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
color: #578EA9; }
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
color: #818479; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs #controlbox .box-flyout { #conversejs #controlbox .box-flyout {
...@@ -6049,11 +5992,6 @@ body.reset { ...@@ -6049,11 +5992,6 @@ body.reset {
#conversejs #converse-roster .roster-filter-form .roster-filter { #conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; width: 100%;
margin: 0.2em; } margin: 0.2em; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px); font-size: calc(14px - 2px);
height: 25px; height: 25px;
......
css/inverse.css
View file @ b5812e25
...@@ -5013,6 +5013,11 @@ body.reset { ...@@ -5013,6 +5013,11 @@ body.reset {
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #777; } background-color: #777; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
...@@ -5700,10 +5705,22 @@ body { ...@@ -5700,10 +5705,22 @@ body {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs.fullscreen .chatbox { #conversejs.fullscreen .chatbox {
width: calc(100% - 50px); } } width: calc(100% - 50px); } }
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
color: #3AA569; }
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
color: #E77051; }
#conversejs .set-xmpp-status .fa-dot-circle-o, #conversejs .xmpp-status .fa-dot-circle-o, #conversejs .roster-contacts .fa-dot-circle-o {
color: #E7A151; }
#conversejs .set-xmpp-status .fa-circle-o, #conversejs .xmpp-status .fa-circle-o, #conversejs .roster-contacts .fa-circle-o {
color: #A8ABA1; }
#conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
color: #A8ABA1; }
#conversejs #converse-modals .set-xmpp-status {
margin: 1em; }
#conversejs #converse-modals .set-xmpp-status .custom-control-label {
margin-top: 0.25em; }
#conversejs #controlbox { #conversejs #controlbox {
margin-right: 1.5em; } margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
overflow-y: auto; } overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
...@@ -5941,54 +5958,6 @@ body { ...@@ -5941,54 +5958,6 @@ body {
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: 4px 7px 0 5px; } padding: 4px 7px 0 5px; }
#conversejs #controlbox #select-xmpp-status {
display: none;
float: right;
margin-right: 0.5em; }
#conversejs #controlbox .fancy-dropdown {
border: 1px solid #B1BFC4;
height: 30px;
border-radius: 5px;
text-align: left; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
line-height: 30px;
text-shadow: 0 1px 0 #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
color: #206485; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
padding: 0 0.5em;
width: 100%; }
#conversejs #controlbox .fancy-dropdown.no-border {
border: 0; }
#conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
padding: 0 0.5em; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
line-height: 30px;
float: right;
clear: right;
width: 12px;
color: #578EA9; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
color: #206485; }
#conversejs #controlbox #fancy-xmpp-status-select fieldset {
padding: 0;
margin-top: -1px; }
#conversejs #controlbox #fancy-xmpp-status-select input {
height: 31px;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
padding: 0 0 0 0.5em; }
#conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
height: 31px;
width: 40px;
padding: 1px;
float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -6027,24 +5996,6 @@ body { ...@@ -6027,24 +5996,6 @@ body {
width: 100%; } width: 100%; }
#conversejs #controlbox .add-xmpp-contact button { #conversejs #controlbox .add-xmpp-contact button {
width: 100%; } width: 100%; }
#conversejs #controlbox .xmpp-status-menu {
text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .xmpp-status-menu.collapsed {
box-shadow: none; }
#conversejs #controlbox .xmpp-status-menu li {
padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a {
width: 100%;
padding: 0.3em; }
#conversejs #controlbox .xmpp-status-menu li a.logout,
#conversejs #controlbox .xmpp-status-menu li a.logout span {
color: #D24E2B; }
#conversejs #controlbox .set-xmpp-status {
background: none;
margin: 1em 0 0.5em 0em; }
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .toggle-controlbox { #conversejs .toggle-controlbox {
background-color: #578EA9; background-color: #578EA9;
border-top-left-radius: 5px; border-top-left-radius: 5px;
...@@ -6056,14 +6007,6 @@ body { ...@@ -6056,14 +6007,6 @@ body {
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span { #conversejs .toggle-controlbox span {
color: white; } color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
color: #33925d; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
color: #578EA9; }
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
color: #818479; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs #controlbox .box-flyout { #conversejs #controlbox .box-flyout {
...@@ -6177,11 +6120,6 @@ body { ...@@ -6177,11 +6120,6 @@ body {
#conversejs #converse-roster .roster-filter-form .roster-filter { #conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; width: 100%;
margin: 0.2em; } margin: 0.2em; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(16px - 2px); font-size: calc(16px - 2px);
height: 30px; height: 30px;
......
mockup/chatbox.html
View file @ b5812e25
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modals"></div> <div id="converse-modals" class="modals"></div>
</div> </div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script> <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
......
mockup/chatroom.html
View file @ b5812e25
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modals"></div> <div id="converse-modals" class="modals"></div>
</div> </div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script> <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
......
mockup/converse.html
View file @ b5812e25
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modals"></div> <div id="converse-modals" class="modals"></div>
</div> </div>
</div> </div>
</body> </body>
......
mockup/modals.html
View file @ b5812e25
...@@ -75,40 +75,40 @@ ...@@ -75,40 +75,40 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<form class="set-xmpp-status" id="set-xmpp-status">
<div class="modal-body"> <div class="modal-body">
<form class="pure-form set-xmpp-status" id="set-xmpp-status">
<ul class="xmpp-status-menu form-group">
<li>
<a href="#" class="online" data-value="online">
<span class="fa fa-circle"></span> Online
</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="fa fa-minus-circle"></span> Busy
</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="fa fa-circle-o"></span> Away
</a>
</li>
<li>
<a href="#" class="logout" data-value="logout">
<span class="fa fa-times-circle"></span> Offline
</a>
</li>
</ul>
<div class="form-group"> <div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-online">
<span class="fa fa-circle"></span>&nbsp;Online</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-busy">
<span class="fa fa-minus-circle"></span>&nbsp;Busy</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-away">
<span class="fa fa-dot-circle-o"></span>&nbsp;Away</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-xa">
<span class="fa fa-circle-o"></span>&nbsp;Away for long</label>
</div>
</div>
<div class="btn-group w-100">
<input type="text" class="form-control" value="" placeholder="Personal status message"> <input type="text" class="form-control" value="" placeholder="Personal status message">
<span class="clear-input fa fa-times"></span>
</div> </div>
</form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
......
sass/_controlbox.scss
View file @ b5812e25
#conversejs { #conversejs {
#controlbox {
margin-right: 3*$chat-gutter;
.pure-form.converse-form { .set-xmpp-status, .xmpp-status, .roster-contacts {
padding: 0; .fa-circle {
color: $green;
}
.fa-minus-circle {
color: $red
}
.fa-dot-circle-o {
color: $orange,
}
.fa-circle-o {
color: $subdued-color;
}
.fa-times-circle {
color: $subdued-color;
} }
}
#converse-modals {
.set-xmpp-status {
margin: 1em;
.custom-control-label {
margin-top: 0.25em;
}
}
}
#controlbox {
margin-right: 3*$chat-gutter;
&.logged-out { &.logged-out {
.box-flyout { .box-flyout {
...@@ -328,70 +353,6 @@ ...@@ -328,70 +353,6 @@
} }
} }
#select-xmpp-status {
display: none;
float: right;
margin-right: 0.5em;
}
.fancy-dropdown {
border: 1px solid $light-background-border-color;
height: $controlbox-dropdown-height;
border-radius: $button-border-radius;
text-align: left;
.choose-xmpp-status,
.toggle-xmpp-contact-form {
line-height: $controlbox-dropdown-height;
text-shadow: 0 1px 0 #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
&:hover {
color: $dark-link-color;
}
}
.toggle-xmpp-contact-form {
padding: 0 0.5em;
width: 100%;
}
&.no-border {
border: 0;
}
}
#fancy-xmpp-status-select {
.xmpp-status {
padding: 0 0.5em;
}
a.change-xmpp-status-message {
line-height: $controlbox-dropdown-height;
float: right;
clear: right;
width: 12px;
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
fieldset {
padding: 0;
margin-top: -1px;
}
input {
height: $controlbox-dropdown-height + 1px;
@include calc(width, '100% - 40px');
padding: 0 0 0 0.5em;
}
input[type=submit] {
height: $controlbox-dropdown-height + 1px;
width: 40px;
padding: 1px;
float: right;
}
}
.controlbox-panes { .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -447,33 +408,6 @@ ...@@ -447,33 +408,6 @@
width: 100%; width: 100%;
} }
} }
.xmpp-status-menu {
text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
&.collapsed {
box-shadow: none;
}
li {
padding: 2px;
a {
width: 100%;
padding: 0.3em;
}
}
}
.xmpp-status-menu li a.logout,
.xmpp-status-menu li a.logout span {
color: $warning-color;
}
.set-xmpp-status {
background: none;
margin: 1em 0 0.5em 0em;
.dropdown dd ul {
z-index: 22;
}
}
} }
.toggle-controlbox { .toggle-controlbox {
...@@ -489,21 +423,6 @@ ...@@ -489,21 +423,6 @@
color: $inverse-link-color; color: $inverse-link-color;
} }
} }
.xmpp-status, .xmpp-status-menu {
.online, .fa-circle {
color: darken($green, 5%);
}
.dnd {
color: $red
}
.away {
color: $light-blue;
}
.logout, .offline {
color: $gray-color;
}
}
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
......
sass/_core.scss
View file @ b5812e25
...@@ -340,6 +340,13 @@ body.reset { ...@@ -340,6 +340,13 @@ body.reset {
} }
form { form {
.clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem;
}
&.pure-form.converse-form { &.pure-form.converse-form {
background: white; background: white;
padding: 1em; padding: 1em;
......
sass/_roster.scss
View file @ b5812e25
...@@ -44,12 +44,6 @@ ...@@ -44,12 +44,6 @@
width: 100%; width: 100%;
margin: 0.2em; margin: 0.2em;
} }
.clear-roster-filter {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem;
}
.state-type { .state-type {
font-size: calc(#{$font-size} - 2px); font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
......
src/converse-profile.js
View file @ b5812e25
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
"bootstrap.native", "bootstrap.native",
"tpl!chat_status_modal", "tpl!chat_status_modal",
"tpl!profile_view", "tpl!profile_view",
"tpl!choose_status",
"tpl!status_option", "tpl!status_option",
"converse-vcard" "converse-vcard"
], factory); ], factory);
...@@ -20,12 +19,12 @@ ...@@ -20,12 +19,12 @@
bootstrap, bootstrap,
tpl_chat_status_modal, tpl_chat_status_modal,
tpl_profile_view, tpl_profile_view,
tpl_choose_status,
tpl_status_option tpl_status_option
) { ) {
"use strict"; "use strict";
const { Strophe, Backbone, Promise, utils, _, moment } = converse.env; const { Strophe, Backbone, Promise, utils, _, moment } = converse.env;
const u = converse.env.utils;
converse.plugins.add('converse-profile', { converse.plugins.add('converse-profile', {
...@@ -41,7 +40,8 @@ ...@@ -41,7 +40,8 @@
_converse.ChatStatusModal = Backbone.VDOMView.extend({ _converse.ChatStatusModal = Backbone.VDOMView.extend({
id: "modal-status-change", id: "modal-status-change",
events: { events: {
"submit.set-xmpp-status .logout": "onFormSubmitted" "submit form#set-xmpp-status": "onFormSubmitted",
"click .clear-input": "clearStatusMessage"
}, },
initialize () { initialize () {
...@@ -52,15 +52,6 @@ ...@@ -52,15 +52,6 @@
}); });
}, },
show () {
this.modal.show();
},
insertIntoDOM () {
const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
container_el.insertAdjacentElement('beforeEnd', this.el);
},
toHTML () { toHTML () {
return tpl_chat_status_modal(_.extend(this.model.toJSON(), { return tpl_chat_status_modal(_.extend(this.model.toJSON(), {
'label_away': __('Away'), 'label_away': __('Away'),
...@@ -77,17 +68,40 @@ ...@@ -77,17 +68,40 @@
})); }));
}, },
insertIntoDOM () {
const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
container_el.insertAdjacentElement('beforeEnd', this.el);
},
show () {
this.render();
this.modal.show();
},
clearStatusMessage (ev) {
if (ev && ev.preventDefault) {
ev.preventDefault();
u.hideElement(this.el.querySelector('.clear-input'));
}
const roster_filter = this.el.querySelector('input[name="status_message"]');
roster_filter.value = '';
},
onFormSubmitted (ev) { onFormSubmitted (ev) {
ev.preventDefault(); ev.preventDefault();
debugger; const data = new FormData(ev.target);
this.model.save('status_message', ev.target.querySelector('input').value); this.model.save({
'status_message': data.get('status_message'),
'status': data.get('chat_status')
});
this.modal.hide();
} }
}); });
_converse.XMPPStatusView = Backbone.VDOMView.extend({ _converse.XMPPStatusView = Backbone.VDOMView.extend({
tagName: "div", tagName: "div",
events: { events: {
"click a.change-status": this.status_modal.show.bind(this.status_modal), "click a.change-status": "showStatusChangeModal",
"click .dropdown dd ul li a": "setStatus", "click .dropdown dd ul li a": "setStatus",
"click .logout": "logOut" "click .logout": "logOut"
}, },
...@@ -111,6 +125,10 @@ ...@@ -111,6 +125,10 @@
})); }));
}, },
showStatusChangeModal (ev) {
this.status_modal.show();
},
logOut (ev) { logOut (ev) {
ev.preventDefault(); ev.preventDefault();
const result = confirm(__("Are you sure you want to log out?")); const result = confirm(__("Are you sure you want to log out?"));
......
src/converse-rosterview.js
View file @ b5812e25
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
events: { events: {
"keydown .roster-filter": "liveFilter", "keydown .roster-filter": "liveFilter",
"submit form.roster-filter-form": "submitFilter", "submit form.roster-filter-form": "submitFilter",
"click .clear-roster-filter": "clearFilter", "click .clear-input": "clearFilter",
"click .filter-by span": "changeTypeFilter", "click .filter-by span": "changeTypeFilter",
"change .state-type": "changeChatStateFilter" "change .state-type": "changeChatStateFilter"
}, },
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
clearFilter (ev) { clearFilter (ev) {
if (ev && ev.preventDefault) { if (ev && ev.preventDefault) {
ev.preventDefault(); ev.preventDefault();
u.hideElement(this.el.querySelector('.clear-roster-filter')); u.hideElement(this.el.querySelector('.clear-input'));
} }
const roster_filter = this.el.querySelector('.roster-filter'); const roster_filter = this.el.querySelector('.roster-filter');
roster_filter.value = ''; roster_filter.value = '';
...@@ -336,7 +336,9 @@ ...@@ -336,7 +336,9 @@
const chat_status = item.get('chat_status') || 'offline'; const chat_status = item.get('chat_status') || 'offline';
if (chat_status === 'online') { if (chat_status === 'online') {
status_icon = 'fa-circle'; status_icon = 'fa-circle';
} else if (chat_status === 'away' || chat_status === 'xa') { } else if (chat_status === 'away') {
status_icon = 'fa-dot-circle-o';
} else if (chat_status === 'xa') {
status_icon = 'fa-circle-o'; status_icon = 'fa-circle-o';
} else if (chat_status === 'dnd') { } else if (chat_status === 'dnd') {
status_icon = 'fa-minus-circle'; status_icon = 'fa-minus-circle';
......
src/templates/chat_status_modal.html
View file @ b5812e25
...@@ -8,39 +8,44 @@ ...@@ -8,39 +8,44 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<form class="set-xmpp-status" id="set-xmpp-status">
<div class="modal-body"> <div class="modal-body">
<form class="pure-form set-xmpp-status" id="set-xmpp-status">
<ul class="xmpp-status-menu form-group">
<li>
<a href="#" class="online" data-value="online">
<span class="fa fa-circle"></span> {{{o.label_online}}}
</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="fa fa-minus-circle"></span> {{{o.label_busy}}}
</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="fa fa-circle-o"></span> {{{o.label_away}}}
</a>
</li>
<li>
<a href="#" class="logout" data-value="logout">
<span class="fa fa-times-circle"></span> {{{o.label_offline}}}
</a>
</li>
</ul>
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" value="" placeholder="{{{o.placeholder_status_message}}}"> <div class="custom-control custom-radio">
<input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-online">
<span class="fa fa-circle"></span>&nbsp;{{{o.label_online}}}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-busy">
<span class="fa fa-minus-circle"></span>&nbsp;{{{o.label_busy}}}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-away">
<span class="fa fa-dot-circle-o"></span>&nbsp;{{{o.label_away}}}</label>
</div>
<div class="custom-control custom-radio">
<input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-xa">
<span class="fa fa-circle-o"></span>&nbsp;{{{o.label_xa}}}</label>
</div>
</div>
<div class="btn-group w-100">
<input name="status_message" type="text" class="form-control"
value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}">
<span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
</div> </div>
</form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary">{{{o.label_save}}}</button> <button type="submit" class="btn btn-primary">{{{o.label_save}}}</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_cancel}}}</button>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
src/templates/choose_status.html deleted 100644 → 0
View file @ ec2bda33
<dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown"></dt>
<dd><ul class="xmpp-status-menu"></ul></dd>
</dl>
src/templates/profile_view.html
View file @ b5812e25
...@@ -10,7 +10,12 @@ ...@@ -10,7 +10,12 @@
</div> </div>
<div class="d-flex xmpp-status"> <div class="d-flex xmpp-status">
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}"> <span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
<span class="fa fa-circle"></span> {{{o.status_message}}}</span> <span class="fa
{[ if (o.chat_status === 'online') { ]} fa-circle {[ } ]}
{[ if (o.chat_status === 'busy') { ]} fa-minus-circle {[ } ]}
{[ if (o.chat_status === 'away') { ]} fa-dot-circle-o {[ } ]}
{[ if (o.chat_status === 'xa') { ]} fa-circle-o {[ } ]}
{[ if (o.chat_status === 'offline') { ]} fa-times-circle {[ } ]}"></span> {{{o.status_message}}}</span>
<a class="chatbox-btn change-status fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a> <a class="chatbox-btn change-status fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
</div> </div>
</div> </div>
src/templates/roster_filter.html
View file @ b5812e25
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<input value="{{{o.filter_text}}}" <input value="{{{o.filter_text}}}"
class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}" class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
placeholder="{{{o.placeholder}}}"> placeholder="{{{o.placeholder}}}">
<span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span> <span class="clear-input fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
</div> </div>
<select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}"> <select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">
......
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