Initial editor for user list selection
For https://github.com/vector-im/riot-web/issues/11199
This commit is contained in:
Travis Ralston
parent
87a6791eb8
commit
ffd40c2c40
4 changed files with 323 additions and 41 deletions
|
|
@ -21,15 +21,51 @@ limitations under the License.
|
|||
.mx_DMInviteDialog_editor {
|
||||
flex: 1;
|
||||
width: 100%; // Needed to make the Field inside grow
|
||||
}
|
||||
background-color: $user-tile-hover-bg-color;
|
||||
border-radius: 4px;
|
||||
min-height: 25px;
|
||||
padding-left: 8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_Field {
|
||||
margin: 0;
|
||||
.mx_DMInviteDialog_userTile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
// Using a textarea for this element, to circumvent autofill
|
||||
// Mostly copied from AddressPickerDialog
|
||||
textarea,
|
||||
textarea:focus {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
word-wrap: nowrap;
|
||||
|
||||
// Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
|
||||
// remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
|
||||
// support for "fill remaining width", but traditional tricks don't work with what
|
||||
// we're pushing into this "field". Flexbox just makes things worse. The theory is
|
||||
// that users won't need more than about 2/5ths of the input to find the person
|
||||
// they're looking for.
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_goButton {
|
||||
width: 48px;
|
||||
margin-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,3 +119,38 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
|
||||
.mx_DMInviteDialog_userTile {
|
||||
margin-right: 8px;
|
||||
|
||||
.mx_DMInviteDialog_userTile_pill {
|
||||
background-color: $username-variant1-color;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: #ffffff; // this is fine without a var because it's for both themes
|
||||
|
||||
.mx_DMInviteDialog_userTile_avatar {
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
img.mx_DMInviteDialog_userTile_avatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_userTile_name {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DMInviteDialog_userTile_remove {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
37
res/img/icon-email-pill-avatar.svg
Normal file
37
res/img/icon-email-pill-avatar.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="69px" height="68px" viewBox="0 0 69 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
|
||||
<title>at-sign</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<filter x="-5.9%" y="-7.9%" width="111.8%" height="115.8%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="FTUE" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="FTUE---User-list-suggestions" transform="translate(-5161.000000, -1379.000000)" stroke="#368BD6">
|
||||
<g id="Group-14-Copy-10" transform="translate(4748.000000, 1168.000000)">
|
||||
<g id="Web-Copy-6" filter="url(#filter-1)">
|
||||
<g id="modal-copy" transform="translate(253.000000, 118.000000)">
|
||||
<g id="content" transform="translate(40.000000, 107.000000)">
|
||||
<g id="Group-43">
|
||||
<g id="Group-15-Copy-6" transform="translate(143.000000, 6.000000)">
|
||||
<g id="at-sign" transform="translate(5.500000, 6.500000)">
|
||||
<circle id="Oval" cx="6.28571429" cy="5.71428571" r="2.28571429"></circle>
|
||||
<path d="M8.57142857,3.42857143 L8.57142857,6.28571429 C8.57142857,7.23248814 9.33894043,8 10.2857143,8 C11.2324881,8 12,7.23248814 12,6.28571429 L12,5.71428571 C11.9998328,3.05880261 10.1703625,0.75337961 7.58436487,0.149884297 C4.9983672,-0.453611015 2.33741804,0.803881013 1.16186053,3.18498476 C-0.0136969889,5.5660885 0.605971794,8.4432307 2.65750183,10.1292957 C4.70903186,11.8153606 7.65171364,11.8659623 9.76,10.2514286" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
36
res/img/icon-pill-remove.svg
Normal file
36
res/img/icon-pill-remove.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="58px" height="60px" viewBox="26 25 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
|
||||
<title>x</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<filter x="-5.9%" y="-7.9%" width="111.8%" height="115.8%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0" type="matrix"
|
||||
in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="F..." transform="translate(-2802.000000, -392.000000)" stroke="#61708B">
|
||||
<g id="Group-14-Copy-8" transform="translate(2396.000000, 177.000000)">
|
||||
<g id="Web-Copy-6" filter="url(#filter-1)">
|
||||
<g id="modal-copy" transform="translate(253.000000, 118.000000)">
|
||||
<g id="content" transform="translate(40.000000, 107.000000)">
|
||||
<g id="Group-43">
|
||||
<g id="Group-15" transform="translate(7.000000, 6.000000)">
|
||||
<g id="x" transform="translate(132.000000, 9.000000)">
|
||||
<path d="M6,0 L0,6" id="Path"></path>
|
||||
<path d="M0,0 L6,6" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Add table
Add a link
Reference in a new issue