imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branches 'develop' and 't3chguy/notifications0' of github.com:matrix-org/matrix-react-sdk into t3chguy/notifications0

Browse source
This commit is contained in:
Michael Telatynski 2020-06-26 15:35:36 +01:00
commit cf3c914382
53 changed files with 1569 additions and 765 deletions
Download patch file Download diff file Expand all files Collapse all files

10
res/css/_common.scss
View file

@ -428,6 +428,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 8px;
padding: 0px;
box-shadow: none;
/* Don't show scroll-bars on spinner dialogs */
overflow-x: hidden;
overflow-y: hidden;
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
@ -596,14 +600,14 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
&:last-child {
padding-bottom: 20px;
padding-bottom: 16px;
}
}
.mx_IconizedContextMenu_optionList {
// the notFirst class is for cases where the optionList might be under a header of sorts.
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
margin-top: 20px;
margin-top: 12px;
// This is a bit of a hack when we could just use a simple border-top property,
// however we have a (kinda) good reason for doing it this way: we need opacity.
@ -634,7 +638,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
li {
margin: 0;
padding: 20px 0 0;
padding: 12px 0 0;
.mx_AccessibleButton {
text-decoration: none;

2
res/css/_components.scss
View file

@ -30,7 +30,7 @@
@import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserMenuButton.scss";
@import "./structures/_UserMenu.scss";
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";

52
res/css/structures/_LeftPanel2.scss
View file

@ -38,6 +38,12 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
// TagPanel handles its own CSS
}
&:not(.mx_LeftPanel2_hasTagPanel) {
.mx_LeftPanel2_roomListContainer {
width: 100%;
}
}
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel2_roomListContainer {
@ -48,13 +54,13 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
flex-direction: column;
.mx_LeftPanel2_userHeader {
padding: 14px 12px 20px; // 14px top, 12px sides, 20px bottom
padding: 12px 12px 20px; // 12px top, 12px sides, 20px bottom
// Create another flexbox column for the rows to stack within
display: flex;
flex-direction: column;
// There's 2 rows when breadcrumbs are present: the top bit and the breadcrumbs
// This is basically just breadcrumbs. The row above that is handled by the UserMenu
.mx_LeftPanel2_headerRow {
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
@ -62,31 +68,6 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
align-items: center;
}
.mx_LeftPanel2_userAvatarContainer {
position: relative; // to make default avatars work
margin-right: 8px;
.mx_LeftPanel2_userAvatar {
border-radius: 32px; // should match avatar size
}
}
.mx_LeftPanel2_userName {
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_LeftPanel2_headerButtons {
// No special styles: the rest of the layout happens to make it work.
}
.mx_LeftPanel2_breadcrumbsContainer {
width: 100%;
overflow: hidden;
@ -152,21 +133,16 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
width: calc(68px + $tagPanelWidth) !important;
&.mx_LeftPanel2_hasTagPanel {
width: calc(68px + $tagPanelWidth) !important;
}
&:not(.mx_LeftPanel2_hasTagPanel) {
width: 68px !important;
}
.mx_LeftPanel2_roomListContainer {
width: 68px;
.mx_LeftPanel2_userHeader {
.mx_LeftPanel2_headerRow {
justify-content: center;
}
.mx_LeftPanel2_userAvatarContainer {
margin-right: 0;
}
}
.mx_LeftPanel2_filterContainer {
// Organize the flexbox into a centered column layout
flex-direction: column;

89
res/css/structures/_UserMenuButton.scss → res/css/structures/_UserMenu.scss
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserMenuButton {
> span {
.mx_UserMenu {
.mx_UserMenu_headerButtons {
width: 16px;
height: 16px;
position: relative;
@ -35,22 +35,71 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
}
.mx_UserMenu_row {
// Create a row-based flexbox to ensure items stay aligned correctly.
display: flex;
align-items: center;
.mx_UserMenu_userAvatarContainer {
position: relative; // to make default avatars work
margin-right: 8px;
height: 32px; // to remove the unknown 4px gap the browser puts below it
.mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size
}
}
.mx_UserMenu_userName {
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
flex: 1;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_headerButtons {
// No special styles: the rest of the layout happens to make it work.
}
}
&.mx_UserMenu_minimized {
.mx_UserMenu_userHeader {
.mx_UserMenu_row {
justify-content: center;
}
.mx_UserMenu_userAvatarContainer {
margin-right: 0;
}
}
}
}
.mx_UserMenuButton_contextMenu {
.mx_UserMenu_contextMenu {
width: 247px;
.mx_UserMenuButton_contextMenu_header {
.mx_UserMenu_contextMenu_redRow {
.mx_AccessibleButton {
color: $warning-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $warning-color;
}
}
.mx_UserMenu_contextMenu_header {
// Create a flexbox to organize the header a bit easier
display: flex;
align-items: center;
&:nth-child(n + 1) {
// The first header will have appropriate padding, subsequent ones need a margin.
margin-top: 10px;
}
.mx_UserMenuButton_contextMenu_name {
.mx_UserMenu_contextMenu_name {
// Create another flexbox of columns to handle large user IDs
display: flex;
flex-direction: column;
@ -67,19 +116,19 @@ limitations under the License.
white-space: nowrap;
}
.mx_UserMenuButton_contextMenu_displayName {
.mx_UserMenu_contextMenu_displayName {
font-weight: bold;
font-size: $font-15px;
line-height: $font-20px;
}
.mx_UserMenuButton_contextMenu_userId {
.mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
line-height: $font-24px;
}
}
.mx_UserMenuButton_contextMenu_themeButton {
.mx_UserMenu_contextMenu_themeButton {
min-width: 32px;
max-width: 32px;
width: 32px;
@ -113,31 +162,31 @@ limitations under the License.
}
}
.mx_UserMenuButton_iconHome::before {
.mx_UserMenu_iconHome::before {
mask-image: url('$(res)/img/feather-customised/home.svg');
}
.mx_UserMenuButton_iconBell::before {
.mx_UserMenu_iconBell::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg');
}
.mx_UserMenuButton_iconLock::before {
.mx_UserMenu_iconLock::before {
mask-image: url('$(res)/img/feather-customised/lock.svg');
}
.mx_UserMenuButton_iconSettings::before {
.mx_UserMenu_iconSettings::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_UserMenuButton_iconArchive::before {
.mx_UserMenu_iconArchive::before {
mask-image: url('$(res)/img/feather-customised/archive.svg');
}
.mx_UserMenuButton_iconMessage::before {
.mx_UserMenu_iconMessage::before {
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
}
.mx_UserMenuButton_iconSignOut::before {
.mx_UserMenu_iconSignOut::before {
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
}
}

2
res/css/views/elements/_InlineSpinner.scss
View file

@ -18,7 +18,7 @@ limitations under the License.
display: inline;
}
.mx_InlineSpinner img {
.mx_InlineSpinner_spin img {
margin: 0px 6px;
vertical-align: -3px;
}

10
res/css/views/elements/_Spinner.scss
View file

@ -23,6 +23,16 @@ limitations under the License.
flex: 1;
}
.mx_Spinner_spin img {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}

4
res/css/views/elements/_StyledCheckbox.scss
View file

@ -77,8 +77,8 @@ limitations under the License.
}
&:checked:disabled + label > .mx_Checkbox_background {
background-color: $muted-fg-color;
border-color: rgba($muted-fg-color, 0.5);
background-color: $accent-color;
border-color: $accent-color;
}
}
}

158
res/css/views/rooms/_RoomSublist2.scss
View file

@ -85,23 +85,30 @@ limitations under the License.
// ***************************
.mx_RoomSublist2_badgeContainer {
opacity: 0.8;
width: 16px;
margin-right: 5px; // aligns with the room tile's badge
// Create another flexbox row because it's super easy to position the badge this way.
display: flex;
align-items: center;
justify-content: center;
// Apply the width and margin to the badge so the container doesn't occupy dead space
.mx_NotificationBadge {
width: 16px;
margin-left: 8px; // same as menu+aux buttons
}
}
&:not(.mx_RoomSublist2_headerContainer_withAux) {
.mx_NotificationBadge {
margin-right: 4px; // just to push it over a bit, aligning it with the other elements
}
}
// Both of these buttons are hidden by default until the list is hovered
.mx_RoomSublist2_auxButton,
.mx_RoomSublist2_menuButton {
width: 0;
margin: 0;
visibility: hidden;
margin-left: 8px; // should be the same as the notification badge
position: relative;
width: 24px;
height: 24px;
border-radius: 32px;
&::before {
@ -118,6 +125,13 @@ limitations under the License.
}
}
// Hide the menu button by default
.mx_RoomSublist2_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist2_auxButton::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
}
@ -130,9 +144,9 @@ limitations under the License.
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
text-transform: uppercase;
opacity: 0.5;
line-height: $font-16px;
font-size: $font-12px;
font-weight: 600;
// Ellipsize any text overflow
text-overflow: ellipsis;
@ -142,11 +156,9 @@ limitations under the License.
.mx_RoomSublist2_collapseBtn {
display: inline-block;
position: relative;
// Default hidden
visibility: hidden;
width: 0;
height: 0;
width: 12px;
height: 12px;
margin-right: 8px;
&::before {
content: '';
@ -158,7 +170,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
background-color: $primary-fg-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
@ -226,6 +238,16 @@ limitations under the License.
.mx_RoomSublist2_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
}
&.mx_RoomSublist2_isCutting::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
}
}
// Class name comes from the ResizableBox component
@ -233,69 +255,34 @@ limitations under the License.
// so that selector is below and one level higher.
.react-resizable-handle {
cursor: ns-resize;
border-radius: 2px;
border-radius: 3px;
// Update RESIZE_HANDLE_HEIGHT if this changes
height: 4px;
// This is positioned directly below the 'show more' button.
position: absolute;
bottom: 0;
left: 0;
right: 0;
// This is to visually align the bar in the list. Should be 12px from
// either side of the list. We define this after the positioning to
// trick the browser.
margin-left: 4px;
margin-right: 4px;
// Together, these make the bar 64px wide
left: calc(50% - 32px);
right: calc(50% - 32px);
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.react-resizable-handle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}
// The aforementioned selector for the hover state.
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.react-resizable-handle {
opacity: 0.2;
// Update the render() function for RoomSublist2 if this changes
border: 2px solid $primary-fg-color;
}
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer {
// If the header doesn't have an aux button we still need to hide the badge for
// the menu button.
.mx_RoomSublist2_badgeContainer {
// Completely hide the badge
width: 0;
margin: 0;
visibility: hidden;
}
&:not(.mx_RoomSublist2_headerContainer_withAux) {
// The menu button will be the rightmost button, so make it correctly aligned.
.mx_RoomSublist2_menuButton {
margin-right: 1px; // line it up with the badges on the room tiles
}
}
// Both of these buttons have circled backgrounds and are visible at this point,
// so make them so.
.mx_RoomSublist2_auxButton,
.mx_RoomSublist2_menuButton {
width: 24px;
height: 24px;
margin-left: 16px;
visibility: visible;
background-color: $roomlist2-button-bg-color;
}
}
.mx_RoomSublist2_headerContainer {
.mx_RoomSublist2_headerText {
.mx_RoomSublist2_collapseBtn {
visibility: visible;
width: 12px;
height: 12px;
margin-right: 4px;
}
}
&.mx_RoomSublist2_hasMenuOpen,
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
visibility: visible;
width: 24px;
margin-left: 8px;
}
}
@ -344,7 +331,12 @@ limitations under the License.
}
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.mx_RoomSublist2_menuButton {
height: 16px;
}
&.mx_RoomSublist2_hasMenuOpen,
& > .mx_RoomSublist2_headerContainer:hover {
.mx_RoomSublist2_menuButton {
visibility: visible;
position: absolute;
@ -365,7 +357,7 @@ limitations under the License.
}
}
.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
&.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
.mx_RoomSublist2_menuButton {
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
}
@ -374,27 +366,6 @@ limitations under the License.
}
}
// We have a hover style on the room list with no specific list hovered, so account for that
.mx_RoomList2:hover .mx_RoomSublist2:not(.mx_RoomSublist2_minimized),
.mx_RoomSublist2_hasMenuOpen:not(.mx_RoomSublist2_minimized) {
.mx_RoomSublist2_headerContainer_withAux {
.mx_RoomSublist2_badgeContainer {
// Completely hide the badge
width: 0;
margin: 0;
visibility: hidden;
}
.mx_RoomSublist2_auxButton {
// Show the aux button, but not the list button
width: 24px;
height: 24px;
margin-right: 1px; // line it up with the badges on the room tiles
visibility: visible;
}
}
}
.mx_RoomSublist2_contextMenu {
padding: 20px 16px;
width: 250px;
@ -404,6 +375,7 @@ limitations under the License.
margin-bottom: 16px;
margin-right: 16px; // additional 16px
border: 1px solid $roomsublist2-divider-color;
opacity: 0.1;
}
.mx_RoomSublist2_contextMenu_title {

8
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -209,9 +209,15 @@ limitations under the License.
}
.mx_AppearanceUserSettingsTab_Advanced {
color: $primary-fg-color;
> * {
margin-bottom: 16px;
}
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: $accent-color;
margin-bottom: 16px;
cursor: pointer;
}
.mx_AppearanceUserSettingsTab_systemFont {