Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replies styling #6117

Closed
wants to merge 19 commits into from
Closed

Replies styling #6117

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
5b6baa4
Style .mx_Quote blockquote
t3chguy Feb 10, 2018
55bbc13
ignore a bunch of styles for EventTile's in Quotes to prevent hover-mess
t3chguy Feb 10, 2018
417fabc
Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:vec…
t3chguy Feb 10, 2018
6cafa7d
s/Quote/Reply
t3chguy Feb 10, 2018
f6d57de
s/mx_EventTile_quote/mx_EventTile_reply/
t3chguy Feb 10, 2018
dd2d1b7
fix Reply timestamps and e2e-icons jumping on hover
t3chguy Feb 10, 2018
49b3369
Merge branch 'develop' into t3chguy/m.relates_to
t3chguy Feb 16, 2018
dd90935
Merge in develop
t3chguy Feb 16, 2018
c2d7a44
Merge remote-tracking branch 'origin/t3chguy/m.relates_to' into t3chg…
t3chguy Feb 16, 2018
85bd3f5
Refactor CSS to remove all `:not` selectors
t3chguy Feb 16, 2018
6ebbdea
s/quote_event/reply_to_event/
t3chguy Feb 19, 2018
b893065
s/Reply/ReplyThread/
t3chguy Feb 20, 2018
6dbc613
restrict to m.text for now
t3chguy Feb 20, 2018
5154d36
explicit depth in CSS and remove duplicate rule, to match Lúke's suggest
t3chguy Mar 10, 2018
870c041
Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:vec…
t3chguy Mar 26, 2018
637895b
now it works on any m.room.message
t3chguy Mar 26, 2018
d8e6db5
Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:vec…
t3chguy Apr 4, 2018
fe7b230
Merge branch 'develop' of github.com:vector-im/riot-web into t3chguy/…
t3chguy Apr 12, 2018
9321335
hook up collapseReplyThread context button and i18n it
t3chguy Apr 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/skins/vector/css/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@import "./matrix-react-sdk/views/elements/_EditableItemList.scss";
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
@import "./matrix-react-sdk/views/elements/_Quote.scss";
@import "./matrix-react-sdk/views/elements/_Reply.scss";
@import "./matrix-react-sdk/views/elements/_RichText.scss";
@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
@import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
Expand Down Expand Up @@ -65,7 +65,7 @@
@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
@import "./matrix-react-sdk/views/rooms/_ReplyPreview.scss";
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
Expand Down
10 changes: 8 additions & 2 deletions ...trix-react-sdk/views/elements/_Quote.scss → ...trix-react-sdk/views/elements/_Reply.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_Quote .mx_DateSeparator {
.mx_Reply .mx_DateSeparator {
font-size: 1em !important;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}

.mx_Quote_show {
.mx_Reply_show {
cursor: pointer;
}

blockquote.mx_Reply {
margin-left: 0;
padding-left: 10px;
border-left: 4px solid $blockquote-bar-color;
}
28 changes: 14 additions & 14 deletions src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ limitations under the License.
line-height: 22px;
}

.mx_EventTile_quote {
.mx_EventTile_reply {
margin-right: 10px;
}

Expand All @@ -113,13 +113,13 @@ limitations under the License.
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected > .mx_EventTile_line {
.mx_EventTile_selected > .mx_EventTile_line:not(.mx_EventTile_reply) {
border-left: $accent-color 5px solid;
padding-left: 60px;
background-color: $event-selected-color;
}

.mx_EventTile:hover .mx_EventTile_line:not(.mx_EventTile_quote),
.mx_EventTile:hover .mx_EventTile_line:not(.mx_EventTile_reply),
.mx_EventTile.menu .mx_EventTile_line
{
background-color: $event-selected-color;
Expand Down Expand Up @@ -302,26 +302,26 @@ limitations under the License.
padding-left: 5px;
}

.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line:not(.mx_EventTile_reply),
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line:not(.mx_EventTile_reply) {
padding-left: 60px;
}

.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line:not(.mx_EventTile_reply),
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line:not(.mx_EventTile_reply),
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line:not(.mx_EventTile_reply) {
padding-left: 78px;
}

.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line:not(.mx_EventTile_reply) {
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line:not(.mx_EventTile_reply) {
border-left: $e2e-unverified-color 5px solid;
}

.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line:not(.mx_EventTile_reply) > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line:not(.mx_EventTile_reply) > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
Expand All @@ -332,8 +332,8 @@ limitations under the License.
}
*/

.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line:not(.mx_EventTile_reply) > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line:not(.mx_EventTile_reply) > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}
Expand Down
12 changes: 6 additions & 6 deletions ...-react-sdk/views/rooms/_QuotePreview.scss → ...-react-sdk/views/rooms/_ReplyPreview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.mx_QuotePreview {
.mx_ReplyPreview {
position: absolute;
bottom: 0;
z-index: 1000;
Expand All @@ -11,26 +11,26 @@
overflow: auto
}

.mx_QuotePreview_section {
.mx_ReplyPreview_section {
border-bottom: 1px solid $primary-hairline-color;
}

.mx_QuotePreview_header {
.mx_ReplyPreview_header {
margin: 12px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}

.mx_QuotePreview_title {
.mx_ReplyPreview_title {
float: left;
}

.mx_QuotePreview_cancel {
.mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
}

.mx_QuotePreview_clear {
.mx_ReplyPreview_clear {
clear: both;
}