mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
ef4b4da2a3
This makes the "x" in the search bar always visible when there is text in the search box, even if the mouse is not hovering, hopefully making for a clearer UI around search and resolving issue #741 The implementation adds the "x.svg" as a background image to the search box when it is classed with .active, in addition to the -webkit-search-cancel-button, which is still there for the actual functionality but only appears on mouse hover (one tiny snag is that coloring appears slightly different on hover, at least on my screen - don't know if this is a problem). I accounted for both ltr and rtl text-direction by using getComputedStyle(...).direction to detect from the input's dir="auto" - if there's a more elegant way to do this, please suggest. An ideal solution would use the :dir pseudo-class but it's not implemented in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir For now, I added the direction-checking to inbox_view.js. I see that input.search is also used in new_group_update_view.js and recipient_input_view.js but neither of these views seem to be in use (?) and they don't set the .active class anyway, so I ignored them. Update: Amended version a few hours later - fixed and manually tested color and spacing for iOS and Android Dark themes. Also made some new SASS variables to make things DRYer and fixed my tab size.
271 lines
4.7 KiB
SCSS
271 lines
4.7 KiB
SCSS
.conversation-stack,
|
|
.new-conversation, .inbox, .gutter {
|
|
height: 100%;
|
|
}
|
|
|
|
.expired {
|
|
.conversation-stack, .gutter {
|
|
height: calc(100% - 56px);
|
|
}
|
|
}
|
|
|
|
.scrollable {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.gutter {
|
|
color: $grey_d;
|
|
float: left;
|
|
width: 300px;
|
|
.content {
|
|
background-color: $grey_l;
|
|
height: calc(100% - #{$header-height} - #{$search-height});
|
|
}
|
|
|
|
.conversations {
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.socket-status {
|
|
float: right;
|
|
line-height: $button-height;
|
|
|
|
* {
|
|
display: inline;
|
|
padding-left: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
.connecting .icon {
|
|
background-color: $blue;
|
|
}
|
|
.closing {
|
|
background-color: $blue_l;
|
|
}
|
|
.closed {
|
|
background: url('/images/error_red.png') no-repeat left center;
|
|
}
|
|
}
|
|
|
|
.conversation-stack {
|
|
padding-left: 300px;
|
|
|
|
.conversation {
|
|
display: none;
|
|
}
|
|
.conversation:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.conversation-header {
|
|
height: $header-height;
|
|
text-align: center;
|
|
color: white;
|
|
background-color: #999999;
|
|
transition: background-color 0.5s;
|
|
border-bottom: 1px solid rgba(0,0,0,0.2);
|
|
|
|
.avatar {
|
|
margin-bottom: -30px;
|
|
border: solid 2px white;
|
|
z-index: 10;
|
|
width: 48px;
|
|
height: 48px;
|
|
line-height: 44px;
|
|
position: relative;
|
|
}
|
|
}
|
|
.inactive .conversation-header {
|
|
background-color: $grey_l !important;
|
|
color: $grey_d;
|
|
border-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.tool-bar {
|
|
position: relative;
|
|
.search-icon {
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
width: 24px;
|
|
height: 100%;
|
|
-webkit-mask: url('/images/search.svg') no-repeat left center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: #ccc;
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
input.search {
|
|
border: none;
|
|
padding: 0 $search-padding-right 0 $search-padding-left;
|
|
margin: 0;
|
|
outline: 0;
|
|
height: $search-height;
|
|
line-height: $search-height;
|
|
width: 100%;
|
|
border: solid 1px $grey_l;
|
|
outline-offset: -2px;
|
|
font-size: inherit;
|
|
position: relative;
|
|
|
|
&.active {
|
|
outline: solid 1px $blue;
|
|
background-image: url('/images/x.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: $search-x-size;
|
|
|
|
&.ltr {
|
|
background-position : right $search-padding-right center;
|
|
}
|
|
|
|
&.rtl {
|
|
background-position : left $search-padding-left center;
|
|
}
|
|
}
|
|
|
|
&::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
display: block;
|
|
width: $search-x-size;
|
|
height: $search-x-size;
|
|
background: url('/images/x.svg') no-repeat center;
|
|
background-size: cover;
|
|
}
|
|
|
|
&::-webkit-search-cancel-button:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.last-timestamp {
|
|
font-size: smaller;
|
|
float: right;
|
|
margin: 0 10px;
|
|
color: $grey;
|
|
}
|
|
|
|
.new-contact {
|
|
display: none;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
.contact-details .number {
|
|
display: block;
|
|
font-style: italic;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
&.valid {
|
|
opacity: 1.0
|
|
}
|
|
}
|
|
|
|
.index {
|
|
color: $grey_d;
|
|
|
|
.gutter .new-group-update-form {
|
|
display: none;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.last-message {
|
|
margin: 6px 0 0;
|
|
font-size: $font-size-small;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.gutter .timestamp {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 12px;
|
|
color: $grey;
|
|
}
|
|
|
|
}
|
|
|
|
.conversations .unread .contact-details {
|
|
.name,
|
|
.last-message,
|
|
.last-timestamp {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
margin: 10px;
|
|
padding: 1em;
|
|
border-radius: $border-radius;
|
|
color: white;
|
|
border: 2px dashed white;
|
|
|
|
h3 {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&.firstRun {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 302px;
|
|
width: 225px;
|
|
|
|
&:before, &:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: -35px;
|
|
width: 0;
|
|
height: 0;
|
|
border: solid 10px white;
|
|
border-color: transparent white transparent transparent;
|
|
transform: scaleX(2.5) scaleY(0.75);
|
|
}
|
|
&:after {
|
|
border-color: transparent #2eace0 transparent transparent;
|
|
left: -30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation.placeholder {
|
|
text-align: center;
|
|
.content {
|
|
padding: 100px 36px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: large;
|
|
}
|
|
}
|
|
.contact.placeholder {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
background: transparent;
|
|
color: white;
|
|
border: 2px dashed white;
|
|
overflow: visible;
|
|
p { color: white; }
|
|
&:before, &:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 15px;
|
|
width: 0;
|
|
height: 0;
|
|
border: solid 10px white;
|
|
border-color: transparent transparent white transparent;
|
|
transform: scaleY(2.5) scaleX(0.75);
|
|
}
|
|
&:after {
|
|
border-color: transparent transparent #2eace0 transparent;
|
|
top: -30px;
|
|
}
|
|
}
|