From 336dc7408f36fc44a0fe877d8f0a96dc5beaf22c Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 15 Jun 2017 18:29:08 +0200 Subject: [PATCH] Remove the pulse entirely. Couldn't get it to look/work satisfactorily --- css/converse.css | 117 ++++----------------------------- css/inverse.css | 73 -------------------- sass/_core.scss | 19 ------ sass/_roomslist.scss | 4 -- sass/_roster.scss | 20 ------ src/templates/roster_item.html | 1 - 6 files changed, 12 insertions(+), 222 deletions(-) diff --git a/css/converse.css b/css/converse.css index ebc86a318..463a35afb 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1260,74 +1260,6 @@ -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(0); - opacity: 0.0; } - 25% { - -webkit-transform: scale(0); - opacity: 0.1; } - 50% { - -webkit-transform: scale(0.1); - opacity: 0.3; } - 75% { - -webkit-transform: scale(0.5); - opacity: 0.5; } - 100% { - -webkit-transform: scale(1); - opacity: 0.0; } } -@-moz-keyframes pulse { - 0% { - -moz-transform: scale(0); - opacity: 0.0; } - 25% { - -moz-transform: scale(0); - opacity: 0.1; } - 50% { - -moz-transform: scale(0.1); - opacity: 0.3; } - 75% { - -moz-transform: scale(0.5); - opacity: 0.5; } - 100% { - -moz-transform: scale(1); - opacity: 0.0; } } -@keyframes pulse { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); - opacity: 0.0; } - 25% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); - opacity: 0.1; } - 50% { - -webkit-transform: scale(0.1); - -moz-transform: scale(0.1); - -ms-transform: scale(0.1); - -o-transform: scale(0.1); - transform: scale(0.1); - opacity: 0.3; } - 75% { - -webkit-transform: scale(0.5); - -moz-transform: scale(0.5); - -ms-transform: scale(0.5); - -o-transform: scale(0.5); - transform: scale(0.5); - opacity: 0.5; } - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - opacity: 0.0; } } #converse-embedded-chat .spinner, #conversejs .spinner { -webkit-animation: spin 2s infinite, linear; @@ -1928,11 +1860,10 @@ #conversejs #controlbox form.search-xmpp-contact input { width: 8em; } #conversejs #controlbox .msgs-indicator { - opacity: 0.6; - background-color: #D24E2B; + border-radius: 3px; + background-color: #E77051; color: white; font-size: 12px; - float: right; font-weight: normal; padding: 0 4px; text-shadow: none; } @@ -2125,11 +2056,14 @@ #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator { background-color: #E77051; } #conversejs #controlbox #controlbox-tabs li a .msgs-indicator { - border-top-right-radius: 5px; } + border: solid white 2px; + opacity: 0.8; + border-top-right-radius: 5px; + float: right; } #conversejs #controlbox #controlbox-tabs li a:hover { color: #818479; } #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator { - opacity: 0.8; } + opacity: 1; } #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover { box-shadow: none; border-bottom: 0; @@ -2245,9 +2179,6 @@ height: -webkit-calc(100% - 55px); height: calc(100% - 55px); } -#conversejs #controlbox .available-chatroom .pulse { - padding: 0; - margin: 0; } #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator { border-radius: 10%; opacity: 1; } @@ -2339,7 +2270,7 @@ height: 24px; overflow-y: hidden; text-shadow: 0 1px 0 #FAFAFA; - line-height: 16px; + line-height: 14px; width: 100%; height: 30px; margin: 0; @@ -2350,37 +2281,15 @@ margin: auto; padding: 0; width: 85%; } - #conversejs #converse-roster .roster-contacts dd .open-chat .pulse { - padding: 0; - margin: 0; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs { font-weight: bold; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { width: 70%; } - #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse { - border: 0.7em solid #578EA9; - background: transparent; - border-radius: 60px; - height: 30px; - width: 30px; - -webkit-animation: pulse 3s ease-out; - -moz-animation: pulse 3s ease-out; - animation: pulse 3s ease-out; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-iteration-count: infinite; - margin: 0; - padding: 0; - margin-top: -7px; - margin-left: -31px; - z-index: 1; - opacity: 0; } - #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse { - border: 0.7em solid #578EA9; } #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { opacity: 1; - margin-left: -3em; - border-radius: 10%; } + border-radius: 10%; + padding: 0 0.2em; + font-size: 12px; } #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name { padding: 0; margin: 0; @@ -2391,8 +2300,6 @@ float: left; display: inline-block; height: 60px; } - #conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon { - color: #578EA9; } #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions { padding: 0 0 0 0.3em; float: right; } @@ -2405,7 +2312,7 @@ width: 69%; padding: 0; } #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span { - font-size: 16px; + font-size: 14px; float: left; margin-right: 0.5em; } #conversejs #converse-roster .roster-contacts dd.odd { diff --git a/css/inverse.css b/css/inverse.css index c85450730..d678f7225 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -1260,61 +1260,6 @@ -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(0); - opacity: 0.0; } - 50% { - -webkit-transform: scale(0.5); - opacity: 0.0; } - 75% { - -webkit-transform: scale(0.8); - opacity: 0.5; } - 100% { - -webkit-transform: scale(1); - opacity: 0.0; } } -@-moz-keyframes pulse { - 0% { - -moz-transform: scale(0); - opacity: 0.0; } - 50% { - -moz-transform: scale(0.5); - opacity: 0.0; } - 75% { - -moz-transform: scale(0.8); - opacity: 0.5; } - 100% { - -moz-transform: scale(1); - opacity: 0.0; } } -@keyframes pulse { - 0% { - -webkit-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); - opacity: 0.0; } - 50% { - -webkit-transform: scale(0.5); - -moz-transform: scale(0.5); - -ms-transform: scale(0.5); - -o-transform: scale(0.5); - transform: scale(0.5); - opacity: 0.0; } - 75% { - -webkit-transform: scale(0.8); - -moz-transform: scale(0.8); - -ms-transform: scale(0.8); - -o-transform: scale(0.8); - transform: scale(0.8); - opacity: 0.5; } - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - opacity: 0.0; } } #converse-embedded-chat .spinner, #conversejs .spinner { -webkit-animation: spin 2s infinite, linear; @@ -2455,28 +2400,10 @@ body { margin: auto; padding: 0; width: 85%; } - #conversejs #converse-roster .roster-contacts dd .open-chat .pulse { - border: 0.5em solid #E77051; - background: transparent; - height: 16px; - width: 24px; - -webkit-animation: pulse 3s ease-out; - -moz-animation: pulse 3s ease-out; - animation: pulse 3s ease-out; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-iteration-count: infinite; - margin: 0; - padding: 0; - margin-left: -26px; - z-index: 1; - opacity: 0; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs { font-weight: bold; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { width: 70%; } - #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse { - border: 0.7em solid #578EA9; } #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { opacity: 1; border-radius: 10%; diff --git a/sass/_core.scss b/sass/_core.scss index efa357203..5e48262ed 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -91,25 +91,6 @@ } } - @include keyframes(pulse) { - 0% { - @include transform(scale(0)); - opacity: 0.0; - } - 50% { - @include transform(scale(0.5)); - opacity: 0.0; - } - 75% { - @include transform(scale(0.8)); - opacity: 0.5; - } - 100% { - @include transform(scale(1)); - opacity: 0.0; - } - } - .spinner { @include animation(spin 2s infinite, linear); display: block; diff --git a/sass/_roomslist.scss b/sass/_roomslist.scss index 1b845979f..34bfd8d15 100644 --- a/sass/_roomslist.scss +++ b/sass/_roomslist.scss @@ -1,10 +1,6 @@ #conversejs { #controlbox { .available-chatroom { - .pulse { - padding: 0; - margin: 0; - } &.unread-msgs { .msgs-indicator { border-radius: 10%; diff --git a/sass/_roster.scss b/sass/_roster.scss index 25579eeb4..1eda29c7b 100644 --- a/sass/_roster.scss +++ b/sass/_roster.scss @@ -122,31 +122,11 @@ margin: auto; padding: 0; width: 85%; - .pulse { - border: 0.5em solid $red; - background: transparent; - height: $font-size; - width: 1.5*$font-size; - @include animation(pulse 3s ease-out); - @include animation-iteration-count(infinite); - margin: 0; - padding: 0; - margin-left: -26px; - z-index: 1; - opacity: 0; - } &.unread-msgs { font-weight: bold; .contact-name { width: 70%; } - .avatar { - &.avatar-online { - .pulse { - border: 0.7em solid $link-color; - } - } - } } .msgs-indicator { diff --git a/src/templates/roster_item.html b/src/templates/roster_item.html index 822f4a2a5..ab50618b1 100644 --- a/src/templates/roster_item.html +++ b/src/templates/roster_item.html @@ -7,7 +7,6 @@ {{{fullname}}} {[ if (num_unread) { ]} {{{ num_unread }}} - {[ } ]} {[ if (allow_contact_removal) { ]}