mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 03:25:12 +01:00
Code Issues Projects Releases Wiki Activity

style room header

Browse Source
This commit is contained in:
Bruno Windels 2020-10-08 15:00:20 +02:00
parent 2cbe349a4d
commit 59802d1812
4 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/ui/web/css/room.css
View File

@ -24,13 +24,8 @@ limitations under the License.
align-items: center; align-items: center;
} }
.RoomHeader > *:last-child { .RoomHeader h2 {
margin-right: 0; flex: 1;
}
.RoomHeader > * {
margin-right: 10px;
flex: 0 0 auto;
} }
.RoomHeader button { .RoomHeader button {

10
src/ui/web/css/themes/element/icons/chevron-left.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 657 B

27
src/ui/web/css/themes/element/theme.css
View File

@ -352,8 +352,11 @@ a {
} }
.RoomHeader { .RoomHeader {
background: rgba(245, 245, 245, 0.90); box-sizing: border-box;
padding: 10px; 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 { .RoomHeader h2 {
@ -361,23 +364,13 @@ a {
font-weight: 600; font-weight: 600;
} }
.RoomHeader button { .RoomHeader > :not(:first-child) {
width: 40px; margin-left: 8px;
height: 40px;
font-size: 1.5em;
padding: 0;
background: white;
border: none;
font-weight: bolder;
line-height: 40px;
} }
.back::before { button.back {
content: "☰"; background-image: url('icons/chevron-left.svg');
} background-position-x: 10px;
.more::before {
content: "⋮";
} }
.RoomHeader .topic { .RoomHeader .topic {

2
src/ui/web/session/room/RoomView.js
View File

@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
return t.div({className: "RoomView"}, [ return t.div({className: "RoomView"}, [
t.div({className: "TimelinePanel"}, [ t.div({className: "TimelinePanel"}, [
t.div({className: "RoomHeader"}, [ t.div({className: "RoomHeader"}, [
t.button({className: "back", onClick: () => vm.close()}), t.button({className: "utility back", onClick: () => vm.close()}),
renderAvatar(t, vm, 32), renderAvatar(t, vm, 32),
t.div({className: "room-description"}, [ t.div({className: "room-description"}, [
t.h2(vm => vm.name), t.h2(vm => vm.name),