Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #5705 from matrix-org/t3chguy/spaces4.3
Browse files Browse the repository at this point in the history
Iterate Space view and right panel
  • Loading branch information
t3chguy authored Mar 3, 2021
2 parents c7d4dfa + 85985db commit a8ff0fa
Show file tree
Hide file tree
Showing 19 changed files with 937 additions and 43 deletions.
2 changes: 2 additions & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
Expand Down Expand Up @@ -91,6 +92,7 @@
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
Expand Down
17 changes: 17 additions & 0 deletions res/css/structures/_RightPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,20 @@ limitations under the License.
mask-position: center;
}
}

.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;

.mx_BaseAvatar {
margin-right: 8px;
vertical-align: middle;
}

.mx_BaseAvatar_image {
border-radius: 8px;
}
}
84 changes: 84 additions & 0 deletions res/css/structures/_SpaceRoomView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,90 @@ $SpaceRoomViewInnerWidth: 428px;
padding: 8px 22px;
}
}

.mx_SpaceRoomView_landing_adminButtons {
margin-top: 32px;

.mx_AccessibleButton {
position: relative;
width: 160px;
height: 124px;
box-sizing: border-box;
padding: 72px 16px 0;
border-radius: 12px;
border: 1px solid $space-button-outline-color;
margin-right: 28px;
margin-bottom: 28px;
font-size: $font-14px;
display: inline-block;
vertical-align: bottom;

&:last-child {
margin-right: 0;
}

&:hover {
background-color: rgba(141, 151, 165, 0.1);
}

&::before, &::after {
position: absolute;
content: "";
left: 16px;
top: 16px;
height: 40px;
width: 40px;
border-radius: 20px;
}

&::after {
mask-position: center;
mask-size: 30px;
mask-repeat: no-repeat;
background: #ffffff; // white icon fill
}

&.mx_SpaceRoomView_landing_inviteButton {
&::before {
background-color: $accent-color;
}

&::after {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}

&.mx_SpaceRoomView_landing_addButton {
&::before {
background-color: #ac3ba8;
}

&::after {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}

&.mx_SpaceRoomView_landing_createButton {
&::before {
background-color: #368bd6;
}

&::after {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}

&.mx_SpaceRoomView_landing_settingsButton {
&::before {
background-color: #5c56f5;
}

&::after {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
}
}
}
}

.mx_SpaceRoomView_privateScope {
Expand Down
185 changes: 185 additions & 0 deletions res/css/views/dialogs/_AddExistingToSpaceDialog.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_AddExistingToSpaceDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}

.mx_AddExistingToSpaceDialog {
width: 480px;
color: $primary-fg-color;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;

.mx_Dialog_title {
display: flex;

.mx_BaseAvatar {
display: inline-flex;
margin: 5px 16px 5px 5px;
vertical-align: middle;
}

.mx_BaseAvatar_image {
border-radius: 8px;
margin: 0;
vertical-align: unset;
}

> div {
> h1 {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
margin: 0;
}

.mx_AddExistingToSpaceDialog_onlySpace {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
}
}

.mx_Dropdown_input {
border: none;

> .mx_Dropdown_option {
padding-left: 0;
flex: unset;
height: unset;
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;

.mx_BaseAvatar {
display: none;
}
}

.mx_Dropdown_menu {
.mx_AddExistingToSpaceDialog_dropdownOptionActive {
color: $accent-color;
padding-right: 32px;
position: relative;

&::before {
content: '';
width: 20px;
height: 20px;
top: 8px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
}
}
}
}

.mx_SearchBox {
margin: 0;
}

.mx_AddExistingToSpaceDialog_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
color: $notice-primary-color;
margin-bottom: 28px;
}

.mx_AddExistingToSpaceDialog_content {
.mx_AddExistingToSpaceDialog_noResults {
margin-top: 24px;
}
}

.mx_AddExistingToSpaceDialog_section {
margin-top: 24px;

> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}

.mx_AddExistingToSpaceDialog_entry {
display: flex;
margin-top: 12px;

.mx_BaseAvatar {
margin-right: 12px;
}

.mx_AddExistingToSpaceDialog_entry_name {
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
}

.mx_FormButton {
min-width: 92px;
font-weight: normal;
box-sizing: border-box;
}
}
}

.mx_AddExistingToSpaceDialog_section_spaces {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}

.mx_AddExistingToSpaceDialog_footer {
display: flex;
margin-top: 32px;

> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;

> * {
vertical-align: middle;
}
}

.mx_AccessibleButton {
display: inline-block;
}

.mx_AccessibleButton_kind_link {
padding: 0;
}
}

.mx_FormButton {
padding: 8px 22px;
}
}
55 changes: 55 additions & 0 deletions res/css/views/dialogs/_SpaceSettingsDialog.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_SpaceSettingsDialog {
width: 480px;
color: $primary-fg-color;

.mx_SpaceSettings_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
color: $notice-primary-color;
margin-bottom: 28px;
}

.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
}

.mx_AccessibleButton_kind_danger {
margin-top: 28px;
}

.mx_SpaceSettingsDialog_buttons {
display: flex;
margin-top: 64px;

.mx_AccessibleButton {
display: inline-block;
}

.mx_AccessibleButton_kind_link {
margin-left: auto;
}
}

.mx_FormButton {
padding: 8px 22px;
}
}
1 change: 1 addition & 0 deletions res/css/views/rooms/_MemberInfo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
margin-top: 8px;
}

.mx_MemberInfo_name {
Expand Down
6 changes: 6 additions & 0 deletions res/css/views/rooms/_MemberList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ limitations under the License.
.mx_AutoHideScrollbar {
flex: 1 1 0;
}

.mx_RightPanel_scopeHeader {
// vertically align with position on other right panel cards
// to prevent it bouncing as user navigates right panel
margin-top: -8px;
}
}

.mx_GroupMemberList_query,
Expand Down
Loading

0 comments on commit a8ff0fa

Please sign in to comment.