mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
Merge pull request #142 from vector-im/bwindels/grid-and-other-css-polish
Grid and other css polish
This commit is contained in:
Bruno Windels
GitHub
commit
30ffe72a7c
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,3 +6,4 @@ sessionexports
|
||||
bundle.js
|
||||
target
|
||||
lib
|
||||
*.tar.gz
|
||||
|
||||
@ -29,13 +29,14 @@
|
||||
"@rollup/plugin-commonjs": "^15.0.0",
|
||||
"@rollup/plugin-multi-entry": "^4.0.0",
|
||||
"@rollup/plugin-node-resolve": "^9.0.0",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"cheerio": "^1.0.0-rc.3",
|
||||
"commander": "^6.0.0",
|
||||
"core-js": "^3.6.5",
|
||||
"finalhandler": "^1.1.1",
|
||||
"impunity": "^1.0.0",
|
||||
"mdn-polyfills": "^5.20.0",
|
||||
"postcss": "^7.0.32",
|
||||
"postcss": "^8.1.1",
|
||||
"postcss-css-variables": "^0.17.0",
|
||||
"postcss-flexbugs-fixes": "^4.2.1",
|
||||
"postcss-import": "^12.0.1",
|
||||
@ -47,11 +48,11 @@
|
||||
"xxhashjs": "^0.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
|
||||
"aes-js": "^3.1.2",
|
||||
"another-json": "^0.2.0",
|
||||
"base64-arraybuffer": "^0.2.0",
|
||||
"bs58": "^4.0.1",
|
||||
"es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
|
||||
"olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
|
||||
"text-encoding": "^0.7.0"
|
||||
}
|
||||
|
||||
@ -39,6 +39,7 @@ import removeJsComments from 'rollup-plugin-cleanup';
|
||||
import postcssUrl from "postcss-url";
|
||||
|
||||
import cssvariables from "postcss-css-variables";
|
||||
import autoprefixer from "autoprefixer";
|
||||
import flexbugsFixes from "postcss-flexbugs-fixes";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
@ -302,6 +303,8 @@ async function buildCssLegacy(entryPath, urlMapper = null) {
|
||||
const preCss = await fs.readFile(entryPath, "utf8");
|
||||
const options = [
|
||||
postcssImport,
|
||||
cssvariables(),
|
||||
autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
|
||||
flexbugsFixes()
|
||||
];
|
||||
if (urlMapper) {
|
||||
|
||||
@ -25,39 +25,15 @@ export class RoomGridViewModel extends ViewModel {
|
||||
this._viewModels = [];
|
||||
}
|
||||
|
||||
_posToIdx(x, y) {
|
||||
return (y * this.width) + x;
|
||||
roomViewModelAt(i) {
|
||||
return this._viewModels[i]?.vm;
|
||||
}
|
||||
|
||||
_idxToX(idx) {
|
||||
return idx % this.width;
|
||||
get focusIndex() {
|
||||
return this._selectedIndex;
|
||||
}
|
||||
|
||||
_idxToY(idx) {
|
||||
return Math.floor(idx / this.width);
|
||||
}
|
||||
|
||||
roomViewModelAt(x, y) {
|
||||
return this._viewModels[this._posToIdx(x, y)]?.vm;
|
||||
}
|
||||
|
||||
get focusX() {
|
||||
return this._idxToX(this._selectedIndex);
|
||||
}
|
||||
|
||||
get focusY() {
|
||||
return this._idxToY(this._selectedIndex);
|
||||
}
|
||||
|
||||
isFocusAt(x, y) {
|
||||
return this._posToIdx(x, y) === this._selectedIndex;
|
||||
}
|
||||
|
||||
setFocusAt(x, y) {
|
||||
this._setFocusedIndex(this._posToIdx(x, y));
|
||||
}
|
||||
|
||||
_setFocusedIndex(idx) {
|
||||
setFocusIndex(idx) {
|
||||
if (idx === this._selectedIndex) {
|
||||
return;
|
||||
}
|
||||
@ -97,9 +73,9 @@ export class RoomGridViewModel extends ViewModel {
|
||||
* @package
|
||||
*/
|
||||
tryFocusRoom(roomId) {
|
||||
const index = this._viewModels.findIndex(vms => vms?.vm._room.id === roomId);
|
||||
const index = this._viewModels.findIndex(vms => vms?.vm.id === roomId);
|
||||
if (index >= 0) {
|
||||
this._setFocusedIndex(index);
|
||||
this.setFocusIndex(index);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
||||
@ -21,9 +21,6 @@ limitations under the License.
|
||||
height: var(--avatar-size);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
line-height: var(--avatar-size);
|
||||
font-size: calc(var(--avatar-size) * 0.6);
|
||||
|
||||
@ -18,6 +18,7 @@ limitations under the License.
|
||||
.form input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -28,6 +28,11 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.room-placeholder {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.SessionView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -64,7 +69,7 @@ html {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.RoomPlaceholderView, .RoomView, .RoomGridView {
|
||||
.room-placeholder, .RoomView, .RoomGridView {
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
}
|
||||
@ -94,16 +99,26 @@ html {
|
||||
|
||||
.RoomGridView {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
grid-template-rows: repeat(var(--rows), 1fr);
|
||||
}
|
||||
|
||||
.RoomGridView.layout3x2 {
|
||||
grid-template:
|
||||
"t0 t1 t2" 1fr
|
||||
"t3 t4 t5" 1fr /
|
||||
1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.RoomGridView > .tile0 {grid-area: t0;}
|
||||
.RoomGridView > .tile1 {grid-area: t1;}
|
||||
.RoomGridView > .tile2 {grid-area: t2;}
|
||||
.RoomGridView > .tile3 {grid-area: t3;}
|
||||
.RoomGridView > .tile4 {grid-area: t4;}
|
||||
.RoomGridView > .tile5 {grid-area: t5;}
|
||||
|
||||
.RoomGridView > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
grid-column: var(--column);
|
||||
grid-row: var(--row);
|
||||
}
|
||||
|
||||
.RoomGridView > div.focus-ring {
|
||||
|
||||
@ -25,6 +25,7 @@ limitations under the License.
|
||||
|
||||
.LeftPanel .utilities .FilterField {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.LeftPanel ul {
|
||||
|
||||
@ -34,7 +34,10 @@ limitations under the License.
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.SessionPickerView .session-info > :not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.SessionPickerView li .user-id {
|
||||
@ -53,9 +56,13 @@ limitations under the License.
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.SessionLoadView > :not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.SessionLoadView p {
|
||||
flex: 1;
|
||||
margin: 0 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.SessionLoadView .spinner {
|
||||
|
||||
@ -15,22 +15,12 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.RoomPlaceholderView {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.RoomHeader {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.RoomHeader > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.RoomHeader > * {
|
||||
margin-right: 10px;
|
||||
flex: 0 0 auto;
|
||||
.RoomHeader h2 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.RoomHeader button {
|
||||
@ -66,11 +56,13 @@ limitations under the License.
|
||||
|
||||
.MessageComposer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.MessageComposer > input {
|
||||
display: block;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -80,6 +72,6 @@ limitations under the License.
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.TimelineLoadingView div {
|
||||
margin-right: 10px;
|
||||
.TimelineLoadingView > :not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ a {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.RoomPlaceholderView {
|
||||
.room-placeholder {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
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 |
@ -1,5 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 0.75H12C13.7949 0.75 15.25 2.20507 15.25 4V12C15.25 13.7949 13.7949 15.25 12 15.25H4C2.20507 15.25 0.75 13.7949 0.75 12V4C0.75 2.20507 2.20507 0.75 4 0.75Z" stroke="#8D99A5" stroke-width="1.5"/>
|
||||
<path d="M0 12H16V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V12Z" fill="#8D99A5"/>
|
||||
<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V5H0V4Z" fill="#8D99A5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#8D99A5"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 621 B |
@ -1,6 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
|
||||
<rect x="9.59998" y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
|
||||
<rect y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
|
||||
<rect width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#8D99A5"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 379 B After Width: | Height: | Size: 1.1 KiB |
3
src/ui/web/css/themes/element/icons/search.svg
Normal file
3
src/ui/web/css/themes/element/icons/search.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 785 B |
@ -136,22 +136,26 @@ button.utility.grid.on {
|
||||
}
|
||||
|
||||
.FilterField {
|
||||
background-image: url('icons/search.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px center;
|
||||
background-color: #e1e3e6;
|
||||
/* to prevent jumps when adding a border on focus */
|
||||
border: 1px solid transparent;
|
||||
border-radius: 16px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
padding-left: 30px; /* 8 + 14 (icon) + 8*/
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.FilterField :not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.FilterField:focus-within {
|
||||
border: 1px #e1e3e6 solid;
|
||||
background-color: white;
|
||||
}
|
||||
.FilterField:focus-within button {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/*.FilterField:not(:focus-within) button {
|
||||
display: none;
|
||||
@ -169,14 +173,15 @@ button.utility.grid.on {
|
||||
}
|
||||
|
||||
.FilterField button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 30px; /* 32 - 1 (top) - 1 (bottom) */
|
||||
height: 30px; /* 32 - 1 (top) - 1 (bottom) */
|
||||
background-position: center;
|
||||
background-color: #e1e3e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('icons/clear.svg');
|
||||
border: none;
|
||||
border: 7px solid transparent; /* 8 - 1 */
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.PreSessionScreen {
|
||||
@ -203,14 +208,14 @@ button.utility.grid.on {
|
||||
.LeftPanel {
|
||||
background: rgba(245, 245, 245, 0.90);
|
||||
font-size: 1.5rem;
|
||||
padding: 12px 0 0 8px;
|
||||
padding: 12px 8px 0 8px;
|
||||
}
|
||||
|
||||
.LeftPanel .utilities {
|
||||
margin-right: 8px;
|
||||
.LeftPanel > :not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.LeftPanel .utilities :not(:first-child) {
|
||||
.LeftPanel .utilities > :not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -223,36 +228,40 @@ button.utility.grid.on {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.LeftPanel ul {
|
||||
.LeftPanel .RoomList {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: -8px; /* make scrollbar hit right edge of parent */
|
||||
}
|
||||
|
||||
.LeftPanel li {
|
||||
margin: 12px 0;
|
||||
padding-right: 5px;
|
||||
.RoomList li {
|
||||
margin: 0;
|
||||
padding-right: 8px;
|
||||
/* vertical align */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.LeftPanel li.active {
|
||||
.RoomList li:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.RoomList li.active {
|
||||
background: rgba(141, 151, 165, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.LeftPanel li > * {
|
||||
margin-right: 10px;
|
||||
.RoomList li > * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.LeftPanel .description {
|
||||
.RoomList .description {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.LeftPanel .name.unread {
|
||||
.RoomList .name.unread {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.LeftPanel .badge {
|
||||
.RoomList .badge {
|
||||
min-width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 1.6rem;
|
||||
@ -266,7 +275,7 @@ button.utility.grid.on {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.LeftPanel .badge.highlighted {
|
||||
.RoomList .badge.highlighted {
|
||||
background-color: #ff4b55;
|
||||
}
|
||||
|
||||
@ -289,7 +298,7 @@ a {
|
||||
top: 72px;
|
||||
}
|
||||
|
||||
.RoomPlaceholderView {
|
||||
.room-placeholder {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
@ -337,14 +346,30 @@ a {
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
|
||||
}
|
||||
|
||||
.RoomGridView > .focused > .room-placeholder .unfocused {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.RoomGridView > :not(.focused) > .room-placeholder .focused {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.room-placeholder .unfocused {
|
||||
color: #8D99A5;
|
||||
}
|
||||
|
||||
|
||||
.RoomGridView > div.focus-ring {
|
||||
border: 2px solid rgba(134, 193, 165, 1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -352,23 +377,16 @@ 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(:last-child) {
|
||||
/* use margin-right because the first item,
|
||||
button.back might be hidden and then we don't
|
||||
want a margin-left on the second item*/
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.back::before {
|
||||
content: "☰";
|
||||
}
|
||||
|
||||
.more::before {
|
||||
content: "⋮";
|
||||
button.back {
|
||||
background-image: url('icons/chevron-left.svg');
|
||||
background-position-x: 10px;
|
||||
}
|
||||
|
||||
.RoomHeader .topic {
|
||||
@ -381,15 +399,25 @@ a {
|
||||
|
||||
.MessageComposer {
|
||||
border-top: 1px solid rgba(245, 245, 245, 0.90);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.MessageComposer > :not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.MessageComposer > input {
|
||||
padding: 0.8em;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background: #F6F6F6;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.MessageComposer > button.send {
|
||||
margin: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
@ -492,3 +520,7 @@ ul.Timeline > li.messageStatus .message-container > p {
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.GapView > :not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@ -76,7 +76,6 @@ limitations under the License.
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.GapView > div {
|
||||
flex: 1 1 0;
|
||||
margin-right: 10px;
|
||||
.GapView > :nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/*
|
||||
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@ -16,13 +17,12 @@ limitations under the License.
|
||||
|
||||
import {tag} from "../general/html.js";
|
||||
|
||||
export class RoomPlaceholderView {
|
||||
constructor() {
|
||||
this._root = null;
|
||||
export class StaticView {
|
||||
constructor(render) {
|
||||
this._root = render(tag);
|
||||
}
|
||||
|
||||
mount() {
|
||||
this._root = tag.div({className: "RoomPlaceholderView"}, tag.h2("Choose a room on the left side."));
|
||||
return this._root;
|
||||
}
|
||||
|
||||
@ -15,35 +15,33 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
import {RoomView} from "./room/RoomView.js";
|
||||
import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
|
||||
import {TemplateView} from "../general/TemplateView.js";
|
||||
import {StaticView} from "../general/StaticView.js";
|
||||
|
||||
export class RoomGridView extends TemplateView {
|
||||
render(t, vm) {
|
||||
const children = [];
|
||||
for (let y = 0; y < vm.height; y+=1) {
|
||||
for (let x = 0; x < vm.width; x+=1) {
|
||||
children.push(t.div({
|
||||
onClick: () => vm.setFocusAt(x, y),
|
||||
onFocusin: () => vm.setFocusAt(x, y),
|
||||
className: {
|
||||
"container": true,
|
||||
"focused": vm => vm.isFocusAt(x, y)
|
||||
},
|
||||
style: `--column: ${x + 1}; --row: ${y + 1}`
|
||||
},t.mapView(vm => vm.roomViewModelAt(x, y), roomVM => {
|
||||
if (roomVM) {
|
||||
return new RoomView(roomVM);
|
||||
} else {
|
||||
return new RoomPlaceholderView();
|
||||
}
|
||||
})));
|
||||
}
|
||||
for (let i = 0; i < (vm.height * vm.width); i+=1) {
|
||||
children.push(t.div({
|
||||
onClick: () => vm.setFocusIndex(i),
|
||||
onFocusin: () => vm.setFocusIndex(i),
|
||||
className: {
|
||||
"container": true,
|
||||
[`tile${i}`]: true,
|
||||
"focused": vm => vm.focusIndex === i
|
||||
},
|
||||
},t.mapView(vm => vm.roomViewModelAt(i), roomVM => {
|
||||
if (roomVM) {
|
||||
return new RoomView(roomVM);
|
||||
} else {
|
||||
return new StaticView(t => t.div({className: "room-placeholder"}, [
|
||||
t.h2({className: "focused"}, vm.i18n`Select a room on the left`),
|
||||
t.h2({className: "unfocused"}, vm.i18n`Click to select this tile`),
|
||||
]));
|
||||
}
|
||||
})));
|
||||
}
|
||||
children.push(t.div({className: "focus-ring", style: vm => `--column: ${vm.focusX + 1}; --row: ${vm.focusY + 1}`}));
|
||||
return t.div({
|
||||
className: "RoomGridView",
|
||||
style: `--columns: ${vm.width}; --rows: ${vm.height}`
|
||||
}, children);
|
||||
children.push(t.div({className: vm => `focus-ring tile${vm.focusIndex}`}));
|
||||
return t.div({className: "RoomGridView layout3x2"}, children);
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ limitations under the License.
|
||||
import {LeftPanelView} from "./leftpanel/LeftPanelView.js";
|
||||
import {RoomView} from "./room/RoomView.js";
|
||||
import {TemplateView} from "../general/TemplateView.js";
|
||||
import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
|
||||
import {StaticView} from "../general/StaticView.js";
|
||||
import {SessionStatusView} from "./SessionStatusView.js";
|
||||
import {RoomGridView} from "./RoomGridView.js";
|
||||
|
||||
@ -37,7 +37,7 @@ export class SessionView extends TemplateView {
|
||||
case "roomgrid":
|
||||
return new RoomGridView(vm.roomGridViewModel);
|
||||
case "placeholder":
|
||||
return new RoomPlaceholderView();
|
||||
return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`)));
|
||||
default: //room id
|
||||
return new RoomView(vm.currentRoom);
|
||||
}
|
||||
|
||||
@ -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),
|
||||
|
||||
99
yarn.lock
99
yarn.lock
@ -933,6 +933,18 @@ ansi-styles@^3.2.1:
|
||||
dependencies:
|
||||
color-convert "^1.9.0"
|
||||
|
||||
autoprefixer@^10.0.1:
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.0.1.tgz#e2d9000f84ebd98d77b7bc16f8adb2ff1f7bb946"
|
||||
integrity sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==
|
||||
dependencies:
|
||||
browserslist "^4.14.5"
|
||||
caniuse-lite "^1.0.30001137"
|
||||
colorette "^1.2.1"
|
||||
normalize-range "^0.1.2"
|
||||
num2fraction "^1.2.2"
|
||||
postcss-value-parser "^4.1.0"
|
||||
|
||||
babel-plugin-dynamic-import-node@^2.3.3:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
|
||||
@ -980,6 +992,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
|
||||
escalade "^3.0.2"
|
||||
node-releases "^1.1.60"
|
||||
|
||||
browserslist@^4.14.5:
|
||||
version "4.14.5"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
|
||||
integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
|
||||
dependencies:
|
||||
caniuse-lite "^1.0.30001135"
|
||||
electron-to-chromium "^1.3.571"
|
||||
escalade "^3.1.0"
|
||||
node-releases "^1.1.61"
|
||||
|
||||
bs58@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
|
||||
@ -997,6 +1019,11 @@ caniuse-lite@^1.0.30001111:
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001115.tgz#c04cd828883ba47f6f776312e0817bcc9040cfa4"
|
||||
integrity sha512-NZrG0439ePYna44lJX8evHX2L7Z3/z3qjVLnHgbBb/duNEnGo348u+BQS5o4HTWcrb++100dHFrU36IesIrC1Q==
|
||||
|
||||
caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
|
||||
version "1.0.30001144"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001144.tgz#bca0fffde12f97e1127a351fec3bfc1971aa3b3d"
|
||||
integrity sha512-4GQTEWNMnVZVOFG3BK0xvGeaDAtiPAbG2N8yuMXuXzx/c2Vd4XoMPO8+E918zeXn5IF0FRVtGShBfkfQea2wHQ==
|
||||
|
||||
chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
|
||||
@ -1030,6 +1057,11 @@ color-name@1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
colorette@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
|
||||
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
|
||||
|
||||
colors@^1.3.3:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
|
||||
@ -1190,6 +1222,11 @@ electron-to-chromium@^1.3.523:
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.534.tgz#fc7af8518dd00a5b22a24aed3f116b5d097e2330"
|
||||
integrity sha512-7x2S3yUrspNHQOoPk+Eo+iHViSiJiEGPI6BpmLy1eT2KRNGCkBt/NUYqjfXLd1DpDCQp7n3+LfA1RkbG+LqTZQ==
|
||||
|
||||
electron-to-chromium@^1.3.571:
|
||||
version "1.3.578"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz#e6671936f4571a874eb26e2e833aa0b2c0b776e0"
|
||||
integrity sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==
|
||||
|
||||
encodeurl@~1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
|
||||
@ -1214,6 +1251,11 @@ escalade@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
|
||||
integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
|
||||
|
||||
escalade@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
|
||||
integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
|
||||
|
||||
escape-html@~1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
@ -1382,6 +1424,18 @@ is-reference@^1.2.1:
|
||||
dependencies:
|
||||
"@types/estree" "*"
|
||||
|
||||
isarray@1.0.0, isarray@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
|
||||
|
||||
isobject@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
|
||||
integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
|
||||
dependencies:
|
||||
isarray "1.0.0"
|
||||
|
||||
js-cleanup@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/js-cleanup/-/js-cleanup-1.0.1.tgz#1d38080c7ee92e1d2d2b94054d0a33c48951e0df"
|
||||
@ -1425,6 +1479,14 @@ levenary@^1.1.1:
|
||||
dependencies:
|
||||
leven "^3.1.0"
|
||||
|
||||
line-column@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
|
||||
integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
|
||||
dependencies:
|
||||
isarray "^1.0.0"
|
||||
isobject "^2.0.0"
|
||||
|
||||
lodash@^4.15.0:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
@ -1506,11 +1568,26 @@ ms@^2.1.1:
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
|
||||
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
|
||||
|
||||
nanoid@^3.1.12:
|
||||
version "3.1.12"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
|
||||
integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
|
||||
|
||||
node-releases@^1.1.60:
|
||||
version "1.1.60"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
|
||||
integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
|
||||
|
||||
node-releases@^1.1.61:
|
||||
version "1.1.61"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
|
||||
integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
|
||||
|
||||
normalize-range@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
|
||||
integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
|
||||
|
||||
nth-check@~1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
|
||||
@ -1518,6 +1595,11 @@ nth-check@~1.0.1:
|
||||
dependencies:
|
||||
boolbase "~1.0.0"
|
||||
|
||||
num2fraction@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
|
||||
integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
|
||||
|
||||
object-keys@^1.0.11, object-keys@^1.0.12:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
|
||||
@ -1631,6 +1713,11 @@ postcss-value-parser@^3.2.3:
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
|
||||
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
|
||||
|
||||
postcss-value-parser@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
|
||||
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
|
||||
|
||||
postcss@^6.0.8:
|
||||
version "6.0.23"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
|
||||
@ -1649,7 +1736,7 @@ postcss@^7.0.1:
|
||||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
|
||||
postcss@^7.0.2, postcss@^7.0.26:
|
||||
version "7.0.32"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
|
||||
integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
|
||||
@ -1658,6 +1745,16 @@ postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
|
||||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^8.1.1:
|
||||
version "8.1.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.1.tgz#c3a287dd10e4f6c84cb3791052b96a5d859c9389"
|
||||
integrity sha512-9DGLSsjooH3kSNjTZUOt2eIj2ZTW0VI2PZ/3My+8TC7KIbH2OKwUlISfDsf63EP4aiRUt3XkEWMWvyJHvJelEg==
|
||||
dependencies:
|
||||
colorette "^1.2.1"
|
||||
line-column "^1.0.2"
|
||||
nanoid "^3.1.12"
|
||||
source-map "^0.6.1"
|
||||
|
||||
range-parser@~1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user