Improved focused styling

This commit is contained in:
djmaze 2021-07-21 21:54:07 +02:00
parent 5590fd4860
commit b16b184ac9
6 changed files with 14 additions and 12 deletions

View file

@ -198,13 +198,9 @@ html.rl-no-preview-pane {
}
}
&.message-focused {
.b-message-list-wrapper {
background-color: #000;
}
.b-content {
opacity: 0.97;
}
&.focused .b-message-list-wrapper {
background-color: #000;
border-color: #9d9d9d;
}
}

View file

@ -458,7 +458,7 @@
}
}
&.message-focused .b-content {
&.focused .b-content {
z-index: 101;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-color: darken(@rlMainDarkColor, 5%);

View file

@ -838,8 +838,10 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
return false;
});
shortcuts.add('tab,arrowright', '', Scope.MessageList, () => {
MessageUserStore.message() && AppUserStore.focusedState(Scope.MessageView);
return false;
if (MessageUserStore.message()){
AppUserStore.focusedState(Scope.MessageView);
return false;
}
});
shortcuts.add('arrowleft', 'meta', Scope.MessageView, ()=>false);

View file

@ -1,5 +1,5 @@
<div id="rl-sub-left" class="messageList g-ui-user-select-none"
data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused() }">
data-bind="css: {'message-selected': isMessageSelected, 'focused': messageListFocused() }">
<div class="toolbar">
<div class="btn-toolbar">
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: hideLeft, visible: !leftPanelDisabled()"></a>

View file

@ -1,5 +1,5 @@
<div id="rl-sub-right">
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': messageFocused}">
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'focused': messageFocused}">
<div class="toolbar top-toolbar g-ui-user-select-none">
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">

View file

@ -144,3 +144,7 @@
.b-admin-about .rl-logo {
filter: drop-shadow(0 0 1px #FFF);
}
.b-folders .e-item a.focused {
background-color: #111;
}