style room header
This commit is contained in:
parent
2cbe349a4d
commit
59802d1812
4 changed files with 23 additions and 25 deletions
|
@ -24,13 +24,8 @@ limitations under the License.
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.RoomHeader > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.RoomHeader > * {
|
||||
margin-right: 10px;
|
||||
flex: 0 0 auto;
|
||||
.RoomHeader h2 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.RoomHeader button {
|
||||
|
|
10
src/ui/web/css/themes/element/icons/chevron-left.svg
Normal file
10
src/ui/web/css/themes/element/icons/chevron-left.svg
Normal file
|
@ -0,0 +1,10 @@
|
|||
<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 657 B |
|
@ -352,8 +352,11 @@ a {
|
|||
}
|
||||
|
||||
.RoomHeader {
|
||||
background: rgba(245, 245, 245, 0.90);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
|
||||
background: white;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
|
||||
}
|
||||
|
||||
.RoomHeader h2 {
|
||||
|
@ -361,23 +364,13 @@ a {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.RoomHeader button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5em;
|
||||
padding: 0;
|
||||
background: white;
|
||||
border: none;
|
||||
font-weight: bolder;
|
||||
line-height: 40px;
|
||||
.RoomHeader > :not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.back::before {
|
||||
content: "☰";
|
||||
}
|
||||
|
||||
.more::before {
|
||||
content: "⋮";
|
||||
button.back {
|
||||
background-image: url('icons/chevron-left.svg');
|
||||
background-position-x: 10px;
|
||||
}
|
||||
|
||||
.RoomHeader .topic {
|
||||
|
|
|
@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
|
|||
return t.div({className: "RoomView"}, [
|
||||
t.div({className: "TimelinePanel"}, [
|
||||
t.div({className: "RoomHeader"}, [
|
||||
t.button({className: "back", onClick: () => vm.close()}),
|
||||
t.button({className: "utility back", onClick: () => vm.close()}),
|
||||
renderAvatar(t, vm, 32),
|
||||
t.div({className: "room-description"}, [
|
||||
t.h2(vm => vm.name),
|
||||
|
|
Reference in a new issue