mirror of
https://github.com/element-hq/element-web
synced 2024-10-24 19:55:54 +03:00
Merge branch 'develop' into travis/better-room-sorting
This commit is contained in:
Travis Ralston
commit
7b732ceb43
26 changed files with 199 additions and 281 deletions
|
|
@ -82,13 +82,6 @@ input[type=search]::-webkit-search-results-decoration {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.input[type=text]::-webkit-input-placeholder,
|
||||
.input[type=text]::-moz-placeholder,
|
||||
.input[type=search]::-webkit-input-placeholder,
|
||||
.input[type=search]::-moz-placeholder {
|
||||
color: #a5aab2;
|
||||
}
|
||||
|
||||
// Override Firefox's UA style so we get a consistent look across browsers
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
|
|
@ -111,6 +104,71 @@ textarea {
|
|||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
// .mx_textinput is a container for a text input
|
||||
// + some other controls like buttons, ...
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #c1c1c1;
|
||||
// these things should probably not be defined
|
||||
// globally
|
||||
margin: 9px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_textinput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> input[type=text],
|
||||
> input[type=search] {
|
||||
border: none;
|
||||
flex: 1;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
|
||||
.mx_textinput input::placeholder {
|
||||
color: $roomsublist-label-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
/*** panels ***/
|
||||
.dark-panel {
|
||||
background-color: $dark-panel-bg-color;
|
||||
}
|
||||
|
||||
.dark-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $input-darker-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.light-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-lighter-fg-color;
|
||||
background-color: $input-lighter-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent ugly dotted highlight around selected elements in Firefox */
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -49,11 +49,11 @@ limitations under the License.
|
|||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomheader-addroom-color;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-color: $accent-fg-color;
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask: url('$(res)/img/icons-create-room.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
|
|
|
|||
|
|
@ -83,15 +83,24 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSubList_addRoom {
|
||||
background-color: $roomheader-addroom-color;
|
||||
color: $roomsublist-background;
|
||||
background-image: url('$(res)/img/icons-room-add.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
border-radius: 10px; // 16/2 + 2 padding
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
background-clip: content-box;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask: url('$(res)/img/icons-room-add.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badgeHighlight {
|
||||
|
|
|
|||
|
|
@ -45,14 +45,14 @@ limitations under the License.
|
|||
.mx_EventTile .mx_SenderProfile {
|
||||
color: $primary-fg-color;
|
||||
font-size: 14px;
|
||||
display: block; /* anti-zalgo, with overflow hidden */
|
||||
display: inline-block; /* anti-zalgo, with overflow hidden */
|
||||
overflow-y: hidden;
|
||||
cursor: pointer;
|
||||
padding-left: 65px; /* left gutter */
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
margin: 0px;
|
||||
line-height: 22px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile .mx_Flair {
|
||||
|
|
@ -408,7 +408,13 @@ limitations under the License.
|
|||
.mx_EventTile_content .markdown-body code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
pre, code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_pre_container {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@ limitations under the License.
|
|||
height: 16px;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
mask-image: url('$(res)/img/minimise.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $rightpanel-button-color;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_name h2 {
|
||||
|
|
|
|||
|
|
@ -255,14 +255,29 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_markdown {
|
||||
height: 17px;
|
||||
width: 30px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_markdownIndicator {
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
width: 12px;
|
||||
padding: 4px 4px 4px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_markdown,
|
||||
.mx_MessageComposer_input_markdownIndicator {
|
||||
cursor: pointer;
|
||||
mask-image: url('$(res)/img/markdown.svg');
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $composer-button-color;
|
||||
|
||||
&.mx_MessageComposer_markdownDisabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 569 B |
|
|
@ -1,29 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>D335F9E8-C813-47D7-B1BE-C8DEF2C8214F</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<text id="text-1" font-family="markdown" font-size="14" font-weight="normal" fill="#DDDDDD">
|
||||
<tspan x="829.125" y="759"></tspan>
|
||||
</text>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
|
||||
<g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-829.000000, -745.000000)" fill="#DDDDDD">
|
||||
<g id="button_md_off">
|
||||
<use filter="url(#filter-2)" xlink:href="#text-1"></use>
|
||||
<use filter="url(#filter-3)" xlink:href="#text-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 483 B |
|
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>2A63B135-4281-4FBB-A88C-012AE22E9594</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="14" font-family="markdown" font-weight="normal">
|
||||
<g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-829.000000, -745.000000)" fill="#4A4A4A">
|
||||
<text id="button_markdown_on">
|
||||
<tspan x="829.125" y="759"></tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 820 B |
Binary file not shown.
|
Before Width: | Height: | Size: 906 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
3
res/img/markdown.svg
Normal file
3
res/img/markdown.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="45" viewBox="0 0 69 45" width="69" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m6 0h57c3.3137085 0 6 2.6862915 6 6v33c0 3.3137085-2.6862915 6-6 6h-57c-3.3137085 0-6-2.6862915-6-6v-33c0-3.3137085 2.6862915-6 6-6zm23.3703704 11c-.6518551 0-1.1841955.3860101-1.5970371 1.158042l-7.7244444 14.7006993-7.7896296-14.7006993c-.4128416-.7720319-.9560461-1.158042-1.6296297-1.158042-.4780271 0-.86913425.1554763-1.1733333.4664336-.30419906.3109572-.4562963.7130511-.4562963 1.2062937v19.7510489c0 .4717973.13580111.8524461.40740741 1.1419581.27160629.2895119.63555329.4342657 1.09185189.4342657.478027 0 .8474061-.1393925 1.1081481-.4181818.2607421-.2787893.3911111-.6647994.3911111-1.158042v-14.8293706l6.4207408 11.8699301c.4128415.7505865.9451819 1.1258741 1.597037 1.1258741s1.1841955-.3752876 1.597037-1.1258741l6.3881482-11.9986014v14.9580419c0 .4932426.130369.8792527.3911111 1.158042.260742.2787893.619257.4181818 1.0755555.4181818.4780271 0 .8528382-.1393925 1.1244445-.4181818s.4074074-.6647994.4074074-1.158042v-19.7510489c0-.4932426-.1520972-.8953365-.4562963-1.2062937-.304199-.3109573-.6953062-.4664336-1.1733333-.4664336zm18.1296296 17.8786797-7.3180195-7.3180195c-.5857864-.5857865-1.5355339-.5857865-2.1213203 0-.5857865.5857864-.5857865 1.5355339 0 2.1213203l9.8994949 9.899495c.3056756.3056756.7104567.4518432 1.1109127.438503.400456.0133402.8052371-.1328274 1.1109127-.438503l9.899495-9.899495c.5857864-.5857864.5857864-1.5355339 0-2.1213203-.5857865-.5857865-1.535534-.5857865-2.1213204 0l-7.4601551 7.4601551v-16.5208153c0-.8284271-.6715729-1.5-1.5-1.5s-1.5.6715729-1.5 1.5z" fill="#d8d8d8" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
// unified palette
|
||||
// try to use these colors when possible
|
||||
$bg-color: #181b21;
|
||||
$base-color: #1b1f25;
|
||||
$base-color: #15171b;
|
||||
$base-text-color: #edf3ff;
|
||||
$header-panel-bg-color: #22262e;
|
||||
$header-panel-border-color: #000000;
|
||||
|
|
@ -25,6 +25,8 @@ $focus-bg-color: $room-highlight-color;
|
|||
|
||||
$mention-user-pill-bg-color: $warning-color;
|
||||
$other-user-pill-bg-color: $room-highlight-color;
|
||||
$rte-room-pill-color: $room-highlight-color;
|
||||
$rte-group-pill-color: $room-highlight-color;
|
||||
|
||||
// informational plinth
|
||||
$info-plinth-bg-color: $header-panel-bg-color;
|
||||
|
|
@ -38,7 +40,7 @@ $tagpanel-bg-color: $base-color;
|
|||
$selected-color: $room-highlight-color;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: $search-bg-color;
|
||||
$event-selected-color: #111316;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: $header-panel-border-color;
|
||||
|
|
@ -69,6 +71,11 @@ $avatar-bg-color: $bg-color;
|
|||
|
||||
$h3-color: $primary-fg-color;
|
||||
|
||||
$dialog-title-fg-color: #454545;
|
||||
$dialog-backdrop-color: #000;
|
||||
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
||||
$dialog-close-fg-color: #9fa9ba;
|
||||
|
||||
$dialog-background-bg-color: $header-panel-bg-color;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
|
|
@ -82,7 +89,8 @@ $settings-subsection-fg-color: $text-secondary-color;
|
|||
|
||||
$topleftmenu-color: $text-primary-color;
|
||||
$roomheader-color: $text-primary-color;
|
||||
$roomheader-addroom-color: $header-panel-text-primary-color;
|
||||
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
|
||||
$roomheader-addroom-fg-color: $text-primary-color;
|
||||
$tagpanel-button-color: $header-panel-text-primary-color;
|
||||
$roomheader-button-color: $header-panel-text-primary-color;
|
||||
$groupheader-button-color: $header-panel-text-primary-color;
|
||||
|
|
@ -103,7 +111,7 @@ $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
|
|||
|
||||
$panel-divider-color: $header-panel-border-color;
|
||||
|
||||
$widget-menu-bar-bg-color: $search-bg-color;
|
||||
$widget-menu-bar-bg-color: $header-panel-bg-color;
|
||||
|
||||
// event redaction
|
||||
$event-redacted-fg-color: #606060;
|
||||
|
|
@ -131,61 +139,9 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
|
|||
|
||||
$room-warning-bg-color: $header-panel-bg-color;
|
||||
|
||||
$dark-panel-bg-color: $header-panel-bg-color;
|
||||
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
|
||||
|
||||
/*** form elements ***/
|
||||
|
||||
// .mx_textinput is a container for a text input
|
||||
// + some other controls like buttons, ...
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat {
|
||||
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border: 1px solid #c1c1c1;
|
||||
}
|
||||
|
||||
.mx_textinput {
|
||||
> input[type=text],
|
||||
> input[type=search] {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
input::placeholder {
|
||||
color: $roomsublist-label-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** panels ***/
|
||||
.dark-panel {
|
||||
background-color: $header-panel-bg-color;
|
||||
}
|
||||
|
||||
.dark-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $input-darker-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.light-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-lighter-fg-color;
|
||||
background-color: $input-lighter-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ $notice-secondary-color: #61708b;
|
|||
$header-panel-bg-color: #f2f5f8;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #454545;
|
||||
$primary-fg-color: #2e2f32;
|
||||
$primary-bg-color: #ffffff;
|
||||
|
||||
// used for dialog box text
|
||||
|
|
@ -54,7 +54,7 @@ $preview-bar-bg-color: #f7f7f7;
|
|||
$secondary-accent-color: #f2f5f8;
|
||||
$tertiary-accent-color: #d3efe1;
|
||||
|
||||
$tagpanel-bg-color: #2e3649;
|
||||
$tagpanel-bg-color: #27303a;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
|
@ -105,7 +105,7 @@ $avatar-bg-color: #ffffff;
|
|||
|
||||
$h3-color: #3d3b39;
|
||||
|
||||
$dialog-title-fg-color: #454545;
|
||||
$dialog-title-fg-color: #2e2f32;
|
||||
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
|
||||
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
||||
$dialog-close-fg-color: #9fa9ba;
|
||||
|
|
@ -132,7 +132,7 @@ $settings-profile-placeholder-bg-color: #e7e7e7;
|
|||
$settings-profile-overlay-bg-color: #000;
|
||||
$settings-profile-overlay-placeholder-bg-color: transparent;
|
||||
$settings-profile-overlay-fg-color: #fff;
|
||||
$settings-profile-overlay-placeholder-fg-color: #454545;
|
||||
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
|
||||
$settings-subsection-fg-color: #61708b;
|
||||
|
||||
$voip-decline-color: #f48080;
|
||||
|
|
@ -145,7 +145,8 @@ $rte-group-pill-color: #aaa;
|
|||
|
||||
$topleftmenu-color: #212121;
|
||||
$roomheader-color: #45474a;
|
||||
$roomheader-addroom-color: #91A1C0;
|
||||
$roomheader-addroom-bg-color: #91A1C0;
|
||||
$roomheader-addroom-fg-color: $accent-fg-color;
|
||||
$tagpanel-button-color: #91A1C0;
|
||||
$roomheader-button-color: #91A1C0;
|
||||
$groupheader-button-color: #91A1C0;
|
||||
|
|
@ -246,111 +247,12 @@ $authpage-bg-color: #2e3649;
|
|||
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
|
||||
$authpage-body-bg-color: #ffffff;
|
||||
$authpage-lang-color: #4e5054;
|
||||
$authpage-primary-color: #454545;
|
||||
$authpage-primary-color: #232f32;
|
||||
$authpage-secondary-color: #61708b;
|
||||
|
||||
$dark-panel-bg-color: $secondary-accent-color;
|
||||
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
|
||||
|
||||
/*** form elements ***/
|
||||
|
||||
// .mx_textinput is a container for a text input
|
||||
// + some other controls like buttons, ...
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat {
|
||||
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #c1c1c1;
|
||||
// these things should probably not be defined
|
||||
// globally
|
||||
margin: 9px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_textinput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> input[type=text],
|
||||
> input[type=search] {
|
||||
border: none;
|
||||
flex: 1;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
input::placeholder {
|
||||
color: $roomsublist-label-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** panels ***/
|
||||
.dark-panel {
|
||||
background-color: $secondary-accent-color;
|
||||
}
|
||||
|
||||
.dark-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $input-darker-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.light-panel {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-lighter-fg-color;
|
||||
background-color: $input-lighter-bg-color;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].mx_textinput_icon,
|
||||
input[type=search].mx_textinput_icon {
|
||||
padding-left: 36px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
}
|
||||
|
||||
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
|
||||
input[type=text].mx_textinput_icon.mx_textinput_search,
|
||||
input[type=search].mx_textinput_icon.mx_textinput_search {
|
||||
background-image: url('$(res)/img/feather-icons/search-input.svg');
|
||||
}
|
||||
|
||||
// dont search UI as not all browsers support it,
|
||||
// we implement it ourselves where needed instead
|
||||
input[type=search]::-webkit-search-decoration,
|
||||
input[type=search]::-webkit-search-cancel-button,
|
||||
input[type=search]::-webkit-search-results-button,
|
||||
input[type=search]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input[type=text]::-webkit-input-placeholder,
|
||||
.input[type=text]::-moz-placeholder,
|
||||
.input[type=search]::-webkit-input-placeholder,
|
||||
.input[type=search]::-moz-placeholder {
|
||||
color: #a5aab2;
|
||||
}
|
||||
|
||||
// Override Firefox's UA style so we get a consistent look across browsers
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
|
|
|
|||
|
|
@ -505,14 +505,9 @@ module.exports = React.createClass({
|
|||
errorText = <div className="mx_Login_error">{ err }</div>;
|
||||
}
|
||||
|
||||
let signIn;
|
||||
if (!this.state.doingUIAuth) {
|
||||
signIn = (
|
||||
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
||||
{ _t('Sign in instead') }
|
||||
</a>
|
||||
);
|
||||
}
|
||||
const signIn = <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
|
||||
{ _t('Sign in instead') }
|
||||
</a>;
|
||||
|
||||
return (
|
||||
<AuthPage>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
||||
|
|
@ -61,29 +60,15 @@ module.exports = React.createClass({
|
|||
} else {
|
||||
console.log("Loading recaptcha script...");
|
||||
window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
|
||||
const protocol = global.location.protocol;
|
||||
let protocol = global.location.protocol;
|
||||
if (protocol === "vector:") {
|
||||
const warning = document.createElement('div');
|
||||
// XXX: fix hardcoded app URL. Better solutions include:
|
||||
// * jumping straight to a hosted captcha page (but we don't support that yet)
|
||||
// * embedding the captcha in an iframe (if that works)
|
||||
// * using a better captcha lib
|
||||
ReactDOM.render(_t(
|
||||
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
|
||||
{},
|
||||
{
|
||||
'a': (sub) => {
|
||||
return <a target="_blank" rel="noopener" href='https://riot.im/app'>{ sub }</a>;
|
||||
},
|
||||
}), warning);
|
||||
this.refs.recaptchaContainer.appendChild(warning);
|
||||
} else {
|
||||
const scriptTag = document.createElement('script');
|
||||
scriptTag.setAttribute(
|
||||
'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit",
|
||||
);
|
||||
this.refs.recaptchaContainer.appendChild(scriptTag);
|
||||
protocol = "https:";
|
||||
}
|
||||
const scriptTag = document.createElement('script');
|
||||
scriptTag.setAttribute(
|
||||
'src', `${protocol}//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
|
||||
);
|
||||
this.refs.recaptchaContainer.appendChild(scriptTag);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -141,8 +126,9 @@ module.exports = React.createClass({
|
|||
|
||||
return (
|
||||
<div ref="recaptchaContainer">
|
||||
{ _t("This homeserver would like to make sure you are not a robot.") }
|
||||
<br />
|
||||
<p>{_t(
|
||||
"This homeserver would like to make sure you are not a robot.",
|
||||
)}</p>
|
||||
<div id={DIV_ID}></div>
|
||||
{ error }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -983,9 +983,10 @@ module.exports = withMatrixClient(React.createClass({
|
|||
return (
|
||||
<div className="mx_MemberInfo">
|
||||
<div className="mx_MemberInfo_name">
|
||||
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
|
||||
<img src={require("../../../../res/img/minimise.svg")} width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton className="mx_MemberInfo_cancel"
|
||||
onClick={this.onCancel}
|
||||
title={_t('Close')}
|
||||
/>
|
||||
{ e2eIconElement }
|
||||
<EmojiText element="h2">{ memberName }</EmojiText>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -499,15 +499,16 @@ export default class MessageComposer extends React.Component {
|
|||
<div className="mx_MessageComposer_formatbar_wrapper">
|
||||
<div className="mx_MessageComposer_formatbar">
|
||||
{ formatButtons }
|
||||
<div style={{flex: 1}}></div>
|
||||
<img title={this.state.inputState.isRichTextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off")}
|
||||
onMouseDown={this.onToggleMarkdownClicked}
|
||||
className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
|
||||
src={require(`../../../../res/img/button-md-${!this.state.inputState.isRichTextEnabled}.png`)} />
|
||||
<div style={{ flex: 1 }}></div>
|
||||
<AccessibleButton className="mx_MessageComposer_formatbar_markdown mx_MessageComposer_markdownDisabled"
|
||||
onMouseDown={this.onToggleMarkdownClicked}
|
||||
title={_t("Markdown is disabled")}
|
||||
/>
|
||||
<AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
|
||||
onClick={this.onToggleFormattingClicked}
|
||||
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
|
||||
src={require("../../../../res/img/icon-text-cancel.svg")} />
|
||||
onClick={this.onToggleFormattingClicked}
|
||||
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
|
||||
src={require("../../../../res/img/icon-text-cancel.svg")}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ import ReplyPreview from "./ReplyPreview";
|
|||
import RoomViewStore from '../../../stores/RoomViewStore';
|
||||
import ReplyThread from "../elements/ReplyThread";
|
||||
import {ContentHelpers} from 'matrix-js-sdk';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
|
||||
const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$');
|
||||
|
|
@ -1582,6 +1583,11 @@ export default class MessageComposerInput extends React.Component {
|
|||
placeholder = undefined;
|
||||
}
|
||||
|
||||
const markdownClasses = classNames({
|
||||
mx_MessageComposer_input_markdownIndicator: true,
|
||||
mx_MessageComposer_markdownDisabled: this.state.isRichTextEnabled,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
|
||||
<div className="mx_MessageComposer_autocomplete_wrapper">
|
||||
|
|
@ -1596,10 +1602,10 @@ export default class MessageComposerInput extends React.Component {
|
|||
/>
|
||||
</div>
|
||||
<div className={className}>
|
||||
<img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
|
||||
onMouseDown={this.onMarkdownToggleClicked}
|
||||
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
|
||||
src={require(`../../../../res/img/button-md-${!this.state.isRichTextEnabled}.png`)} />
|
||||
<AccessibleButton className={markdownClasses}
|
||||
onMouseDown={this.onMarkdownToggleClicked}
|
||||
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
|
||||
/>
|
||||
<Editor ref={this._collectEditor}
|
||||
dir="auto"
|
||||
className="mx_MessageComposer_editor"
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export default class GeneralUserSettingsTab extends React.Component {
|
|||
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
|
||||
<Field id="theme" label={_t("Theme")} element="select"
|
||||
value={this.state.theme} onChange={this._onThemeChange}>
|
||||
<option value="light">{_t("Default theme")}</option>
|
||||
<option value="light">{_t("Light theme")}</option>
|
||||
<option value="dark">{_t("Dark theme")}</option>
|
||||
</Field>
|
||||
<SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
|
||||
|
|
|
|||
|
|
@ -116,7 +116,8 @@ export default class RolesRoomSettingsTab extends React.Component {
|
|||
_onPowerLevelsChanged = (value, powerLevelKey) => {
|
||||
const client = MatrixClientPeg.get();
|
||||
const room = client.getRoom(this.props.roomId);
|
||||
let plContent = room.currentState.getStateEvents('m.room.power_levels', '').getContent() || {};
|
||||
const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
|
||||
let plContent = plEvent ? (plEvent.getContent() || {}) : {};
|
||||
|
||||
// Clone the power levels just in case
|
||||
plContent = Object.assign({}, plContent);
|
||||
|
|
@ -151,7 +152,8 @@ export default class RolesRoomSettingsTab extends React.Component {
|
|||
|
||||
const client = MatrixClientPeg.get();
|
||||
const room = client.getRoom(this.props.roomId);
|
||||
const plContent = room.currentState.getStateEvents('m.room.power_levels', '').getContent() || {};
|
||||
const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
|
||||
const plContent = plEvent ? (plEvent.getContent() || {}) : {};
|
||||
const canChangeLevels = room.currentState.mayClientSendStateEvent('m.room.power_levels', client);
|
||||
|
||||
const powerLevelDescriptors = {
|
||||
|
|
|
|||
|
|
@ -43,13 +43,31 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
|||
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
||||
const state = room.currentState;
|
||||
const joinRule = state.getStateEvents("m.room.join_rules", "").getContent()['join_rule'];
|
||||
const guestAccess = state.getStateEvents("m.room.guest_access", "").getContent()['guest_access'];
|
||||
const history = state.getStateEvents("m.room.history_visibility", "").getContent()['history_visibility'];
|
||||
|
||||
const joinRule = this._pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.join_rules", ""),
|
||||
'join_rule',
|
||||
'invite',
|
||||
);
|
||||
const guestAccess = this._pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.guest_access", ""),
|
||||
'guest_access',
|
||||
'forbidden',
|
||||
);
|
||||
const history = this._pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.history_visibility", ""),
|
||||
'history_visibility',
|
||||
'shared',
|
||||
);
|
||||
const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
|
||||
this.setState({joinRule, guestAccess, history, encrypted});
|
||||
}
|
||||
|
||||
_pullContentPropertyFromEvent(event, key, defaultValue) {
|
||||
if (!event || !event.getContent()) return defaultValue;
|
||||
return event.getContent()[key] || defaultValue;
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -520,7 +520,7 @@
|
|||
"Phone numbers": "Phone numbers",
|
||||
"Language and region": "Language and region",
|
||||
"Theme": "Theme",
|
||||
"Default theme": "Default theme",
|
||||
"Light theme": "Light theme",
|
||||
"Dark theme": "Dark theme",
|
||||
"Account management": "Account management",
|
||||
"Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
|
||||
|
|
@ -1221,7 +1221,6 @@
|
|||
"Sign in": "Sign in",
|
||||
"Login": "Login",
|
||||
"powered by Matrix": "powered by Matrix",
|
||||
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
|
||||
"This homeserver would like to make sure you are not a robot.": "This homeserver would like to make sure you are not a robot.",
|
||||
"Custom Server Options": "Custom Server Options",
|
||||
"You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue