Merge pull request #99 from ajbura/dev

Release v1.3.0
This commit is contained in:
Ajay Bura 2021-09-14 10:38:47 +05:30 committed by GitHub
commit 393d089229
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
91 changed files with 2608 additions and 648 deletions

2
.github/FUNDING.yml vendored
View file

@ -1,2 +1,2 @@
patreon: ajbura open_collective: cinny
liberapay: ajbura liberapay: ajbura

34
.github/workflows/docker.yaml vendored Normal file
View file

@ -0,0 +1,34 @@
name: Publish Docker image
on:
release:
types: [published]
jobs:
push_to_registry:
name: Push Docker image to Docker Hub
runs-on: ubuntu-latest
steps:
- name: Check out the repo
uses: actions/checkout@v2
- name: Log in to Docker Hub
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Extract metadata (tags, labels) for Docker
id: meta
uses: docker/metadata-action@v3
with:
images: ajbura/cinny
- name: Build and push Docker image
uses: docker/build-push-action@v2
with:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}

21
.github/workflows/netlify-dev.yaml vendored Normal file
View file

@ -0,0 +1,21 @@
name: 'Deploy to Netlify (dev)'
on:
push:
branches:
- dev
jobs:
deploy:
name: 'Deploy'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: jsmrcaga/action-netlify-deploy@master
with:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
BUILD_DIRECTORY: "dist"
NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
NETLIFY_DEPLOY_TO_PROD: true

20
.github/workflows/netlify-prod.yaml vendored Normal file
View file

@ -0,0 +1,20 @@
name: 'Deploy to Netlify (prod)'
on:
release:
types: [published]
jobs:
deploy:
name: 'Deploy'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: jsmrcaga/action-netlify-deploy@master
with:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
BUILD_DIRECTORY: "dist"
NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
NETLIFY_DEPLOY_TO_PROD: true

View file

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2021 Ajay Bura (ajbura) Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

View file

@ -10,6 +10,8 @@
Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface. Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
## Building and Running ## Building and Running
### Building from source ### Building from source
@ -42,4 +44,10 @@ docker run -p 8080:80 cinny:latest
This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
navigating to `http://localhost:8080`. navigating to `http://localhost:8080`.
## License
Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

416
package-lock.json generated
View file

@ -1,6 +1,6 @@
{ {
"name": "cinny", "name": "cinny",
"version": "1.2.1", "version": "1.3.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -20,29 +20,272 @@
"dev": true "dev": true
}, },
"@babel/core": { "@babel/core": {
"version": "7.13.13", "version": "7.15.5",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz",
"integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==", "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.12.13", "@babel/code-frame": "^7.14.5",
"@babel/generator": "^7.13.9", "@babel/generator": "^7.15.4",
"@babel/helper-compilation-targets": "^7.13.13", "@babel/helper-compilation-targets": "^7.15.4",
"@babel/helper-module-transforms": "^7.13.12", "@babel/helper-module-transforms": "^7.15.4",
"@babel/helpers": "^7.13.10", "@babel/helpers": "^7.15.4",
"@babel/parser": "^7.13.13", "@babel/parser": "^7.15.5",
"@babel/template": "^7.12.13", "@babel/template": "^7.15.4",
"@babel/traverse": "^7.13.13", "@babel/traverse": "^7.15.4",
"@babel/types": "^7.13.13", "@babel/types": "^7.15.4",
"convert-source-map": "^1.7.0", "convert-source-map": "^1.7.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"gensync": "^1.0.0-beta.2", "gensync": "^1.0.0-beta.2",
"json5": "^2.1.2", "json5": "^2.1.2",
"lodash": "^4.17.19",
"semver": "^6.3.0", "semver": "^6.3.0",
"source-map": "^0.5.0" "source-map": "^0.5.0"
}, },
"dependencies": { "dependencies": {
"@babel/code-frame": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
"dev": true,
"requires": {
"@babel/highlight": "^7.14.5"
}
},
"@babel/compat-data": {
"version": "7.15.0",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz",
"integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==",
"dev": true
},
"@babel/generator": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
"integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
}
},
"@babel/helper-compilation-targets": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz",
"integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==",
"dev": true,
"requires": {
"@babel/compat-data": "^7.15.0",
"@babel/helper-validator-option": "^7.14.5",
"browserslist": "^4.16.6",
"semver": "^6.3.0"
}
},
"@babel/helper-function-name": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
"integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
"dev": true,
"requires": {
"@babel/helper-get-function-arity": "^7.15.4",
"@babel/template": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/helper-get-function-arity": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
"integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-hoist-variables": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
"integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-member-expression-to-functions": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz",
"integrity": "sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-module-imports": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
"integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-module-transforms": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz",
"integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.15.4",
"@babel/helper-replace-supers": "^7.15.4",
"@babel/helper-simple-access": "^7.15.4",
"@babel/helper-split-export-declaration": "^7.15.4",
"@babel/helper-validator-identifier": "^7.14.9",
"@babel/template": "^7.15.4",
"@babel/traverse": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/helper-optimise-call-expression": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz",
"integrity": "sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-replace-supers": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz",
"integrity": "sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==",
"dev": true,
"requires": {
"@babel/helper-member-expression-to-functions": "^7.15.4",
"@babel/helper-optimise-call-expression": "^7.15.4",
"@babel/traverse": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/helper-simple-access": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz",
"integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-split-export-declaration": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
"integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.9",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
"integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
"dev": true
},
"@babel/helper-validator-option": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
"integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
"dev": true
},
"@babel/highlight": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
"integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
"version": "7.15.6",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
"integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
"dev": true
},
"@babel/template": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
"integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/parser": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/traverse": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
"integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/generator": "^7.15.4",
"@babel/helper-function-name": "^7.15.4",
"@babel/helper-hoist-variables": "^7.15.4",
"@babel/helper-split-export-declaration": "^7.15.4",
"@babel/parser": "^7.15.4",
"@babel/types": "^7.15.4",
"debug": "^4.1.0",
"globals": "^11.1.0"
}
},
"@babel/types": {
"version": "7.15.6",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
"integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.14.9",
"to-fast-properties": "^2.0.0"
}
},
"browserslist": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.0.tgz",
"integrity": "sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001254",
"colorette": "^1.3.0",
"electron-to-chromium": "^1.3.830",
"escalade": "^3.1.1",
"node-releases": "^1.1.75"
}
},
"caniuse-lite": {
"version": "1.0.30001257",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz",
"integrity": "sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==",
"dev": true
},
"colorette": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
"integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.836",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.836.tgz",
"integrity": "sha512-Ney3pHOJBWkG/AqYjrW0hr2AUCsao+2uvq9HUlRP8OlpSdk/zOHOUJP7eu0icDvePC9DlgffuelP4TnOJmMRUg==",
"dev": true
},
"node-releases": {
"version": "1.1.75",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
"integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
"dev": true
},
"source-map": { "source-map": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@ -303,14 +546,141 @@
} }
}, },
"@babel/helpers": { "@babel/helpers": {
"version": "7.13.10", "version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.10.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.4.tgz",
"integrity": "sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==", "integrity": "sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/template": "^7.12.13", "@babel/template": "^7.15.4",
"@babel/traverse": "^7.13.0", "@babel/traverse": "^7.15.4",
"@babel/types": "^7.13.0" "@babel/types": "^7.15.4"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
"dev": true,
"requires": {
"@babel/highlight": "^7.14.5"
}
},
"@babel/generator": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
"integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
}
},
"@babel/helper-function-name": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
"integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
"dev": true,
"requires": {
"@babel/helper-get-function-arity": "^7.15.4",
"@babel/template": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/helper-get-function-arity": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
"integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-hoist-variables": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
"integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-split-export-declaration": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
"integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
"dev": true,
"requires": {
"@babel/types": "^7.15.4"
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.9",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
"integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
"dev": true
},
"@babel/highlight": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
"integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.14.5",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
"version": "7.15.6",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
"integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
"dev": true
},
"@babel/template": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
"integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/parser": "^7.15.4",
"@babel/types": "^7.15.4"
}
},
"@babel/traverse": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
"integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.14.5",
"@babel/generator": "^7.15.4",
"@babel/helper-function-name": "^7.15.4",
"@babel/helper-hoist-variables": "^7.15.4",
"@babel/helper-split-export-declaration": "^7.15.4",
"@babel/parser": "^7.15.4",
"@babel/types": "^7.15.4",
"debug": "^4.1.0",
"globals": "^11.1.0"
}
},
"@babel/types": {
"version": "7.15.6",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
"integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.14.9",
"to-fast-properties": "^2.0.0"
}
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
}
} }
}, },
"@babel/highlight": { "@babel/highlight": {
@ -3492,9 +3862,9 @@
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
}, },
"convert-source-map": { "convert-source-map": {
"version": "1.7.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
"integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
"dev": true, "dev": true,
"requires": { "requires": {
"safe-buffer": "~5.1.1" "safe-buffer": "~5.1.1"

View file

@ -1,6 +1,6 @@
{ {
"name": "cinny", "name": "cinny",
"version": "1.2.0", "version": "1.3.0",
"description": "Yet another matrix client", "description": "Yet another matrix client",
"main": "index.js", "main": "index.js",
"engines": { "engines": {
@ -41,7 +41,7 @@
"twemoji": "^13.1.0" "twemoji": "^13.1.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.13.13", "@babel/core": "^7.15.5",
"@babel/preset-env": "^7.13.12", "@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13", "@babel/preset-react": "^7.13.13",
"assert": "^2.0.0", "assert": "^2.0.0",

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 612 B

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<polygon points="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 549 B

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 810 B

View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<circle cx="17" cy="8" r="3"/>
<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 819 B

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 796 B

View file

@ -4,8 +4,7 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g> <g>
<path d="M12,4c2.8,0,5,2.2,5,5v4v0.8l0.6,0.6l0.6,0.6H5.8l0.6-0.6L7,13.8V13V9C7,6.2,9.2,4,12,4 M12,2C8.1,2,5,5.1,5,9v4l-2,2v2h18 <path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
v-2l-2-2V9C19,5.1,15.9,2,12,2L12,2z"/> <path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
<path d="M9,19c0,1.7,1.3,3,3,3s3-1.3,3-3H9z"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 671 B

After

Width:  |  Height:  |  Size: 640 B

View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<g>
<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
</g>
<circle cx="12" cy="12" r="3"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 718 B

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
</svg>

After

Width:  |  Height:  |  Size: 672 B

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,6.7l1.7,3.7l4.1,0.6l-3,3.1l0.7,4.2l-3.5-2l-3.5,2l0.7-4.2l-3-3.1l4.1-0.6L12,6.7 M12,2L8.9,8.6L2,9.6l5,5.1L5.8,22
l6.2-3.4l6.2,3.4L17,14.8l5-5.1l-6.9-1.1L12,2L12,2z"/>
</svg>

After

Width:  |  Height:  |  Size: 624 B

View file

@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
const notificationClass = alert ? ' notification-badge--alert' : ''; const notificationClass = alert ? ' notification-badge--alert' : '';
return ( return (
<div className={`notification-badge${notificationClass}`}> <div className={`notification-badge${notificationClass}`}>
{content && <Text variant="b3">{content}</Text>} {content !== null && <Text variant="b3">{content}</Text>}
</div> </div>
); );
} }

View file

@ -2,17 +2,18 @@
min-width: 16px; min-width: 16px;
min-height: 8px; min-height: 8px;
padding: 0 var(--sp-ultra-tight); padding: 0 var(--sp-ultra-tight);
background-color: var(--tc-surface-low); background-color: var(--bg-badge);
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
.text { .text {
color: white; color: var(--tc-badge);
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
} }
&--alert { &--alert {
background-color: var(--bg-danger); background-color: var(--bg-positive);
& .text { color: white }
} }
&:empty { &:empty {

View file

@ -7,26 +7,29 @@ import RawIcon from '../system-icons/RawIcon';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
function Button({ function Button({
id, variant, iconSrc, type, onClick, children, disabled, id, className, variant, iconSrc,
type, onClick, children, disabled,
}) { }) {
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`; const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
return ( return (
<button <button
id={id === '' ? undefined : id} id={id === '' ? undefined : id}
className={`btn-${variant} ${iconClass} noselect`} className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)} onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
onClick={onClick} onClick={onClick}
type={type === 'button' ? 'button' : 'submit'} type={type === 'button' ? 'button' : 'submit'}
disabled={disabled} disabled={disabled}
> >
{iconSrc !== null && <RawIcon size="small" src={iconSrc} />} {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
<Text variant="b1">{ children }</Text> {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
{typeof children !== 'string' && children }
</button> </button>
); );
} }
Button.defaultProps = { Button.defaultProps = {
id: '', id: '',
className: null,
variant: 'surface', variant: 'surface',
iconSrc: null, iconSrc: null,
type: 'button', type: 'button',
@ -36,7 +39,8 @@ Button.defaultProps = {
Button.propTypes = { Button.propTypes = {
id: PropTypes.string, id: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']), className: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),
onClick: PropTypes.func, onClick: PropTypes.func,

View file

@ -2,6 +2,7 @@
.btn-surface, .btn-surface,
.btn-primary, .btn-primary,
.btn-positive,
.btn-caution, .btn-caution,
.btn-danger { .btn-danger {
display: inline-flex; display: inline-flex;
@ -67,6 +68,13 @@
@include state.focus(var(--bs-primary-outline)); @include state.focus(var(--bs-primary-outline));
@include state.active(var(--bg-primary-active)); @include state.active(var(--bg-primary-active));
} }
.btn-positive {
box-shadow: var(--bs-positive-border);
@include color(var(--tc-positive-high), var(--ic-positive-normal));
@include state.hover(var(--bg-positive-hover));
@include state.focus(var(--bs-positive-outline));
@include state.active(var(--bg-positive-active));
}
.btn-caution { .btn-caution {
box-shadow: var(--bs-caution-border); box-shadow: var(--bs-caution-border);
@include color(var(--tc-caution-high), var(--ic-caution-normal)); @include color(var(--tc-caution-high), var(--ic-caution-normal));

View file

@ -7,45 +7,46 @@ import Tooltip from '../tooltip/Tooltip';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
import Text from '../text/Text'; import Text from '../text/Text';
// TODO:
// 1. [done] an icon only button have "src"
// 2. have multiple variant
// 3. [done] should have a smart accessibility "label" arial-label
// 4. [done] have size as RawIcon
const IconButton = React.forwardRef(({ const IconButton = React.forwardRef(({
variant, size, type, variant, size, type,
tooltip, tooltipPlacement, src, onClick, tooltip, tooltipPlacement, src, onClick,
}, ref) => ( }, ref) => {
<Tooltip const btn = (
placement={tooltipPlacement}
content={<Text variant="b2">{tooltip}</Text>}
>
<button <button
ref={ref} ref={ref}
className={`ic-btn-${variant}`} className={`ic-btn ic-btn-${variant}`}
onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)} onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
onClick={onClick} onClick={onClick}
type={type === 'button' ? 'button' : 'submit'} type={type === 'button' ? 'button' : 'submit'}
> >
<RawIcon size={size} src={src} /> <RawIcon size={size} src={src} />
</button> </button>
</Tooltip> );
)); if (tooltip === null) return btn;
return (
<Tooltip
placement={tooltipPlacement}
content={<Text variant="b2">{tooltip}</Text>}
>
{btn}
</Tooltip>
);
});
IconButton.defaultProps = { IconButton.defaultProps = {
variant: 'surface', variant: 'surface',
size: 'normal', size: 'normal',
type: 'button', type: 'button',
tooltip: null,
tooltipPlacement: 'top', tooltipPlacement: 'top',
onClick: null, onClick: null,
}; };
IconButton.propTypes = { IconButton.propTypes = {
variant: PropTypes.oneOf(['surface']), variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
size: PropTypes.oneOf(['normal', 'small', 'extra-small']), size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),
tooltip: PropTypes.string.isRequired, tooltip: PropTypes.string,
tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
onClick: PropTypes.func, onClick: PropTypes.func,

View file

@ -1,9 +1,6 @@
@use 'state'; @use 'state';
.ic-btn-surface, .ic-btn {
.ic-btn-primary,
.ic-btn-caution,
.ic-btn-danger {
padding: var(--sp-extra-tight); padding: var(--sp-extra-tight);
border: none; border: none;
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
@ -31,4 +28,22 @@
@include state.hover(var(--bg-surface-hover)); @include state.hover(var(--bg-surface-hover));
@include focus(var(--bg-surface-hover)); @include focus(var(--bg-surface-hover));
@include state.active(var(--bg-surface-active)); @include state.active(var(--bg-surface-active));
}
.ic-btn-positive {
@include color(var(--ic-positive-normal));
@include state.hover(var(--bg-positive-hover));
@include focus(var(--bg-positive-hover));
@include state.active(var(--bg-positive-active));
}
.ic-btn-caution {
@include color(var(--ic-caution-normal));
@include state.hover(var(--bg-caution-hover));
@include focus(var(--bg-caution-hover));
@include state.active(var(--bg-caution-active));
}
.ic-btn-danger {
@include color(var(--ic-danger-normal));
@include state.hover(var(--bg-danger-hover));
@include focus(var(--bg-danger-hover));
@include state.active(var(--bg-danger-active));
} }

View file

@ -93,7 +93,7 @@ MenuItem.defaultProps = {
}; };
MenuItem.propTypes = { MenuItem.propTypes = {
variant: PropTypes.oneOf(['surface', 'caution', 'danger']), variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,

View file

@ -30,6 +30,9 @@
.text { .text {
color: var(--tc-surface-low); color: var(--tc-surface-low);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
&:not(:first-child) { &:not(:first-child) {

View file

@ -8,6 +8,7 @@ function Input({
id, label, value, placeholder, id, label, value, placeholder,
required, type, onChange, forwardRef, required, type, onChange, forwardRef,
resizable, minHeight, onResize, state, resizable, minHeight, onResize, state,
onKeyDown,
}) { }) {
return ( return (
<div className="input-container"> <div className="input-container">
@ -26,6 +27,7 @@ function Input({
autoComplete="off" autoComplete="off"
onChange={onChange} onChange={onChange}
onResize={onResize} onResize={onResize}
onKeyDown={onKeyDown}
/> />
) : ( ) : (
<input <input
@ -38,6 +40,7 @@ function Input({
defaultValue={value} defaultValue={value}
autoComplete="off" autoComplete="off"
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown}
/> />
)} )}
</div> </div>
@ -57,6 +60,7 @@ Input.defaultProps = {
minHeight: 46, minHeight: 46,
onResize: null, onResize: null,
state: 'normal', state: 'normal',
onKeyDown: null,
}; };
Input.propTypes = { Input.propTypes = {
@ -72,6 +76,7 @@ Input.propTypes = {
minHeight: PropTypes.number, minHeight: PropTypes.number,
onResize: PropTypes.func, onResize: PropTypes.func,
state: PropTypes.oneOf(['normal', 'success', 'error']), state: PropTypes.oneOf(['normal', 'success', 'error']),
onKeyDown: PropTypes.func,
}; };
export default Input; export default Input;

View file

@ -0,0 +1,88 @@
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import './ImageUpload.scss';
import initMatrix from '../../../client/initMatrix';
import Text from '../../atoms/text/Text';
import Avatar from '../../atoms/avatar/Avatar';
import Spinner from '../../atoms/spinner/Spinner';
function ImageUpload({
text, bgColor, imageSrc, onUpload, onRequestRemove,
}) {
const [uploadPromise, setUploadPromise] = useState(null);
const uploadImageRef = useRef(null);
async function uploadImage(e) {
const file = e.target.files.item(0);
if (file === null) return;
try {
const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
setUploadPromise(uPromise);
const res = await uPromise;
if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
setUploadPromise(null);
} catch {
setUploadPromise(null);
}
uploadImageRef.current.value = null;
}
function cancelUpload() {
initMatrix.matrixClient.cancelUpload(uploadPromise);
setUploadPromise(null);
uploadImageRef.current.value = null;
}
return (
<div className="img-upload__wrapper">
<button
type="button"
className="img-upload"
onClick={() => {
if (uploadPromise !== null) return;
uploadImageRef.current.click();
}}
>
<Avatar
imageSrc={imageSrc}
text={text.slice(0, 1)}
bgColor={bgColor}
size="large"
/>
<div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
{uploadPromise === null && <Text variant="b3">Upload</Text>}
{uploadPromise !== null && <Spinner size="small" />}
</div>
</button>
{ (typeof imageSrc === 'string' || uploadPromise !== null) && (
<button
className="img-upload__btn-cancel"
type="button"
onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
>
<Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
</button>
)}
<input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
</div>
);
}
ImageUpload.defaultProps = {
text: null,
bgColor: 'transparent',
imageSrc: null,
};
ImageUpload.propTypes = {
text: PropTypes.string,
bgColor: PropTypes.string,
imageSrc: PropTypes.string,
onUpload: PropTypes.func.isRequired,
onRequestRemove: PropTypes.func.isRequired,
};
export default ImageUpload;

View file

@ -0,0 +1,50 @@
.img-upload__wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.img-upload {
display: flex;
cursor: pointer;
position: relative;
&__process {
width: 100%;
height: 100%;
border-radius: var(--bo-radius);
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .6);
position: absolute;
left: 0;
right: 0;
z-index: 1;
& .text {
text-transform: uppercase;
font-weight: 600;
color: white;
}
&--stopped {
display: none;
}
& .donut-spinner {
border-color: rgb(255, 255, 255, .3);
border-left-color: white;
}
}
&:hover .img-upload__process--stopped {
display: flex;
}
&__btn-cancel {
margin-top: var(--sp-extra-tight);
cursor: pointer;
& .text {
color: var(--tc-danger-normal)
}
}
}

View file

@ -128,10 +128,19 @@ MessageContent.propTypes = {
function MessageEdit({ content, onSave, onCancel }) { function MessageEdit({ content, onSave, onCancel }) {
const editInputRef = useRef(null); const editInputRef = useRef(null);
function handleKeyDown(e) {
if (e.keyCode === 13 && e.shiftKey === false) {
e.preventDefault();
onSave(editInputRef.current.value);
}
}
return ( return (
<form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}> <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
<Input <Input
forwardRef={editInputRef} forwardRef={editInputRef}
onKeyDown={handleKeyDown}
value={content} value={content}
placeholder="Edit message" placeholder="Edit message"
required required

View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelIntro.scss'; import './RoomIntro.scss';
import Linkify from 'linkifyjs/react'; import Linkify from 'linkifyjs/react';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
@ -12,27 +12,27 @@ function linkifyContent(content) {
return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>; return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
} }
function ChannelIntro({ function RoomIntro({
roomId, avatarSrc, name, heading, desc, time, roomId, avatarSrc, name, heading, desc, time,
}) { }) {
return ( return (
<div className="channel-intro"> <div className="room-intro">
<Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" /> <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
<div className="channel-intro__content"> <div className="room-intro__content">
<Text className="channel-intro__name" variant="h1">{heading}</Text> <Text className="room-intro__name" variant="h1">{heading}</Text>
<Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text> <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
{ time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>} { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
</div> </div>
</div> </div>
); );
} }
ChannelIntro.defaultProps = { RoomIntro.defaultProps = {
avatarSrc: false, avatarSrc: false,
time: null, time: null,
}; };
ChannelIntro.propTypes = { RoomIntro.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
avatarSrc: PropTypes.oneOfType([ avatarSrc: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
@ -44,4 +44,4 @@ ChannelIntro.propTypes = {
time: PropTypes.string, time: PropTypes.string,
}; };
export default ChannelIntro; export default RoomIntro;

View file

@ -1,4 +1,4 @@
.channel-intro { .room-intro {
margin-top: calc(2 * var(--sp-extra-loose)); margin-top: calc(2 * var(--sp-extra-loose));
margin-bottom: var(--sp-extra-loose); margin-bottom: var(--sp-extra-loose);
padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight)); padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
@ -11,7 +11,7 @@
} }
} }
.channel-intro__content { .room-intro__content {
margin-top: var(--sp-extra-loose); margin-top: var(--sp-extra-loose);
max-width: 640px; max-width: 640px;
} }

View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelSelector.scss'; import './RoomSelector.scss';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
@ -9,41 +9,45 @@ import Avatar from '../../atoms/avatar/Avatar';
import NotificationBadge from '../../atoms/badge/NotificationBadge'; import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script'; import { blurOnBubbling } from '../../atoms/button/script';
function ChannelSelectorWrapper({ function RoomSelectorWrapper({
isSelected, onClick, content, options, isSelected, isUnread, onClick, content, options,
}) { }) {
let myClass = isUnread ? ' room-selector--unread' : '';
myClass += isSelected ? ' room-selector--selected' : '';
return ( return (
<div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}> <div className={`room-selector${myClass}`}>
<button <button
className="channel-selector__content" className="room-selector__content"
type="button" type="button"
onClick={onClick} onClick={onClick}
onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')} onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
> >
{content} {content}
</button> </button>
<div className="channel-selector__options">{options}</div> <div className="room-selector__options">{options}</div>
</div> </div>
); );
} }
ChannelSelectorWrapper.defaultProps = { RoomSelectorWrapper.defaultProps = {
options: null, options: null,
}; };
ChannelSelectorWrapper.propTypes = { RoomSelectorWrapper.propTypes = {
isSelected: PropTypes.bool.isRequired, isSelected: PropTypes.bool.isRequired,
isUnread: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
content: PropTypes.node.isRequired, content: PropTypes.node.isRequired,
options: PropTypes.node, options: PropTypes.node,
}; };
function ChannelSelector({ function RoomSelector({
name, roomId, imageSrc, iconSrc, name, roomId, imageSrc, iconSrc,
isSelected, isUnread, notificationCount, isAlert, isSelected, isUnread, notificationCount, isAlert,
options, onClick, options, onClick,
}) { }) {
return ( return (
<ChannelSelectorWrapper <RoomSelectorWrapper
isSelected={isSelected} isSelected={isSelected}
isUnread={isUnread}
content={( content={(
<> <>
<Avatar <Avatar
@ -67,22 +71,26 @@ function ChannelSelector({
/> />
); );
} }
ChannelSelector.defaultProps = { RoomSelector.defaultProps = {
isSelected: false,
imageSrc: null, imageSrc: null,
iconSrc: null, iconSrc: null,
options: null, options: null,
}; };
ChannelSelector.propTypes = { RoomSelector.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
isSelected: PropTypes.bool.isRequired, isSelected: PropTypes.bool,
isUnread: PropTypes.bool.isRequired, isUnread: PropTypes.bool.isRequired,
notificationCount: PropTypes.number.isRequired, notificationCount: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
isAlert: PropTypes.bool.isRequired, isAlert: PropTypes.bool.isRequired,
options: PropTypes.node, options: PropTypes.node,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
}; };
export default ChannelSelector; export default RoomSelector;

View file

@ -1,25 +1,32 @@
.channel-selector-flex { .room-selector-flex {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.channel-selector-flexItem { .room-selector-flexItem {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
} }
.channel-selector { .room-selector {
@extend .channel-selector-flex; @extend .room-selector-flex;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
cursor: pointer; cursor: pointer;
&--unread {
.room-selector__content > .text {
font-weight: 500;
color: var(--tc-surface-high);
}
}
&--selected { &--selected {
background-color: var(--bg-surface); background-color: var(--bg-surface);
border-color: var(--bg-surface-border); border-color: var(--bg-surface-border);
& .channel-selector__options { & .room-selector__options {
display: flex; display: flex;
} }
} }
@ -27,14 +34,16 @@
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
background-color: var(--bg-surface-hover); background-color: var(--bg-surface-hover);
& .channel-selector__options { & .room-selector__options {
display: flex; display: flex;
} }
} }
} }
&:focus { &:focus-within {
outline: none;
background-color: var(--bg-surface-hover); background-color: var(--bg-surface-hover);
& button {
outline: none;
}
} }
&:active { &:active {
background-color: var(--bg-surface-active); background-color: var(--bg-surface-active);
@ -46,9 +55,9 @@
} }
} }
.channel-selector__content { .room-selector__content {
@extend .channel-selector-flexItem; @extend .room-selector-flexItem;
@extend .channel-selector-flex; @extend .room-selector-flex;
padding: 0 var(--sp-extra-tight); padding: 0 var(--sp-extra-tight);
min-height: 40px; min-height: 40px;
cursor: inherit; cursor: inherit;
@ -58,7 +67,7 @@
} }
& > .text { & > .text {
@extend .channel-selector-flexItem; @extend .room-selector-flexItem;
margin: 0 var(--sp-extra-tight); margin: 0 var(--sp-extra-tight);
color: var(--tc-surface-normal); color: var(--tc-surface-normal);
@ -67,8 +76,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.channel-selector__options { .room-selector__options {
@extend .channel-selector-flex; @extend .room-selector-flex;
display: none; display: none;
margin-right: var(--sp-ultra-tight); margin-right: var(--sp-ultra-tight);
@ -81,7 +90,7 @@
margin: 0 !important; margin: 0 !important;
} }
& .ic-btn-surface { & .ic-btn {
padding: 6px; padding: 6px;
border-radius: calc(var(--bo-radius) / 2); border-radius: calc(var(--bo-radius) / 2);
} }

View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelTile.scss'; import './RoomTile.scss';
import Linkify from 'linkifyjs/react'; import Linkify from 'linkifyjs/react';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
@ -12,20 +12,20 @@ function linkifyContent(content) {
return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>; return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
} }
function ChannelTile({ function RoomTile({
avatarSrc, name, id, avatarSrc, name, id,
inviterName, memberCount, desc, options, inviterName, memberCount, desc, options,
}) { }) {
return ( return (
<div className="channel-tile"> <div className="room-tile">
<div className="channel-tile__avatar"> <div className="room-tile__avatar">
<Avatar <Avatar
imageSrc={avatarSrc} imageSrc={avatarSrc}
bgColor={colorMXID(id)} bgColor={colorMXID(id)}
text={name.slice(0, 1)} text={name.slice(0, 1)}
/> />
</div> </div>
<div className="channel-tile__content"> <div className="room-tile__content">
<Text variant="s1">{name}</Text> <Text variant="s1">{name}</Text>
<Text variant="b3"> <Text variant="b3">
{ {
@ -36,12 +36,12 @@ function ChannelTile({
</Text> </Text>
{ {
desc !== null && (typeof desc === 'string') desc !== null && (typeof desc === 'string')
? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text> ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
: desc : desc
} }
</div> </div>
{ options !== null && ( { options !== null && (
<div className="channel-tile__options"> <div className="room-tile__options">
{options} {options}
</div> </div>
)} )}
@ -49,14 +49,14 @@ function ChannelTile({
); );
} }
ChannelTile.defaultProps = { RoomTile.defaultProps = {
avatarSrc: null, avatarSrc: null,
inviterName: null, inviterName: null,
options: null, options: null,
desc: null, desc: null,
memberCount: null, memberCount: null,
}; };
ChannelTile.propTypes = { RoomTile.propTypes = {
avatarSrc: PropTypes.string, avatarSrc: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
@ -69,4 +69,4 @@ ChannelTile.propTypes = {
options: PropTypes.node, options: PropTypes.node,
}; };
export default ChannelTile; export default RoomTile;

View file

@ -1,4 +1,4 @@
.channel-tile { .room-tile {
display: flex; display: flex;
&__content { &__content {

View file

@ -2,29 +2,22 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './SidebarAvatar.scss'; import './SidebarAvatar.scss';
import Tippy from '@tippyjs/react';
import Avatar from '../../atoms/avatar/Avatar'; import Avatar from '../../atoms/avatar/Avatar';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Tooltip from '../../atoms/tooltip/Tooltip';
import NotificationBadge from '../../atoms/badge/NotificationBadge'; import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script'; import { blurOnBubbling } from '../../atoms/button/script';
const SidebarAvatar = React.forwardRef(({ const SidebarAvatar = React.forwardRef(({
tooltip, text, bgColor, imageSrc, tooltip, text, bgColor, imageSrc,
iconSrc, active, onClick, notifyCount, iconSrc, active, onClick, isUnread, notificationCount, isAlert,
}, ref) => { }, ref) => {
let activeClass = ''; let activeClass = '';
if (active) activeClass = ' sidebar-avatar--active'; if (active) activeClass = ' sidebar-avatar--active';
return ( return (
<Tippy <Tooltip
content={<Text variant="b1">{tooltip}</Text>} content={<Text variant="b1">{tooltip}</Text>}
className="sidebar-avatar-tippy"
touch="hold"
arrow={false}
placement="right" placement="right"
maxWidth={200}
delay={[0, 0]}
duration={[100, 0]}
offset={[0, 0]}
> >
<button <button
ref={ref} ref={ref}
@ -40,9 +33,14 @@ const SidebarAvatar = React.forwardRef(({
iconSrc={iconSrc} iconSrc={iconSrc}
size="normal" size="normal"
/> />
{ notifyCount !== null && <NotificationBadge alert content={notifyCount} /> } { isUnread && (
<NotificationBadge
alert={isAlert}
content={notificationCount !== 0 ? notificationCount : null}
/>
)}
</button> </button>
</Tippy> </Tooltip>
); );
}); });
SidebarAvatar.defaultProps = { SidebarAvatar.defaultProps = {
@ -52,7 +50,9 @@ SidebarAvatar.defaultProps = {
imageSrc: null, imageSrc: null,
active: false, active: false,
onClick: null, onClick: null,
notifyCount: null, isUnread: false,
notificationCount: 0,
isAlert: false,
}; };
SidebarAvatar.propTypes = { SidebarAvatar.propTypes = {
@ -63,10 +63,12 @@ SidebarAvatar.propTypes = {
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
active: PropTypes.bool, active: PropTypes.bool,
onClick: PropTypes.func, onClick: PropTypes.func,
notifyCount: PropTypes.oneOfType([ isUnread: PropTypes.bool,
notificationCount: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.number, PropTypes.number,
]), ]),
isAlert: PropTypes.bool,
}; };
export default SidebarAvatar; export default SidebarAvatar;

View file

@ -1,28 +1,18 @@
.sidebar-avatar-tippy {
padding: var(--sp-extra-tight) var(--sp-normal);
background-color: var(--bg-tooltip);
border-radius: var(--bo-radius);
box-shadow: var(--bs-popup);
.text {
color: var(--tc-tooltip);
}
}
.sidebar-avatar { .sidebar-avatar {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
cursor: pointer; cursor: pointer;
& .notification-badge { & .notification-badge {
position: absolute; position: absolute;
right: var(--sp-extra-tight); right: 0;
top: calc(-1 * var(--sp-ultra-tight)); top: 0;
box-shadow: 0 0 0 2px var(--bg-surface-low); box-shadow: 0 0 0 2px var(--bg-surface-low);
transform: translate(20%, -20%);
margin: 0 !important;
} }
&:focus { &:focus {
outline: none; outline: none;
@ -37,7 +27,7 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: -11px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@ -48,7 +38,8 @@
transition: height 200ms linear; transition: height 200ms linear;
[dir=rtl] & { [dir=rtl] & {
right: 0; left: unset;
right: -11px;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
} }

View file

@ -1,6 +1,6 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './CreateChannel.scss'; import './CreateRoom.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { isRoomAliasAvailable } from '../../../util/matrixUtil'; import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@ -18,7 +18,7 @@ import SettingTile from '../../molecules/setting-tile/SettingTile';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg'; import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function CreateChannel({ isOpen, onRequestClose }) { function CreateRoom({ isOpen, onRequestClose }) {
const [isPublic, togglePublic] = useState(false); const [isPublic, togglePublic] = useState(false);
const [isEncrypted, toggleEncrypted] = useState(true); const [isEncrypted, toggleEncrypted] = useState(true);
const [isValidAddress, updateIsValidAddress] = useState(null); const [isValidAddress, updateIsValidAddress] = useState(null);
@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) {
onRequestClose(); onRequestClose();
} catch (e) { } catch (e) {
if (e.message === 'M_UNKNOWN: Invalid characters in room alias') { if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
updateCreatingError('ERROR: Invalid characters in channel address'); updateCreatingError('ERROR: Invalid characters in room address');
updateIsValidAddress(false); updateIsValidAddress(false);
} else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') { } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
updateCreatingError('ERROR: Channel address is already in use'); updateCreatingError('ERROR: Room address is already in use');
updateIsValidAddress(false); updateIsValidAddress(false);
} else updateCreatingError(e.message); } else updateCreatingError(e.message);
} }
@ -110,26 +110,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
return ( return (
<PopupWindow <PopupWindow
isOpen={isOpen} isOpen={isOpen}
title="Create channel" title="Create room"
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
> >
<div className="create-channel"> <div className="create-room">
<form className="create-channel__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}> <form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
<SettingTile <SettingTile
title="Make channel public" title="Make room public"
options={<Toggle isActive={isPublic} onToggle={togglePublic} />} options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
content={<Text variant="b3">Public channel can be joined by anyone.</Text>} content={<Text variant="b3">Public room can be joined by anyone.</Text>}
/> />
{isPublic && ( {isPublic && (
<div> <div>
<Text className="create-channel__address__label" variant="b2">Channel address</Text> <Text className="create-room__address__label" variant="b2">Room address</Text>
<div className="create-channel__address"> <div className="create-room__address">
<Text variant="b1">#</Text> <Text variant="b1">#</Text>
<Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required /> <Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
<Text variant="b1">{hsString}</Text> <Text variant="b1">{hsString}</Text>
</div> </div>
{isValidAddress === false && <Text className="create-channel__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>} {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
</div> </div>
)} )}
{!isPublic && ( {!isPublic && (
@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
/> />
)} )}
<Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" /> <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
<div className="create-channel__name-wrapper"> <div className="create-room__name-wrapper">
<Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Channel name" required /> <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
<Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button> <Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
</div> </div>
{isCreatingRoom && ( {isCreatingRoom && (
<div className="create-channel__loading"> <div className="create-room__loading">
<Spinner size="small" /> <Spinner size="small" />
<Text>Creating channel...</Text> <Text>Creating room...</Text>
</div> </div>
)} )}
{typeof creatingError === 'string' && <Text className="create-channel__error" variant="b3">{creatingError}</Text>} {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
</form> </form>
</div> </div>
</PopupWindow> </PopupWindow>
); );
} }
CreateChannel.propTypes = { CreateRoom.propTypes = {
isOpen: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired,
onRequestClose: PropTypes.func.isRequired, onRequestClose: PropTypes.func.isRequired,
}; };
export default CreateChannel; export default CreateRoom;

View file

@ -1,4 +1,4 @@
.create-channel { .create-room {
margin: 0 var(--sp-normal); margin: 0 var(--sp-normal);
margin-right: var(--sp-extra-tight); margin-right: var(--sp-extra-tight);

View file

@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import PopupWindow from '../../molecules/popup-window/PopupWindow'; import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile'; import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) {
}; };
}, [procInvite]); }, [procInvite]);
function renderChannelTile(roomId) { function renderRoomTile(roomId) {
const myRoom = initMatrix.matrixClient.getRoom(roomId); const myRoom = initMatrix.matrixClient.getRoom(roomId);
const roomName = myRoom.name; const roomName = myRoom.name;
let roomAlias = myRoom.getCanonicalAlias(); let roomAlias = myRoom.getCanonicalAlias();
if (roomAlias === null) roomAlias = myRoom.roomId; if (roomAlias === null) roomAlias = myRoom.roomId;
return ( return (
<ChannelTile <RoomTile
key={myRoom.roomId} key={myRoom.roomId}
name={roomName} name={roomName}
avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')} avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
@ -91,7 +91,7 @@ function InviteList({ isOpen, onRequestClose }) {
const myRoom = initMatrix.matrixClient.getRoom(roomId); const myRoom = initMatrix.matrixClient.getRoom(roomId);
const roomName = myRoom.name; const roomName = myRoom.name;
return ( return (
<ChannelTile <RoomTile
key={myRoom.roomId} key={myRoom.roomId}
name={roomName} name={roomName}
id={myRoom.getDMInviter()} id={myRoom.getDMInviter()}
@ -114,14 +114,14 @@ function InviteList({ isOpen, onRequestClose }) {
<Text variant="b3">Spaces</Text> <Text variant="b3">Spaces</Text>
</div> </div>
)} )}
{ Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) } { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
{ initMatrix.roomList.inviteRooms.size !== 0 && ( { initMatrix.roomList.inviteRooms.size !== 0 && (
<div className="invites-content__subheading"> <div className="invites-content__subheading">
<Text variant="b3">Channels</Text> <Text variant="b3">Rooms</Text>
</div> </div>
)} )}
{ Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) } { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
</div> </div>
</PopupWindow> </PopupWindow>
); );

View file

@ -14,7 +14,7 @@
} }
} }
& .channel-tile { & .room-tile {
margin-top: var(--sp-normal); margin-top: var(--sp-normal);
&__options { &__options {
align-self: flex-end; align-self: flex-end;

View file

@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import PopupWindow from '../../molecules/popup-window/PopupWindow'; import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile'; import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import UserIC from '../../../../public/res/ic/outlined/user.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg';
@ -188,7 +188,7 @@ function InviteUser({
const userId = user.user_id; const userId = user.user_id;
const name = typeof user.display_name === 'string' ? user.display_name : userId; const name = typeof user.display_name === 'string' ? user.display_name : userId;
return ( return (
<ChannelTile <RoomTile
key={userId} key={userId}
avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null} avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
name={name} name={name}

View file

@ -39,7 +39,7 @@
border-top: 1px solid var(--bg-surface-border); border-top: 1px solid var(--bg-surface-border);
} }
& .channel-tile { & .room-tile {
margin-top: var(--sp-normal); margin-top: var(--sp-normal);
&__options { &__options {
align-self: flex-end; align-self: flex-end;

View file

@ -12,32 +12,33 @@ import { AtoZ } from './common';
const drawerPostie = new Postie(); const drawerPostie = new Postie();
function Directs() { function Directs() {
const { roomList } = initMatrix; const { roomList, notifications } = initMatrix;
const directIds = [...roomList.directs].sort(AtoZ); const directIds = [...roomList.directs].sort(AtoZ);
const [, forceUpdate] = useState({}); const [, forceUpdate] = useState({});
function selectorChanged(activeRoomID, prevActiveRoomId) { function selectorChanged(selectedRoomId, prevSelectedRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return; if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = []; const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID); if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId); if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return; if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, activeRoomID); drawerPostie.post('selector-change', addresses, selectedRoomId);
} }
function unreadChanged(roomId) { function notiChanged(roomId, total, prevTotal) {
if (!drawerPostie.hasTopic('unread-change')) return; if (total === prevTotal) return;
if (!drawerPostie.hasSubscriber('unread-change', roomId)) return; if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId); drawerPostie.post('unread-change', roomId);
}
} }
function roomListUpdated() { function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList; const { spaces, rooms, directs } = initMatrix.roomList;
if (!( if (!(
spaces.has(navigation.getActiveRoomId()) spaces.has(navigation.selectedRoomId)
|| rooms.has(navigation.getActiveRoomId()) || rooms.has(navigation.selectedRoomId)
|| directs.has(navigation.getActiveRoomId())) || directs.has(navigation.selectedRoomId))
) { ) {
selectRoom(null); selectRoom(null);
} }
@ -47,13 +48,11 @@ function Directs() {
useEffect(() => { useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated); roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged); navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged); notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
return () => { return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated); roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged); navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged); notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
}; };
}, []); }, []);
@ -62,6 +61,7 @@ function Directs() {
key={id} key={id}
roomId={id} roomId={id}
drawerPostie={drawerPostie} drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/> />
)); ));
} }

View file

@ -1,57 +1,83 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './Drawer.scss'; import './Drawer.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { selectTab, selectSpace } from '../../../client/action/navigation';
import Text from '../../atoms/text/Text';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import DrawerHeader from './DrawerHeader'; import DrawerHeader from './DrawerHeader';
import DrawerBreadcrumb from './DrawerBreadcrumb';
import Home from './Home'; import Home from './Home';
import Directs from './Directs'; import Directs from './Directs';
function DrawerBradcrumb() {
return (
<div className="breadcrumb__wrapper">
<ScrollView horizontal vertical={false}>
<div>
{/* TODO: bradcrumb space paths when spaces become a thing */}
</div>
</ScrollView>
</div>
);
}
function Drawer() { function Drawer() {
const [activeTab, setActiveTab] = useState('home'); const [systemState, setSystemState] = useState(null);
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
function onTabChanged(tabId) { function onTabSelected(tabId) {
setActiveTab(tabId); setSelectedTab(tabId);
}
function onSpaceSelected(roomId) {
setSpaceId(roomId);
}
function onRoomLeaved(roomId) {
const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
if (lRoomIndex === -1) return;
if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
}
function handleSystemState(state) {
if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
setSystemState({ status: 'Connection lost!' });
}
if (systemState !== null) setSystemState(null);
} }
useEffect(() => { useEffect(() => {
navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged); navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
return () => { return () => {
navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged); navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
}; };
}, []); }, []);
useEffect(() => {
initMatrix.matrixClient.on('sync', handleSystemState);
return () => {
initMatrix.matrixClient.removeListener('sync', handleSystemState);
};
}, [systemState]);
return ( return (
<div className="drawer"> <div className="drawer">
<DrawerHeader activeTab={activeTab} /> <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
<div className="drawer__content-wrapper"> <div className="drawer__content-wrapper">
<DrawerBradcrumb /> {selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
<div className="channels__wrapper"> <div className="rooms__wrapper">
<ScrollView autoHide> <ScrollView autoHide>
<div className="channels-container"> <div className="rooms-container">
{ {
activeTab === 'home' selectedTab !== cons.tabs.DIRECTS
? <Home /> ? <Home spaceId={spaceId} />
: <Directs /> : <Directs />
} }
</div> </div>
</ScrollView> </ScrollView>
</div> </div>
</div> </div>
{ systemState !== null && (
<div className="drawer__state">
<Text>{systemState.status}</Text>
</div>
)}
</div> </div>
); );
} }

View file

@ -18,24 +18,49 @@
border-left: 1px solid var(--bg-surface-border); border-left: 1px solid var(--bg-surface-border);
} }
& .header__title-wrapper .text {
font-weight: 500;
}
&__content-wrapper { &__content-wrapper {
@extend .drawer-flexItem; @extend .drawer-flexItem;
@extend .drawer-flexBox; @extend .drawer-flexBox;
} }
}
.breadcrumb__wrapper { &__state {
display: none; padding: var(--sp-extra-tight);
height: var(--header-height); border-top: 1px solid var(--bg-surface-border);
display: flex;
justify-content: center;
& .text {
color: var(--tc-danger-high);
}
}
} }
.channels__wrapper { .rooms__wrapper {
@extend .drawer-flexItem; @extend .drawer-flexItem;
position: relative;
} }
.channels-container { .rooms-container {
padding-bottom: var(--sp-extra-loose); padding-bottom: var(--sp-extra-loose);
& > .channel-selector { &::before {
position: absolute;
top: 0;
content: '';
display: inline-block;
width: 100%;
height: 8px;
background-image: linear-gradient(
to bottom,
var(--bg-surface-low),
var(--bg-surface-low-transparent));
}
& > .room-selector {
width: calc(100% - var(--sp-extra-tight)); width: calc(100% - var(--sp-extra-tight));
margin-left: auto; margin-left: auto;
@ -46,7 +71,7 @@
} }
& > .channel-selector:first-child { & > .room-selector:first-child {
margin-top: var(--sp-extra-tight); margin-top: var(--sp-extra-tight);
} }

View file

@ -0,0 +1,131 @@
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './DrawerBreadcrumb.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import { selectSpace } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import { abbreviateNumber } from '../../../util/common';
import Text from '../../atoms/text/Text';
import RawIcon from '../../atoms/system-icons/RawIcon';
import Button from '../../atoms/button/Button';
import ScrollView from '../../atoms/scroll/ScrollView';
import NotificationBadge from '../../atoms/badge/NotificationBadge';
import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
function DrawerBreadcrumb({ spaceId }) {
const [, forceUpdate] = useState({});
const scrollRef = useRef(null);
const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
const spacePath = navigation.selectedSpacePath;
function onNotiChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
if (navigation.selectedSpacePath.includes(roomId)) {
forceUpdate({});
}
if (navigation.selectedSpacePath[0] === cons.tabs.HOME) {
if (!roomList.isOrphan(roomId)) return;
if (roomList.directs.has(roomId)) return;
forceUpdate({});
}
}
useEffect(() => {
requestAnimationFrame(() => {
if (scrollRef?.current === null) return;
scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
});
notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
return () => {
notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
};
}, [spaceId]);
if (spacePath.length === 1) return null;
function getHomeNotiExcept(childId) {
const orphans = roomList.getOrphans();
const childIndex = orphans.indexOf(childId);
if (childId !== -1) orphans.splice(childIndex, 1);
let noti = null;
orphans.forEach((roomId) => {
if (!notifications.hasNoti(roomId)) return;
if (noti === null) noti = { total: 0, highlight: 0 };
const childNoti = notifications.getNoti(roomId);
noti.total += childNoti.total;
noti.highlight += childNoti.highlight;
});
return noti;
}
function getNotiExcept(roomId, childId) {
if (!notifications.hasNoti(roomId)) return null;
const noti = notifications.getNoti(roomId);
if (!notifications.hasNoti(childId)) return noti;
if (noti.from === null) return noti;
if (noti.from.has(childId) && noti.from.size === 1) return null;
const childNoti = notifications.getNoti(childId);
return {
total: noti.total - childNoti.total,
highlight: noti.highlight - childNoti.highlight,
};
}
return (
<div className="breadcrumb__wrapper">
<ScrollView ref={scrollRef} horizontal vertical={false} invisible>
<div className="breadcrumb">
{
spacePath.map((id, index) => {
const noti = (id !== cons.tabs.HOME && index < spacePath.length)
? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
: getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
return (
<React.Fragment
key={id}
>
{ index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
<Button
className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
onClick={() => selectSpace(id)}
>
<Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
{ noti !== null && (
<NotificationBadge
alert={noti.highlight !== 0}
content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
/>
)}
</Button>
</React.Fragment>
);
})
}
<div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
</div>
</ScrollView>
</div>
);
}
DrawerBreadcrumb.defaultProps = {
spaceId: null,
};
DrawerBreadcrumb.propTypes = {
spaceId: PropTypes.string,
};
export default DrawerBreadcrumb;

View file

@ -0,0 +1,68 @@
.breadcrumb__wrapper {
height: var(--header-height);
position: relative;
}
.breadcrumb {
display: flex;
align-items: center;
height: 100%;
margin: 0 var(--sp-extra-tight);
&::before,
&::after {
flex-shrink: 0;
position: absolute;
right: 0;
z-index: 99;
content: '';
display: inline-block;
min-width: 8px;
width: 8px;
height: 100%;
background-image: linear-gradient(
to right,
var(--bg-surface-low-transparent),
var(--bg-surface-low)
);
}
&::before {
left: 0;
right: unset;
background-image: linear-gradient(
to left,
var(--bg-surface-low-transparent),
var(--bg-surface-low)
);
}
& > * {
flex-shrink: 0;
}
& > .btn-surface {
min-width: 0;
padding: var(--sp-extra-tight) 10px;
white-space: nowrap;
box-shadow: none;
& p {
max-width: 86px;
overflow: hidden;
text-overflow: ellipsis;
}
& .notification-badge {
margin-left: var(--sp-extra-tight);
[dir=rtl] & {
margin-left: 0;
margin-right: var(--sp-extra-tight);
}
}
}
&__btn--selected {
box-shadow: var(--bs-surface-border) !important;
background-color: var(--bg-surface);
}
}

View file

@ -1,9 +1,12 @@
import React from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import { import {
openPublicChannels, openCreateChannel, openInviteUser, openPublicRooms, openCreateRoom, openInviteUser,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Header, { TitleWrapper } from '../../atoms/header/Header'; import Header, { TitleWrapper } from '../../atoms/header/Header';
@ -13,43 +16,71 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
import PlusIC from '../../../../public/res/ic/outlined/plus.svg'; import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg'; import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
import PinIC from '../../../../public/res/ic/outlined/pin.svg';
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
function DrawerHeader({ selectedTab, spaceId }) {
const [, forceUpdate] = useState({});
const mx = initMatrix.matrixClient;
const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
const room = mx.getRoom(spaceId);
const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
function DrawerHeader({ activeTab }) {
return ( return (
<Header> <Header>
<TitleWrapper> <TitleWrapper>
<Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text> <Text variant="s1">{spaceName || tabName}</Text>
</TitleWrapper> </TitleWrapper>
{(activeTab === 'dms') {spaceName && (
? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> <IconButton
: ( size="extra-small"
variant="surface"
tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
onClick={() => {
if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
else createSpaceShortcut(spaceId);
forceUpdate({});
}}
/>
)}
{ selectedTab === cons.tabs.DIRECTS && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
{ selectedTab !== cons.tabs.DIRECTS && !spaceName && (
<>
<ContextMenu <ContextMenu
content={(hideMenu) => ( content={(hideMenu) => (
<> <>
<MenuHeader>Add channel</MenuHeader> <MenuHeader>Add room</MenuHeader>
<MenuItem <MenuItem
iconSrc={HashPlusIC} iconSrc={HashPlusIC}
onClick={() => { hideMenu(); openCreateChannel(); }} onClick={() => { hideMenu(); openCreateRoom(); }}
> >
Create new channel Create new room
</MenuItem> </MenuItem>
<MenuItem <MenuItem
iconSrc={HashSearchIC} iconSrc={HashSearchIC}
onClick={() => { hideMenu(); openPublicChannels(); }} onClick={() => { hideMenu(); openPublicRooms(); }}
> >
Add Public channel Add public room
</MenuItem> </MenuItem>
</> </>
)} )}
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)} render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
/> />
)} </>
)}
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */} {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
</Header> </Header>
); );
} }
DrawerHeader.defaultProps = {
spaceId: null,
};
DrawerHeader.propTypes = { DrawerHeader.propTypes = {
activeTab: PropTypes.string.isRequired, selectedTab: PropTypes.string.isRequired,
spaceId: PropTypes.string,
}; };
export default DrawerHeader; export default DrawerHeader;

View file

@ -1,9 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { selectRoom } from '../../../client/action/navigation'; import { selectSpace, selectRoom } from '../../../client/action/navigation';
import Postie from '../../../util/Postie'; import Postie from '../../../util/Postie';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
@ -12,33 +13,46 @@ import Selector from './Selector';
import { AtoZ } from './common'; import { AtoZ } from './common';
const drawerPostie = new Postie(); const drawerPostie = new Postie();
function Home() { function Home({ spaceId }) {
const { roomList } = initMatrix;
const spaceIds = [...roomList.spaces].sort(AtoZ);
const roomIds = [...roomList.rooms].sort(AtoZ);
const [, forceUpdate] = useState({}); const [, forceUpdate] = useState({});
const { roomList, notifications } = initMatrix;
let spaceIds = [];
let roomIds = [];
let directIds = [];
function selectorChanged(activeRoomID, prevActiveRoomId) { const spaceChildIds = roomList.getSpaceChildren(spaceId);
if (spaceChildIds) {
spaceIds = spaceChildIds.filter((roomId) => roomList.spaces.has(roomId)).sort(AtoZ);
roomIds = spaceChildIds.filter((roomId) => roomList.rooms.has(roomId)).sort(AtoZ);
directIds = spaceChildIds.filter((roomId) => roomList.directs.has(roomId)).sort(AtoZ);
} else {
spaceIds = [...roomList.spaces]
.filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
roomIds = [...roomList.rooms]
.filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
}
function selectorChanged(selectedRoomId, prevSelectedRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return; if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = []; const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID); if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId); if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return; if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, activeRoomID); drawerPostie.post('selector-change', addresses, selectedRoomId);
} }
function unreadChanged(roomId) { function notiChanged(roomId, total, prevTotal) {
if (!drawerPostie.hasTopic('unread-change')) return; if (total === prevTotal) return;
if (!drawerPostie.hasSubscriber('unread-change', roomId)) return; if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId); drawerPostie.post('unread-change', roomId);
}
} }
function roomListUpdated() { function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList; const { spaces, rooms, directs } = initMatrix.roomList;
if (!( if (!(
spaces.has(navigation.getActiveRoomId()) spaces.has(navigation.selectedRoomId)
|| rooms.has(navigation.getActiveRoomId()) || rooms.has(navigation.selectedRoomId)
|| directs.has(navigation.getActiveRoomId())) || directs.has(navigation.selectedRoomId))
) { ) {
selectRoom(null); selectRoom(null);
} }
@ -48,13 +62,11 @@ function Home() {
useEffect(() => { useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated); roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged); navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged); notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
return () => { return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated); roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged); navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged); notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
}; };
}, []); }, []);
@ -67,20 +79,38 @@ function Home() {
roomId={id} roomId={id}
isDM={false} isDM={false}
drawerPostie={drawerPostie} drawerPostie={drawerPostie}
onClick={() => selectSpace(id)}
/> />
))} ))}
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> } { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
{ roomIds.map((id) => ( { roomIds.map((id) => (
<Selector <Selector
key={id} key={id}
roomId={id} roomId={id}
isDM={false} isDM={false}
drawerPostie={drawerPostie} drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/> />
)) } )) }
{ directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
{ directIds.map((id) => (
<Selector
key={id}
roomId={id}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
))}
</> </>
); );
} }
Home.defaultProps = {
spaceId: null,
};
Home.propTypes = {
spaceId: PropTypes.string,
};
export default Home; export default Home;

View file

@ -3,27 +3,36 @@ import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import { selectRoom } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { openRoomOptions } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { getEventCords, abbreviateNumber } from '../../../util/common';
import ChannelSelector from '../../molecules/channel-selector/ChannelSelector'; import IconButton from '../../atoms/button/IconButton';
import RoomSelector from '../../molecules/room-selector/RoomSelector';
import HashIC from '../../../../public/res/ic/outlined/hash.svg'; import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg'; import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
import SpaceIC from '../../../../public/res/ic/outlined/space.svg'; import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg'; import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
import PinIC from '../../../../public/res/ic/outlined/pin.svg';
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
function Selector({ roomId, isDM, drawerPostie }) { function Selector({
roomId, isDM, drawerPostie, onClick,
}) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const noti = initMatrix.notifications;
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null; let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
const [isSelected, setIsSelected] = useState(navigation.getActiveRoomId() === roomId); const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
const [, forceUpdate] = useState({}); const [, forceUpdate] = useState({});
function selectorChanged(activeRoomId) { function selectorChanged(selectedRoomId) {
setIsSelected(activeRoomId === roomId); setIsSelected(selectedRoomId === roomId);
} }
function changeNotificationBadge() { function changeNotificationBadge() {
forceUpdate({}); forceUpdate({});
@ -38,27 +47,57 @@ function Selector({ roomId, isDM, drawerPostie }) {
}; };
}, []); }, []);
if (room.isSpaceRoom()) {
return (
<RoomSelector
key={roomId}
name={room.name}
roomId={roomId}
iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
isUnread={noti.hasNoti(roomId)}
notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
isAlert={noti.getHighlightNoti(roomId) !== 0}
onClick={onClick}
options={(
<IconButton
size="extra-small"
variant="surface"
tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Unpin' : 'Pin to sidebar'}
tooltipPlacement="right"
src={initMatrix.roomList.spaceShortcut.has(roomId) ? PinFilledIC : PinIC}
onClick={() => {
if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
else createSpaceShortcut(roomId);
forceUpdate({});
}}
/>
)}
/>
);
}
return ( return (
<ChannelSelector <RoomSelector
key={roomId} key={roomId}
name={room.name} name={room.name}
roomId={roomId} roomId={roomId}
imageSrc={isDM ? imageSrc : null} imageSrc={isDM ? imageSrc : null}
iconSrc={ // eslint-disable-next-line no-nested-ternary
isDM iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
? null
: (() => {
if (room.isSpaceRoom()) {
return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
}
return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
})()
}
isSelected={isSelected} isSelected={isSelected}
isUnread={doesRoomHaveUnread(room)} isUnread={noti.hasNoti(roomId)}
notificationCount={room.getUnreadNotificationCount('total') || 0} notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
isAlert={room.getUnreadNotificationCount('highlight') !== 0} isAlert={noti.getHighlightNoti(roomId) !== 0}
onClick={() => selectRoom(roomId)} onClick={onClick}
options={(
<IconButton
size="extra-small"
tooltip="Options"
tooltipPlacement="right"
src={VerticalMenuIC}
onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
/>
)}
/> />
); );
} }
@ -71,6 +110,7 @@ Selector.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
isDM: PropTypes.bool, isDM: PropTypes.bool,
drawerPostie: PropTypes.shape({}).isRequired, drawerPostie: PropTypes.shape({}).isRequired,
onClick: PropTypes.func.isRequired,
}; };
export default Selector; export default Selector;

View file

@ -6,9 +6,10 @@ import cons from '../../../client/state/cons';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import logout from '../../../client/action/logout'; import logout from '../../../client/action/logout';
import { import {
changeTab, openInviteList, openPublicChannels, openSettings, selectTab, openInviteList, openPublicRooms, openSettings,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar'; import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@ -55,48 +56,127 @@ function ProfileAvatarMenu() {
} }
function SideBar() { function SideBar() {
const totalInviteCount = () => initMatrix.roomList.inviteRooms.size const { roomList, notifications } = initMatrix;
+ initMatrix.roomList.inviteSpaces.size const mx = initMatrix.matrixClient;
+ initMatrix.roomList.inviteDirects.size; const totalInviteCount = () => roomList.inviteRooms.size
+ roomList.inviteSpaces.size
+ roomList.inviteDirects.size;
const [totalInvites, updateTotalInvites] = useState(totalInviteCount()); const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
const [activeTab, setActiveTab] = useState('home'); const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [, forceUpdate] = useState({});
function onTabChanged(tabId) { function onTabSelected(tabId) {
setActiveTab(tabId); setSelectedTab(tabId);
} }
function onInviteListChange() { function onInviteListChange() {
updateTotalInvites(totalInviteCount()); updateTotalInvites(totalInviteCount());
} }
function onSpaceShortcutUpdated() {
forceUpdate({});
}
function onNotificationChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
forceUpdate({});
}
useEffect(() => { useEffect(() => {
navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged); navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
initMatrix.roomList.on( roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
cons.events.roomList.INVITELIST_UPDATED, roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
onInviteListChange, notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
);
return () => { return () => {
navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged); navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
initMatrix.roomList.removeListener( roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
cons.events.roomList.INVITELIST_UPDATED, roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
onInviteListChange, notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
);
}; };
}, []); }, []);
function getHomeNoti() {
const orphans = roomList.getOrphans();
let noti = null;
orphans.forEach((roomId) => {
if (!notifications.hasNoti(roomId)) return;
if (noti === null) noti = { total: 0, highlight: 0 };
const childNoti = notifications.getNoti(roomId);
noti.total += childNoti.total;
noti.highlight += childNoti.highlight;
});
return noti;
}
function getDMsNoti() {
if (roomList.directs.size === 0) return null;
let noti = null;
[...roomList.directs].forEach((roomId) => {
if (!notifications.hasNoti(roomId)) return;
if (noti === null) noti = { total: 0, highlight: 0 };
const childNoti = notifications.getNoti(roomId);
noti.total += childNoti.total;
noti.highlight += childNoti.highlight;
});
return noti;
}
// TODO: bellow operations are heavy.
// refactor this component into more smaller components.
const dmsNoti = getDMsNoti();
const homeNoti = getHomeNoti();
return ( return (
<div className="sidebar"> <div className="sidebar">
<div className="sidebar__scrollable"> <div className="sidebar__scrollable">
<ScrollView invisible> <ScrollView invisible>
<div className="scrollable-content"> <div className="scrollable-content">
<div className="featured-container"> <div className="featured-container">
<SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} /> <SidebarAvatar
<SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} /> active={selectedTab === cons.tabs.HOME}
<SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} /> onClick={() => selectTab(cons.tabs.HOME)}
tooltip="Home"
iconSrc={HomeIC}
isUnread={homeNoti !== null}
notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
isAlert={homeNoti?.highlight > 0}
/>
<SidebarAvatar
active={selectedTab === cons.tabs.DIRECTS}
onClick={() => selectTab(cons.tabs.DIRECTS)}
tooltip="People"
iconSrc={UserIC}
isUnread={dmsNoti !== null}
notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
isAlert={dmsNoti?.highlight > 0}
/>
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
</div> </div>
<div className="sidebar-divider" /> <div className="sidebar-divider" />
<div className="space-container" /> <div className="space-container">
{
[...roomList.spaceShortcut].map((shortcut) => {
const sRoomId = shortcut;
const room = mx.getRoom(sRoomId);
return (
<SidebarAvatar
active={selectedTab === sRoomId}
key={sRoomId}
tooltip={room.name}
bgColor={colorMXID(room.roomId)}
imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
text={room.name.slice(0, 1)}
isUnread={notifications.hasNoti(sRoomId)}
notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
onClick={() => selectTab(shortcut)}
/>
);
})
}
</div>
</div> </div>
</ScrollView> </ScrollView>
</div> </div>
@ -105,7 +185,9 @@ function SideBar() {
<div className="sticky-container"> <div className="sticky-container">
{ totalInvites !== 0 && ( { totalInvites !== 0 && (
<SidebarAvatar <SidebarAvatar
notifyCount={totalInvites} isUnread
notificationCount={totalInvites}
isAlert
onClick={() => openInviteList()} onClick={() => openInviteList()}
tooltip="Invites" tooltip="Invites"
iconSrc={InviteIC} iconSrc={InviteIC}

View file

@ -39,13 +39,12 @@
height: 8px; height: 8px;
background: transparent; background: transparent;
// background-image: linear-gradient(to top, var(--bg-surface-low), transparent); background-image: linear-gradient(
// It produce bug in safari to top,
// To fix it, we have to set the color as a fully transparent version of that exact color. like: var(--bg-surface-low),
// background-image: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0)); var(--bg-surface-low-transparent));
// TODO: fix this bug while implementing spaces
position: sticky; position: sticky;
bottom: 0; bottom: -1px;
left: 0; left: 0;
} }
} }

View file

@ -0,0 +1,89 @@
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import colorMXID from '../../../util/colorMXID';
import Button from '../../atoms/button/Button';
import ImageUpload from '../../molecules/image-upload/ImageUpload';
import Input from '../../atoms/input/Input';
import './ProfileEditor.scss';
// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
function ProfileEditor({
userId,
}) {
const mx = initMatrix.matrixClient;
const displayNameRef = useRef(null);
const bgColor = colorMXID(userId);
const [avatarSrc, setAvatarSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 80, 80, 'crop') || null);
const [disabled, setDisabled] = useState(true);
let username = mx.getUser(mx.getUserId()).displayName;
// Sets avatar URL and updates the avatar component in profile editor to reflect new upload
function handleAvatarUpload(url) {
if (url === null) {
if (confirm('Are you sure you want to remove avatar?')) {
mx.setAvatarUrl('');
setAvatarSrc(null);
}
return;
}
mx.setAvatarUrl(url);
setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
}
function saveDisplayName() {
const newDisplayName = displayNameRef.current.value;
if (newDisplayName !== null && newDisplayName !== username) {
mx.setDisplayName(newDisplayName);
username = newDisplayName;
setDisabled(true);
}
}
function onDisplayNameInputChange() {
setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
}
function cancelDisplayNameChanges() {
displayNameRef.current.value = username;
onDisplayNameInputChange();
}
return (
<form
className="profile-editor"
onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
>
<ImageUpload
text={username}
bgColor={bgColor}
imageSrc={avatarSrc}
onUpload={handleAvatarUpload}
onRequestRemove={() => handleAvatarUpload(null)}
/>
<div className="profile-editor__input-wrapper">
<Input
label={`Display name of ${mx.getUserId()}`}
onChange={onDisplayNameInputChange}
value={mx.getUser(mx.getUserId()).displayName}
forwardRef={displayNameRef}
/>
<Button variant="primary" type="submit" disabled={disabled}>Save</Button>
<Button onClick={cancelDisplayNameChanges}>Cancel</Button>
</div>
</form>
);
}
ProfileEditor.defaultProps = {
userId: null,
};
ProfileEditor.propTypes = {
userId: PropTypes.string,
};
export default ProfileEditor;

View file

@ -0,0 +1,30 @@
.profile-editor {
display: flex;
align-items: flex-start;
}
.profile-editor__input-wrapper {
flex: 1;
min-width: 0;
margin-top: 10px;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
& > .input-container {
flex: 1;
}
& > button {
height: 46px;
margin-top: var(--sp-normal);
}
& > * {
margin-left: var(--sp-normal);
[dir=rtl] & {
margin-left: 0;
margin-right: var(--sp-normal);
}
}
}

View file

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './PublicChannels.scss'; import './PublicRooms.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import PopupWindow from '../../molecules/popup-window/PopupWindow'; import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile'; import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@ -53,7 +53,7 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
} catch (e) { } catch (e) {
setStatus({ setStatus({
isJoining: false, isJoining: false,
error: `Unable to join ${alias}. Either channel is private or doesn't exist.`, error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
roomId: null, roomId: null,
tempRoomId: null, tempRoomId: null,
}); });
@ -84,38 +84,38 @@ TryJoinWithAlias.propTypes = {
onRequestClose: PropTypes.func.isRequired, onRequestClose: PropTypes.func.isRequired,
}; };
function PublicChannels({ isOpen, searchTerm, onRequestClose }) { function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
const [isSearching, updateIsSearching] = useState(false); const [isSearching, updateIsSearching] = useState(false);
const [isViewMore, updateIsViewMore] = useState(false); const [isViewMore, updateIsViewMore] = useState(false);
const [publicChannels, updatePublicChannels] = useState([]); const [publicRooms, updatePublicRooms] = useState([]);
const [nextBatch, updateNextBatch] = useState(undefined); const [nextBatch, updateNextBatch] = useState(undefined);
const [searchQuery, updateSearchQuery] = useState({}); const [searchQuery, updateSearchQuery] = useState({});
const [joiningChannels, updateJoiningChannels] = useState(new Set()); const [joiningRooms, updateJoiningRooms] = useState(new Set());
const channelNameRef = useRef(null); const roomNameRef = useRef(null);
const hsRef = useRef(null); const hsRef = useRef(null);
const userId = initMatrix.matrixClient.getUserId(); const userId = initMatrix.matrixClient.getUserId();
async function searchChannels(viewMore) { async function searchRooms(viewMore) {
let inputChannelName = channelNameRef?.current?.value || searchTerm; let inputRoomName = roomNameRef?.current?.value || searchTerm;
let isInputAlias = false; let isInputAlias = false;
if (typeof inputChannelName === 'string') { if (typeof inputRoomName === 'string') {
isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1; isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
} }
const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null; const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
let inputHs = hsFromAlias || hsRef?.current?.value; let inputHs = hsFromAlias || hsRef?.current?.value;
if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1); if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
if (typeof inputChannelName !== 'string') inputChannelName = ''; if (typeof inputRoomName !== 'string') inputRoomName = '';
if (isSearching) return; if (isSearching) return;
if (viewMore !== true if (viewMore !== true
&& inputChannelName === searchQuery.name && inputRoomName === searchQuery.name
&& inputHs === searchQuery.homeserver && inputHs === searchQuery.homeserver
) return; ) return;
updateSearchQuery({ updateSearchQuery({
name: inputChannelName, name: inputRoomName,
homeserver: inputHs, homeserver: inputHs,
}); });
if (isViewMore !== viewMore) updateIsViewMore(viewMore); if (isViewMore !== viewMore) updateIsViewMore(viewMore);
@ -128,26 +128,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
since: viewMore ? nextBatch : undefined, since: viewMore ? nextBatch : undefined,
include_all_networks: true, include_all_networks: true,
filter: { filter: {
generic_search_term: inputChannelName, generic_search_term: inputRoomName,
}, },
}); });
const totalChannels = viewMore ? publicChannels.concat(result.chunk) : result.chunk; const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
updatePublicChannels(totalChannels); updatePublicRooms(totalRooms);
updateNextBatch(result.next_batch); updateNextBatch(result.next_batch);
updateIsSearching(false); updateIsSearching(false);
updateIsViewMore(false); updateIsViewMore(false);
if (totalChannels.length === 0) { if (totalRooms.length === 0) {
updateSearchQuery({ updateSearchQuery({
error: `No result found for "${inputChannelName}" on ${inputHs}`, error: `No result found for "${inputRoomName}" on ${inputHs}`,
alias: isInputAlias ? inputChannelName : null, alias: isInputAlias ? inputRoomName : null,
}); });
} }
} catch (e) { } catch (e) {
updatePublicChannels([]); updatePublicRooms([]);
updateSearchQuery({ updateSearchQuery({
error: 'Something went wrong!', error: 'Something went wrong!',
alias: isInputAlias ? inputChannelName : null, alias: isInputAlias ? inputRoomName : null,
}); });
updateIsSearching(false); updateIsSearching(false);
updateNextBatch(undefined); updateNextBatch(undefined);
@ -156,13 +156,13 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
} }
useEffect(() => { useEffect(() => {
if (isOpen) searchChannels(); if (isOpen) searchRooms();
}, [isOpen]); }, [isOpen]);
function handleOnRoomAdded(roomId) { function handleOnRoomAdded(roomId) {
if (joiningChannels.has(roomId)) { if (joiningRooms.has(roomId)) {
joiningChannels.delete(roomId); joiningRooms.delete(roomId);
updateJoiningChannels(new Set(Array.from(joiningChannels))); updateJoiningRooms(new Set(Array.from(joiningRooms)));
} }
} }
useEffect(() => { useEffect(() => {
@ -170,36 +170,36 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
return () => { return () => {
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded); initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
}; };
}, [joiningChannels]); }, [joiningRooms]);
function handleViewChannel(roomId) { function handleViewRoom(roomId) {
selectRoom(roomId); selectRoom(roomId);
onRequestClose(); onRequestClose();
} }
function joinChannel(roomIdOrAlias) { function joinRoom(roomIdOrAlias) {
joiningChannels.add(roomIdOrAlias); joiningRooms.add(roomIdOrAlias);
updateJoiningChannels(new Set(Array.from(joiningChannels))); updateJoiningRooms(new Set(Array.from(joiningRooms)));
roomActions.join(roomIdOrAlias, false); roomActions.join(roomIdOrAlias, false);
} }
function renderChannelList(channels) { function renderRoomList(rooms) {
return channels.map((channel) => { return rooms.map((room) => {
const alias = typeof channel.canonical_alias === 'string' ? channel.canonical_alias : channel.room_id; const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
const name = typeof channel.name === 'string' ? channel.name : alias; const name = typeof room.name === 'string' ? room.name : alias;
const isJoined = initMatrix.roomList.rooms.has(channel.room_id); const isJoined = initMatrix.roomList.rooms.has(room.room_id);
return ( return (
<ChannelTile <RoomTile
key={channel.room_id} key={room.room_id}
avatarSrc={typeof channel.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(channel.avatar_url, 42, 42, 'crop') : null} avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
name={name} name={name}
id={alias} id={alias}
memberCount={channel.num_joined_members} memberCount={room.num_joined_members}
desc={typeof channel.topic === 'string' ? channel.topic : null} desc={typeof room.topic === 'string' ? room.topic : null}
options={( options={(
<> <>
{isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>} {isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
{!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)} {!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
</> </>
)} )}
/> />
@ -210,26 +210,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
return ( return (
<PopupWindow <PopupWindow
isOpen={isOpen} isOpen={isOpen}
title="Public channels" title="Public rooms"
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
> >
<div className="public-channels"> <div className="public-rooms">
<form className="public-channels__form" onSubmit={(e) => { e.preventDefault(); searchChannels(); }}> <form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
<div className="public-channels__input-wrapper"> <div className="public-rooms__input-wrapper">
<Input value={searchTerm} forwardRef={channelNameRef} label="Channel name or alias" /> <Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
<Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required /> <Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
</div> </div>
<Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button> <Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
</form> </form>
<div className="public-channels__search-status"> <div className="public-rooms__search-status">
{ {
typeof searchQuery.name !== 'undefined' && isSearching && ( typeof searchQuery.name !== 'undefined' && isSearching && (
searchQuery.name === '' searchQuery.name === ''
? ( ? (
<div className="flex--center"> <div className="flex--center">
<Spinner size="small" /> <Spinner size="small" />
<Text variant="b2">{`Loading public channels from ${searchQuery.homeserver}...`}</Text> <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
</div> </div>
) )
: ( : (
@ -243,28 +243,28 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
{ {
typeof searchQuery.name !== 'undefined' && !isSearching && ( typeof searchQuery.name !== 'undefined' && !isSearching && (
searchQuery.name === '' searchQuery.name === ''
? <Text variant="b2">{`Public channels on ${searchQuery.homeserver}.`}</Text> ? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
: <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text> : <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
) )
} }
{ searchQuery.error && ( { searchQuery.error && (
<> <>
<Text className="public-channels__search-error" variant="b2">{searchQuery.error}</Text> <Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
{typeof searchQuery.alias === 'string' && ( {typeof searchQuery.alias === 'string' && (
<TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} /> <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
)} )}
</> </>
)} )}
</div> </div>
{ publicChannels.length !== 0 && ( { publicRooms.length !== 0 && (
<div className="public-channels__content"> <div className="public-rooms__content">
{ renderChannelList(publicChannels) } { renderRoomList(publicRooms) }
</div> </div>
)} )}
{ publicChannels.length !== 0 && publicChannels.length % SEARCH_LIMIT === 0 && ( { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
<div className="public-channels__view-more"> <div className="public-rooms__view-more">
{ isViewMore !== true && ( { isViewMore !== true && (
<Button onClick={() => searchChannels(true)}>View more</Button> <Button onClick={() => searchRooms(true)}>View more</Button>
)} )}
{ isViewMore && <Spinner /> } { isViewMore && <Spinner /> }
</div> </div>
@ -274,14 +274,14 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
); );
} }
PublicChannels.defaultProps = { PublicRooms.defaultProps = {
searchTerm: undefined, searchTerm: undefined,
}; };
PublicChannels.propTypes = { PublicRooms.propTypes = {
isOpen: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired,
searchTerm: PropTypes.string, searchTerm: PropTypes.string,
onRequestClose: PropTypes.func.isRequired, onRequestClose: PropTypes.func.isRequired,
}; };
export default PublicChannels; export default PublicRooms;

View file

@ -1,4 +1,4 @@
.public-channels { .public-rooms {
margin: 0 var(--sp-normal); margin: 0 var(--sp-normal);
margin-right: var(--sp-extra-tight); margin-right: var(--sp-extra-tight);
margin-top: var(--sp-extra-tight); margin-top: var(--sp-extra-tight);
@ -75,7 +75,7 @@
} }
} }
& .channel-tile { & .room-tile {
margin-top: var(--sp-normal); margin-top: var(--sp-normal);
&__options { &__options {
align-self: flex-end; align-self: flex-end;

View file

@ -4,17 +4,17 @@ import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import InviteList from '../invite-list/InviteList'; import InviteList from '../invite-list/InviteList';
import PublicChannels from '../public-channels/PublicChannels'; import PublicRooms from '../public-rooms/PublicRooms';
import CreateChannel from '../create-channel/CreateChannel'; import CreateRoom from '../create-room/CreateRoom';
import InviteUser from '../invite-user/InviteUser'; import InviteUser from '../invite-user/InviteUser';
import Settings from '../settings/Settings'; import Settings from '../settings/Settings';
function Windows() { function Windows() {
const [isInviteList, changeInviteList] = useState(false); const [isInviteList, changeInviteList] = useState(false);
const [publicChannels, changePublicChannels] = useState({ const [publicRooms, changePublicRooms] = useState({
isOpen: false, searchTerm: undefined, isOpen: false, searchTerm: undefined,
}); });
const [isCreateChannel, changeCreateChannel] = useState(false); const [isCreateRoom, changeCreateRoom] = useState(false);
const [inviteUser, changeInviteUser] = useState({ const [inviteUser, changeInviteUser] = useState({
isOpen: false, roomId: undefined, term: undefined, isOpen: false, roomId: undefined, term: undefined,
}); });
@ -23,14 +23,14 @@ function Windows() {
function openInviteList() { function openInviteList() {
changeInviteList(true); changeInviteList(true);
} }
function openPublicChannels(searchTerm) { function openPublicRooms(searchTerm) {
changePublicChannels({ changePublicRooms({
isOpen: true, isOpen: true,
searchTerm, searchTerm,
}); });
} }
function openCreateChannel() { function openCreateRoom() {
changeCreateChannel(true); changeCreateRoom(true);
} }
function openInviteUser(roomId, searchTerm) { function openInviteUser(roomId, searchTerm) {
changeInviteUser({ changeInviteUser({
@ -45,14 +45,14 @@ function Windows() {
useEffect(() => { useEffect(() => {
navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList); navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels); navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel); navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser); navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings); navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
return () => { return () => {
navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList); navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels); navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel); navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser); navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings); navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
}; };
@ -64,14 +64,14 @@ function Windows() {
isOpen={isInviteList} isOpen={isInviteList}
onRequestClose={() => changeInviteList(false)} onRequestClose={() => changeInviteList(false)}
/> />
<PublicChannels <PublicRooms
isOpen={publicChannels.isOpen} isOpen={publicRooms.isOpen}
searchTerm={publicChannels.searchTerm} searchTerm={publicRooms.searchTerm}
onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })} onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
/> />
<CreateChannel <CreateRoom
isOpen={isCreateChannel} isOpen={isCreateRoom}
onRequestClose={() => changeCreateChannel(false)} onRequestClose={() => changeCreateRoom(false)}
/> />
<InviteUser <InviteUser
isOpen={inviteUser.isOpen} isOpen={inviteUser.isOpen}

View file

@ -0,0 +1,229 @@
import React, { useState, useEffect, useRef } from 'react';
import './RoomOptions.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { openInviteUser } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room';
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import BellIC from '../../../../public/res/ic/outlined/bell.svg';
import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
function getNotifState(roomId) {
const mx = initMatrix.matrixClient;
const pushRule = mx.getRoomPushRule('global', roomId);
if (typeof pushRule === 'undefined') {
const overridePushRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
if (typeof overridePushRules === 'undefined') return 0;
const isMuteOverride = overridePushRules.find((rule) => (
rule.rule_id === roomId
&& rule.actions[0] === 'dont_notify'
&& rule.conditions[0].kind === 'event_match'
));
return isMuteOverride ? cons.notifs.MUTE : cons.notifs.DEFAULT;
}
if (pushRule.actions[0] === 'notify') return cons.notifs.ALL_MESSAGES;
return cons.notifs.MENTIONS_AND_KEYWORDS;
}
function setRoomNotifMute(roomId) {
const mx = initMatrix.matrixClient;
const roomPushRule = mx.getRoomPushRule('global', roomId);
const promises = [];
if (roomPushRule) {
promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
}
promises.push(mx.addPushRule('global', 'override', roomId, {
conditions: [
{
kind: 'event_match',
key: 'room_id',
pattern: roomId,
},
],
actions: [
'dont_notify',
],
}));
return Promise.all(promises);
}
function setRoomNotifsState(newState, roomId) {
const mx = initMatrix.matrixClient;
const promises = [];
const oldState = getNotifState(roomId);
if (oldState === cons.notifs.MUTE) {
promises.push(mx.deletePushRule('global', 'override', roomId));
}
if (newState === cons.notifs.DEFAULT) {
const roomPushRule = mx.getRoomPushRule('global', roomId);
if (roomPushRule) {
promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
}
return Promise.all(promises);
}
if (newState === cons.notifs.MENTIONS_AND_KEYWORDS) {
promises.push(mx.addPushRule('global', 'room', roomId, {
actions: [
'dont_notify',
],
}));
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
return Promise.all(promises);
}
// cons.notifs.ALL_MESSAGES
promises.push(mx.addPushRule('global', 'room', roomId, {
actions: [
'notify',
{
set_tweak: 'sound',
value: 'default',
},
],
}));
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
return Promise.all(promises);
}
function setRoomNotifPushRule(notifState, roomId) {
if (notifState === cons.notifs.MUTE) {
setRoomNotifMute(roomId);
return;
}
setRoomNotifsState(notifState, roomId);
}
let isRoomOptionVisible = false;
let roomId = null;
function RoomOptions() {
const openerRef = useRef(null);
const [notifState, setNotifState] = useState(cons.notifs.DEFAULT);
function openRoomOptions(cords, rId) {
if (roomId !== null || isRoomOptionVisible) {
roomId = null;
if (cords.detail === 0) openerRef.current.click();
return;
}
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
roomId = rId;
setNotifState(getNotifState(roomId));
openerRef.current.click();
}
function afterRoomOptionsToggle(isVisible) {
isRoomOptionVisible = isVisible;
if (!isVisible) {
setTimeout(() => {
if (!isRoomOptionVisible) roomId = null;
}, 500);
}
}
useEffect(() => {
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
return () => {
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
};
}, []);
const handleInviteClick = () => openInviteUser(roomId);
const handleLeaveClick = () => {
if (confirm('Are you really want to leave this room?')) roomActions.leave(roomId);
};
function setNotif(nState, currentNState) {
if (nState === currentNState) return;
setRoomNotifPushRule(nState, roomId);
setNotifState(nState);
}
return (
<ContextMenu
afterToggle={afterRoomOptionsToggle}
maxWidth={298}
content={(toggleMenu) => (
<>
<MenuHeader>{`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`}</MenuHeader>
<MenuItem
iconSrc={AddUserIC}
onClick={() => {
handleInviteClick(); toggleMenu();
}}
>
Invite
</MenuItem>
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
<MenuHeader>Notification</MenuHeader>
<MenuItem
variant={notifState === cons.notifs.DEFAULT ? 'positive' : 'surface'}
iconSrc={BellIC}
onClick={() => setNotif(cons.notifs.DEFAULT, notifState)}
>
Default
</MenuItem>
<MenuItem
variant={notifState === cons.notifs.ALL_MESSAGES ? 'positive' : 'surface'}
iconSrc={BellRingIC}
onClick={() => setNotif(cons.notifs.ALL_MESSAGES, notifState)}
>
All messages
</MenuItem>
<MenuItem
variant={notifState === cons.notifs.MENTIONS_AND_KEYWORDS ? 'positive' : 'surface'}
iconSrc={BellPingIC}
onClick={() => setNotif(cons.notifs.MENTIONS_AND_KEYWORDS, notifState)}
>
Mentions & Keywords
</MenuItem>
<MenuItem
variant={notifState === cons.notifs.MUTE ? 'positive' : 'surface'}
iconSrc={BellOffIC}
onClick={() => setNotif(cons.notifs.MUTE, notifState)}
>
Mute
</MenuItem>
</>
)}
render={(toggleMenu) => (
<input
ref={openerRef}
onClick={toggleMenu}
type="button"
style={{
width: '32px',
height: '32px',
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
left: 0,
padding: 0,
border: 'none',
visibility: 'hidden',
}}
/>
)}
/>
);
}
export default RoomOptions;

View file

@ -0,0 +1,20 @@
.context-menu__item {
position: relative;
}
.context-menu__item .btn-positive::before {
content: '';
display: inline-block;
width: 3px;
height: 12px;
background: var(--bg-positive);
border-radius: 0 4px 4px 0;
position: absolute;
left: 0;
[dir=rtl] & {
left: unset;
right: 0;
border-radius: 4px 0 0 4px;
}
}

View file

@ -18,23 +18,15 @@ import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg'; import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
function getPowerLabel(powerLevel) { function getPowerLabel(powerLevel) {
switch (powerLevel) { if (powerLevel > 9000) return 'Goku';
case 100: if (powerLevel > 100) return 'Founder';
return 'Admin'; if (powerLevel === 100) return 'Admin';
case 50: if (powerLevel >= 50) return 'Mod';
return 'Mod'; return null;
default:
return null;
}
} }
function compare(m1, m2) { function AtoZ(m1, m2) {
let aName = m1.name; const aName = m1.name;
let bName = m2.name; const bName = m2.name;
// remove "#" from the room name
// To ignore it in sorting
aName = aName.replaceAll('#', '');
bName = bName.replaceAll('#', '');
if (aName.toLowerCase() < bName.toLowerCase()) { if (aName.toLowerCase() < bName.toLowerCase()) {
return -1; return -1;
@ -45,25 +37,18 @@ function compare(m1, m2) {
return 0; return 0;
} }
function sortByPowerLevel(m1, m2) { function sortByPowerLevel(m1, m2) {
let pl1 = String(m1.powerLevel); const pl1 = m1.powerLevel;
let pl2 = String(m2.powerLevel); const pl2 = m2.powerLevel;
if (pl1 === '100') pl1 = '90.9'; if (pl1 > pl2) return -1;
if (pl2 === '100') pl2 = '90.9'; if (pl1 < pl2) return 1;
if (pl1.toLowerCase() > pl2.toLowerCase()) {
return -1;
}
if (pl1.toLowerCase() < pl2.toLowerCase()) {
return 1;
}
return 0; return 0;
} }
function PeopleDrawer({ roomId }) { function PeopleDrawer({ roomId }) {
const PER_PAGE_MEMBER = 50; const PER_PAGE_MEMBER = 50;
const room = initMatrix.matrixClient.getRoom(roomId); const room = initMatrix.matrixClient.getRoom(roomId);
const totalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel); const totalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
const [memberList, updateMemberList] = useState([]); const [memberList, updateMemberList] = useState([]);
let isRoomChanged = false; let isRoomChanged = false;
@ -75,7 +60,7 @@ function PeopleDrawer({ roomId }) {
updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER)); updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER));
room.loadMembersIfNeeded().then(() => { room.loadMembersIfNeeded().then(() => {
if (isRoomChanged) return; if (isRoomChanged) return;
const newTotalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel); const newTotalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER)); updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER));
}); });

View file

@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './Channel.scss'; import './Room.scss';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import Welcome from '../welcome/Welcome'; import Welcome from '../welcome/Welcome';
import ChannelView from './ChannelView'; import RoomView from './RoomView';
import PeopleDrawer from './PeopleDrawer'; import PeopleDrawer from './PeopleDrawer';
function Channel() { function Room() {
const [selectedRoomId, changeSelectedRoomId] = useState(null); const [selectedRoomId, changeSelectedRoomId] = useState(null);
const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible); const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
useEffect(() => { useEffect(() => {
@ -30,11 +30,11 @@ function Channel() {
if (selectedRoomId === null) return <Welcome />; if (selectedRoomId === null) return <Welcome />;
return ( return (
<div className="channel-container"> <div className="room-container">
<ChannelView roomId={selectedRoomId} /> <RoomView roomId={selectedRoomId} />
{ isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />} { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
</div> </div>
); );
} }
export default Channel; export default Room;

View file

@ -1,4 +1,4 @@
.channel-container { .room-container {
display: flex; display: flex;
height: 100%; height: 100%;
} }

View file

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelView.scss'; import './RoomView.scss';
import EventEmitter from 'events'; import EventEmitter from 'events';
@ -8,11 +8,11 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import ChannelViewHeader from './ChannelViewHeader'; import RoomViewHeader from './RoomViewHeader';
import ChannelViewContent from './ChannelViewContent'; import RoomViewContent from './RoomViewContent';
import ChannelViewFloating from './ChannelViewFloating'; import RoomViewFloating from './RoomViewFloating';
import ChannelViewInput from './ChannelViewInput'; import RoomViewInput from './RoomViewInput';
import ChannelViewCmdBar from './ChannelViewCmdBar'; import RoomViewCmdBar from './RoomViewCmdBar';
import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common'; import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
@ -22,7 +22,7 @@ let lastScrollTop = 0;
let lastScrollHeight = 0; let lastScrollHeight = 0;
let isReachedBottom = true; let isReachedBottom = true;
let isReachedTop = false; let isReachedTop = false;
function ChannelView({ roomId }) { function RoomView({ roomId }) {
const [roomTimeline, updateRoomTimeline] = useState(null); const [roomTimeline, updateRoomTimeline] = useState(null);
const timelineSVRef = useRef(null); const timelineSVRef = useRef(null);
@ -101,13 +101,13 @@ function ChannelView({ roomId }) {
} }
return ( return (
<div className="channel-view"> <div className="room-view">
<ChannelViewHeader roomId={roomId} /> <RoomViewHeader roomId={roomId} />
<div className="channel-view__content-wrapper"> <div className="room-view__content-wrapper">
<div className="channel-view__scrollable"> <div className="room-view__scrollable">
<ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide> <ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
{roomTimeline !== null && ( {roomTimeline !== null && (
<ChannelViewContent <RoomViewContent
roomId={roomId} roomId={roomId}
roomTimeline={roomTimeline} roomTimeline={roomTimeline}
timelineScroll={timelineScroll} timelineScroll={timelineScroll}
@ -116,7 +116,7 @@ function ChannelView({ roomId }) {
)} )}
</ScrollView> </ScrollView>
{roomTimeline !== null && ( {roomTimeline !== null && (
<ChannelViewFloating <RoomViewFloating
roomId={roomId} roomId={roomId}
roomTimeline={roomTimeline} roomTimeline={roomTimeline}
timelineScroll={timelineScroll} timelineScroll={timelineScroll}
@ -125,14 +125,14 @@ function ChannelView({ roomId }) {
)} )}
</div> </div>
{roomTimeline !== null && ( {roomTimeline !== null && (
<div className="channel-view__sticky"> <div className="room-view__sticky">
<ChannelViewInput <RoomViewInput
roomId={roomId} roomId={roomId}
roomTimeline={roomTimeline} roomTimeline={roomTimeline}
timelineScroll={timelineScroll} timelineScroll={timelineScroll}
viewEvent={viewEvent} viewEvent={viewEvent}
/> />
<ChannelViewCmdBar <RoomViewCmdBar
roomId={roomId} roomId={roomId}
roomTimeline={roomTimeline} roomTimeline={roomTimeline}
viewEvent={viewEvent} viewEvent={viewEvent}
@ -143,8 +143,8 @@ function ChannelView({ roomId }) {
</div> </div>
); );
} }
ChannelView.propTypes = { RoomView.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
}; };
export default ChannelView; export default RoomView;

View file

@ -1,24 +1,24 @@
.channel-view-flexBox { .room-view-flexBox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.channel-view-flexItem { .room-view-flexItem {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
} }
.channel-view { .room-view {
@extend .channel-view-flexItem; @extend .room-view-flexItem;
@extend .channel-view-flexBox; @extend .room-view-flexBox;
&__content-wrapper { &__content-wrapper {
@extend .channel-view-flexItem; @extend .room-view-flexItem;
@extend .channel-view-flexBox; @extend .room-view-flexBox;
} }
&__scrollable { &__scrollable {
@extend .channel-view-flexItem; @extend .room-view-flexItem;
position: relative; position: relative;
} }

View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelViewCmdBar.scss'; import './RoomViewCmdBar.scss';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import twemoji from 'twemoji'; import twemoji from 'twemoji';
@ -10,9 +10,10 @@ import cons from '../../../client/state/cons';
import { toggleMarkdown } from '../../../client/action/settings'; import { toggleMarkdown } from '../../../client/action/settings';
import * as roomActions from '../../../client/action/room'; import * as roomActions from '../../../client/action/room';
import { import {
selectTab,
selectRoom, selectRoom,
openCreateChannel, openCreateRoom,
openPublicChannels, openPublicRooms,
openInviteUser, openInviteUser,
openReadReceipts, openReadReceipts,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
@ -41,17 +42,17 @@ const commands = [{
description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org', description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm), exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
}, { }, {
name: 'createChannel', name: 'createRoom',
description: 'Create new channel', description: 'Create new room',
exe: () => openCreateChannel(), exe: () => openCreateRoom(),
}, { }, {
name: 'join', name: 'join',
isOptions: true, isOptions: true,
description: 'Join channel with alias. Example: /join/#cinny:matrix.org', description: 'Join room with alias. Example: /join/#cinny:matrix.org',
exe: (roomId, searchTerm) => openPublicChannels(searchTerm), exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
}, { }, {
name: 'leave', name: 'leave',
description: 'Leave current channel', description: 'Leave current room',
exe: (roomId) => roomActions.leave(roomId), exe: (roomId) => roomActions.leave(roomId),
}, { }, {
name: 'invite', name: 'invite',
@ -70,10 +71,10 @@ function CmdHelp() {
<Text variant="b2">/command_name</Text> <Text variant="b2">/command_name</Text>
<MenuHeader>Go-to commands</MenuHeader> <MenuHeader>Go-to commands</MenuHeader>
<Text variant="b2">{'>*space_name'}</Text> <Text variant="b2">{'>*space_name'}</Text>
<Text variant="b2">{'>#channel_name'}</Text> <Text variant="b2">{'>#room_name'}</Text>
<Text variant="b2">{'>@people_name'}</Text> <Text variant="b2">{'>@people_name'}</Text>
<MenuHeader>Autofill command</MenuHeader> <MenuHeader>Autofill commands</MenuHeader>
<Text variant="b2">:emoji_name:</Text> <Text variant="b2">:emoji_name</Text>
<Text variant="b2">@name</Text> <Text variant="b2">@name</Text>
</> </>
)} )}
@ -174,7 +175,7 @@ function getCmdActivationMessage(prefix) {
const cmd = { const cmd = {
'/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'), '/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'),
'>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'), '>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'),
'>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'), '>#': () => genMessage('Go-to command mode activated. ', 'Type room name for suggestions.'),
'>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'), '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'), ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
'@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'), '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
@ -273,7 +274,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
const cmd = { const cmd = {
'/': (cmds) => getGenCmdSuggestions(prefix, cmds), '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
'>*': (spaces) => getRoomsSuggestion(prefix, spaces), '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
'>#': (channels) => getRoomsSuggestion(prefix, channels), '>#': (rooms) => getRoomsSuggestion(prefix, rooms),
'>@': (peoples) => getRoomsSuggestion(prefix, peoples), '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
':': (emos) => getEmojiSuggestion(prefix, emos), ':': (emos) => getEmojiSuggestion(prefix, emos),
'@': (members) => getNameSuggestion(prefix, members), '@': (members) => getNameSuggestion(prefix, members),
@ -284,7 +285,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
const asyncSearch = new AsyncSearch(); const asyncSearch = new AsyncSearch();
let cmdPrefix; let cmdPrefix;
let cmdOption; let cmdOption;
function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) { function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
const [cmd, setCmd] = useState(null); const [cmd, setCmd] = useState(null);
function displaySuggestions(suggestions) { function displaySuggestions(suggestions) {
@ -357,7 +358,8 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
} }
function fireCmd(myCmd) { function fireCmd(myCmd) {
if (myCmd.prefix.match(/^>[*#@]$/)) { if (myCmd.prefix.match(/^>[*#@]$/)) {
selectRoom(myCmd.result.roomId); if (cmd.prefix === '>*') selectTab(myCmd.result.roomId);
else selectRoom(myCmd.result.roomId);
viewEvent.emit('cmd_fired'); viewEvent.emit('cmd_fired');
} }
if (myCmd.prefix === '/') { if (myCmd.prefix === '/') {
@ -466,10 +468,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
</div> </div>
); );
} }
ChannelViewCmdBar.propTypes = { RoomViewCmdBar.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired, roomTimeline: PropTypes.shape({}).isRequired,
viewEvent: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired,
}; };
export default ChannelViewCmdBar; export default RoomViewCmdBar;

View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useState, useEffect, useLayoutEffect } from 'react'; import React, { useState, useEffect, useLayoutEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelViewContent.scss'; import './RoomViewContent.scss';
import dateFormat from 'dateformat'; import dateFormat from 'dateformat';
@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
import { redactEvent, sendReaction } from '../../../client/action/roomTimeline'; import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil'; import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import { diffMinutes, isNotInSameDay } from '../../../util/common'; import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation'; import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
import Divider from '../../atoms/divider/Divider'; import Divider from '../../atoms/divider/Divider';
@ -29,7 +29,7 @@ import {
PlaceholderMessage, PlaceholderMessage,
} from '../../molecules/message/Message'; } from '../../molecules/message/Message';
import * as Media from '../../molecules/media/Media'; import * as Media from '../../molecules/media/Media';
import ChannelIntro from '../../molecules/channel-intro/ChannelIntro'; import RoomIntro from '../../molecules/room-intro/RoomIntro';
import TimelineChange from '../../molecules/message/TimelineChange'; import TimelineChange from '../../molecules/message/TimelineChange';
import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg'; import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
@ -131,20 +131,20 @@ function genMediaContent(mE) {
} }
} }
function genChannelIntro(mEvent, roomTimeline) { function genRoomIntro(mEvent, roomTimeline) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic; const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId); const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop'); let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc; avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
return ( return (
<ChannelIntro <RoomIntro
key={mEvent ? mEvent.getId() : 'channel-intro'} key={mEvent ? mEvent.getId() : 'room-intro'}
roomId={roomTimeline.roomId} roomId={roomTimeline.roomId}
avatarSrc={avatarSrc} avatarSrc={avatarSrc}
name={roomTimeline.room.name} name={roomTimeline.room.name}
heading={`Welcome to ${roomTimeline.room.name}`} heading={`Welcome to ${roomTimeline.room.name}`}
desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`} desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null} time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
/> />
); );
@ -176,19 +176,14 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
} }
function pickEmoji(e, roomId, eventId, roomTimeline) { function pickEmoji(e, roomId, eventId, roomTimeline) {
const boxInfo = e.target.getBoundingClientRect(); openEmojiBoard(getEventCords(e), (emoji) => {
openEmojiBoard({
x: boxInfo.x,
y: boxInfo.y,
detail: e.detail,
}, (emoji) => {
toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline); toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
e.target.click(); e.target.click();
}); });
} }
let wasAtBottom = true; let wasAtBottom = true;
function ChannelViewContent({ function RoomViewContent({
roomId, roomTimeline, timelineScroll, viewEvent, roomId, roomTimeline, timelineScroll, viewEvent,
}) { }) {
const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false); const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
@ -203,7 +198,9 @@ function ChannelViewContent({
} }
function trySendingReadReceipt() { function trySendingReadReceipt() {
const { room, timeline } = roomTimeline; const { room, timeline } = roomTimeline;
if (doesRoomHaveUnread(room) && timeline.length !== 0) { if (
(doesRoomHaveUnread(room) || initMatrix.notifications.hasNoti(roomId))
&& timeline.length !== 0) {
mx.sendReadReceipt(timeline[timeline.length - 1]); mx.sendReadReceipt(timeline[timeline.length - 1]);
} }
} }
@ -517,7 +514,7 @@ function ChannelViewContent({
} }
function renderMessage(mEvent) { function renderMessage(mEvent) {
if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline); if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
if ( if (
mEvent.getType() !== 'm.room.message' mEvent.getType() !== 'm.room.message'
&& mEvent.getType() !== 'm.room.encrypted' && mEvent.getType() !== 'm.room.encrypted'
@ -562,20 +559,20 @@ function ChannelViewContent({
} }
return ( return (
<div className="channel-view__content"> <div className="room-view__content">
<div className="timeline__wrapper"> <div className="timeline__wrapper">
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() } { roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)} { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)}
{ roomTimeline.timeline.map(renderMessage) } { roomTimeline.timeline.map(renderMessage) }
</div> </div>
</div> </div>
); );
} }
ChannelViewContent.propTypes = { RoomViewContent.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired, roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({}).isRequired, timelineScroll: PropTypes.shape({}).isRequired,
viewEvent: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired,
}; };
export default ChannelViewContent; export default RoomViewContent;

View file

@ -1,4 +1,4 @@
.channel-view__content { .room-view__content {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelViewFloating.scss'; import './RoomViewFloating.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
@ -13,7 +13,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
import { getUsersActionJsx } from './common'; import { getUsersActionJsx } from './common';
function ChannelViewFloating({ function RoomViewFloating({
roomId, roomTimeline, timelineScroll, viewEvent, roomId, roomTimeline, timelineScroll, viewEvent,
}) { }) {
const [reachedBottom, setReachedBottom] = useState(true); const [reachedBottom, setReachedBottom] = useState(true);
@ -53,11 +53,11 @@ function ChannelViewFloating({
return ( return (
<> <>
<div className={`channel-view__typing${isSomeoneTyping(typingMembers) ? ' channel-view__typing--open' : ''}`}> <div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
<div className="bouncingLoader"><div /></div> <div className="bouncingLoader"><div /></div>
<Text variant="b2">{getTypingMessage(typingMembers)}</Text> <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
</div> </div>
<div className={`channel-view__STB${reachedBottom ? '' : ' channel-view__STB--open'}`}> <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
<IconButton <IconButton
onClick={() => { onClick={() => {
timelineScroll.enableSmoothScroll(); timelineScroll.enableSmoothScroll();
@ -71,7 +71,7 @@ function ChannelViewFloating({
</> </>
); );
} }
ChannelViewFloating.propTypes = { RoomViewFloating.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired, roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({ timelineScroll: PropTypes.shape({
@ -80,4 +80,4 @@ ChannelViewFloating.propTypes = {
viewEvent: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired,
}; };
export default ChannelViewFloating; export default RoomViewFloating;

View file

@ -1,4 +1,4 @@
.channel-view { .room-view {
&__typing { &__typing {
display: flex; display: flex;
padding: var(--sp-ultra-tight) var(--sp-normal); padding: var(--sp-ultra-tight) var(--sp-normal);

View file

@ -2,22 +2,19 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { togglePeopleDrawer, openInviteUser } from '../../../client/action/navigation'; import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import { getEventCords } from '../../../util/common';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import Header, { TitleWrapper } from '../../atoms/header/Header'; import Header, { TitleWrapper } from '../../atoms/header/Header';
import Avatar from '../../atoms/avatar/Avatar'; import Avatar from '../../atoms/avatar/Avatar';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import UserIC from '../../../../public/res/ic/outlined/user.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg'; import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
function ChannelViewHeader({ roomId }) { function RoomViewHeader({ roomId }) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const isDM = initMatrix.roomList.directs.has(roomId); const isDM = initMatrix.roomList.directs.has(roomId);
let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@ -33,30 +30,16 @@ function ChannelViewHeader({ roomId }) {
{ typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>} { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
</TitleWrapper> </TitleWrapper>
<IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} /> <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
<ContextMenu <IconButton
placement="bottom" onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
content={(toogleMenu) => ( tooltip="Options"
<> src={VerticalMenuIC}
<MenuHeader>Options</MenuHeader>
{/* <MenuBorder /> */}
<MenuItem
iconSrc={AddUserIC}
onClick={() => {
openInviteUser(roomId); toogleMenu();
}}
>
Invite
</MenuItem>
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => roomActions.leave(roomId)}>Leave</MenuItem>
</>
)}
render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Options" src={VerticalMenuIC} />}
/> />
</Header> </Header>
); );
} }
ChannelViewHeader.propTypes = { RoomViewHeader.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
}; };
export default ChannelViewHeader; export default RoomViewHeader;

View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ChannelViewInput.scss'; import './RoomViewInput.scss';
import TextareaAutosize from 'react-autosize-textarea'; import TextareaAutosize from 'react-autosize-textarea';
@ -9,7 +9,7 @@ import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import settings from '../../../client/state/settings'; import settings from '../../../client/state/settings';
import { openEmojiBoard } from '../../../client/action/navigation'; import { openEmojiBoard } from '../../../client/action/navigation';
import { bytesToSize } from '../../../util/common'; import { bytesToSize, getEventCords } from '../../../util/common';
import { getUsername } from '../../../util/matrixUtil'; import { getUsername } from '../../../util/matrixUtil';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
@ -33,7 +33,7 @@ const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
let isTyping = false; let isTyping = false;
let isCmdActivated = false; let isCmdActivated = false;
let cmdCursorPos = null; let cmdCursorPos = null;
function ChannelViewInput({ function RoomViewInput({
roomId, roomTimeline, timelineScroll, viewEvent, roomId, roomTimeline, timelineScroll, viewEvent,
}) { }) {
const [attachment, setAttachment] = useState(null); const [attachment, setAttachment] = useState(null);
@ -285,6 +285,32 @@ function ChannelViewInput({
} }
} }
function handlePaste(e) {
if (e.clipboardData === false) {
return;
}
if (e.clipboardData.items === undefined) {
return;
}
for (let i = 0; i < e.clipboardData.items.length; i += 1) {
const item = e.clipboardData.items[i];
if (item.type.indexOf('image') !== -1) {
const image = item.getAsFile();
if (attachment === null) {
setAttachment(image);
if (image !== null) {
roomsInput.setAttachment(roomId, image);
return;
}
} else {
return;
}
}
}
}
function addEmoji(emoji) { function addEmoji(emoji) {
textAreaRef.current.value += emoji.unicode; textAreaRef.current.value += emoji.unicode;
} }
@ -304,17 +330,18 @@ function ChannelViewInput({
function renderInputs() { function renderInputs() {
return ( return (
<> <>
<div className={`channel-input__option-container${attachment === null ? '' : ' channel-attachment__option'}`}> <div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" /> <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
<IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} /> <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
</div> </div>
<div ref={inputBaseRef} className="channel-input__input-container"> <div ref={inputBaseRef} className="room-input__input-container">
{roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />} {roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
<ScrollView autoHide> <ScrollView autoHide>
<Text className="channel-input__textarea-wrapper"> <Text className="room-input__textarea-wrapper">
<TextareaAutosize <TextareaAutosize
ref={textAreaRef} ref={textAreaRef}
onChange={handleMsgTyping} onChange={handleMsgTyping}
onPaste={handlePaste}
onResize={() => timelineScroll.autoReachBottom()} onResize={() => timelineScroll.autoReachBottom()}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Send a message..." placeholder="Send a message..."
@ -324,15 +351,13 @@ function ChannelViewInput({
{isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />} {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
<button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button> <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
</div> </div>
<div ref={rightOptionsRef} className="channel-input__option-container"> <div ref={rightOptionsRef} className="room-input__option-container">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
const boxInfo = e.target.getBoundingClientRect(); const cords = getEventCords(e);
openEmojiBoard({ cords.x += (document.dir === 'rtl' ? -80 : 80);
x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80), cords.y -= 250;
y: boxInfo.y - 250, openEmojiBoard(cords, addEmoji);
detail: e.detail,
}, addEmoji);
}} }}
tooltip="Emoji" tooltip="Emoji"
src={EmojiIC} src={EmojiIC}
@ -346,14 +371,14 @@ function ChannelViewInput({
function attachFile() { function attachFile() {
const fileType = attachment.type.slice(0, attachment.type.indexOf('/')); const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
return ( return (
<div className="channel-attachment"> <div className="room-attachment">
<div className={`channel-attachment__preview${fileType !== 'image' ? ' channel-attachment__icon' : ''}`}> <div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
{fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />} {fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
{fileType === 'video' && <RawIcon src={VLCIC} />} {fileType === 'video' && <RawIcon src={VLCIC} />}
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />} {fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />} {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
</div> </div>
<div className="channel-attachment__info"> <div className="room-attachment__info">
<Text variant="b1">{attachment.name}</Text> <Text variant="b1">{attachment.name}</Text>
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text> <Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
</div> </div>
@ -363,7 +388,7 @@ function ChannelViewInput({
function attachReply() { function attachReply() {
return ( return (
<div className="channel-reply"> <div className="room-reply">
<IconButton <IconButton
onClick={() => { onClick={() => {
roomsInput.cancelReplyTo(roomId); roomsInput.cancelReplyTo(roomId);
@ -387,17 +412,17 @@ function ChannelViewInput({
<> <>
{ replyTo !== null && attachReply()} { replyTo !== null && attachReply()}
{ attachment !== null && attachFile() } { attachment !== null && attachFile() }
<form className="channel-input" onSubmit={(e) => { e.preventDefault(); }}> <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
{ {
roomTimeline.room.isSpaceRoom() roomTimeline.room.isSpaceRoom()
? <Text className="channel-input__space" variant="b1">Spaces are yet to be implemented</Text> ? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
: renderInputs() : renderInputs()
} }
</form> </form>
</> </>
); );
} }
ChannelViewInput.propTypes = { RoomViewInput.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired, roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({ timelineScroll: PropTypes.shape({
@ -410,4 +435,4 @@ ChannelViewInput.propTypes = {
viewEvent: PropTypes.shape({}).isRequired, viewEvent: PropTypes.shape({}).isRequired,
}; };
export default ChannelViewInput; export default RoomViewInput;

View file

@ -1,4 +1,4 @@
.channel-input { .room-input {
padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px); padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
display: flex; display: flex;
min-height: 48px; min-height: 48px;
@ -73,7 +73,7 @@
} }
} }
.channel-attachment { .room-attachment {
--side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight)); --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
display: flex; display: flex;
align-items: center; align-items: center;
@ -112,7 +112,7 @@
} }
} }
.channel-reply { .room-reply {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--bg-surface-low); background-color: var(--bg-surface-low);

View file

@ -9,7 +9,7 @@ function getTimelineJSXMessages() {
return ( return (
<> <>
<b>{user}</b> <b>{user}</b>
{' joined the channel'} {' joined the room'}
</> </>
); );
}, },
@ -18,7 +18,7 @@ function getTimelineJSXMessages() {
return ( return (
<> <>
<b>{user}</b> <b>{user}</b>
{' left the channel'} {' left the room'}
{reasonMsg} {reasonMsg}
</> </>
); );

View file

@ -16,6 +16,9 @@ import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/Pop
import SettingTile from '../../molecules/setting-tile/SettingTile'; import SettingTile from '../../molecules/setting-tile/SettingTile';
import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys'; import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
import ProfileEditor from '../profile-editor/ProfileEditor';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import SunIC from '../../../../public/res/ic/outlined/sun.svg'; import SunIC from '../../../../public/res/ic/outlined/sun.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg';
import InfoIC from '../../../../public/res/ic/outlined/info.svg'; import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@ -23,6 +26,19 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import CinnySVG from '../../../../public/res/svg/cinny.svg'; import CinnySVG from '../../../../public/res/svg/cinny.svg';
function GeneralSection() {
return (
<div className="settings-content">
<SettingTile
title=""
content={(
<ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
)}
/>
</div>
);
}
function AppearanceSection() { function AppearanceSection() {
const [, updateState] = useState({}); const [, updateState] = useState({});
@ -88,7 +104,7 @@ function AboutSection() {
<div> <div>
<Text variant="h2"> <Text variant="h2">
Cinny Cinny
<span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.1</span> <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.3.0</span>
</Text> </Text>
<Text>Yet another matrix client</Text> <Text>Yet another matrix client</Text>
@ -104,6 +120,12 @@ function AboutSection() {
function Settings({ isOpen, onRequestClose }) { function Settings({ isOpen, onRequestClose }) {
const settingSections = [{ const settingSections = [{
name: 'General',
iconSrc: SettingsIC,
render() {
return <GeneralSection />;
},
}, {
name: 'Appearance', name: 'Appearance',
iconSrc: SunIC, iconSrc: SunIC,
render() { render() {

View file

@ -8,12 +8,15 @@ import * as auth from '../../../client/action/auth';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button'; import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import ScrollView from '../../atoms/scroll/ScrollView';
import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
import CinnySvg from '../../../../public/res/svg/cinny.svg'; import CinnySvg from '../../../../public/res/svg/cinny.svg';
// This regex validates historical usernames, which don't satisy today's username requirements. // This regex validates historical usernames, which don't satisfy today's username requirements.
// See https://matrix.org/docs/spec/appendices#id13 for more info. // See https://matrix.org/docs/spec/appendices#id13 for more info.
const LOCALPART_LOGIN_REGEX = /.*/; const LOCALPART_LOGIN_REGEX = /.*/;
const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/; const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
@ -206,24 +209,46 @@ function Auth({ type }) {
required required
/> />
</div> </div>
<Input <div className="password__wrapper">
forwardRef={passwordRef} <Input
onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)} forwardRef={passwordRef}
id="auth_password" onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
type="password" id="auth_password"
label="Password" type="password"
required label="Password"
/> required
/>
<IconButton
onClick={() => {
if (passwordRef.current.type === 'password') {
passwordRef.current.type = 'text';
} else passwordRef.current.type = 'password';
}}
size="extra-small"
src={EyeIC}
/>
</div>
{type === 'register' && ( {type === 'register' && (
<> <>
<Input <div className="password__wrapper">
forwardRef={confirmPasswordRef} <Input
onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)} forwardRef={confirmPasswordRef}
id="auth_confirmPassword" onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
type="password" id="auth_confirmPassword"
label="Confirm password" type="password"
required label="Confirm password"
/> required
/>
<IconButton
onClick={() => {
if (confirmPasswordRef.current.type === 'password') {
confirmPasswordRef.current.type = 'text';
} else confirmPasswordRef.current.type = 'password';
}}
size="extra-small"
src={EyeIC}
/>
</div>
<Input <Input
forwardRef={emailRef} forwardRef={emailRef}
onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)} onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)}
@ -266,20 +291,22 @@ Auth.propTypes = {
function StaticWrapper({ children }) { function StaticWrapper({ children }) {
return ( return (
<div className="auth__wrapper flex--center"> <ScrollView invisible>
<div className="auth-card"> <div className="auth__wrapper flex--center">
<div className="auth-card__interactive flex-v"> <div className="auth-card">
<div className="app-ident flex"> <div className="auth-card__interactive flex-v">
<img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" /> <div className="app-ident flex">
<div className="app-ident__text flex-v--center"> <img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" />
<Text variant="h2">Cinny</Text> <div className="app-ident__text flex-v--center">
<Text variant="b2">Yet another matrix client</Text> <Text variant="h2">Cinny</Text>
<Text variant="b2">Yet another matrix client</Text>
</div>
</div> </div>
{ children }
</div> </div>
{ children }
</div> </div>
</div> </div>
</div> </ScrollView>
); );
} }

View file

@ -122,6 +122,22 @@
} }
} }
.password__wrapper {
margin-top: var(--sp-tight);
position: relative;
& .ic-btn {
position: absolute;
right: 6px;
bottom: 6px;
border-radius: calc(var(--bo-radius) / 2);
[dir=rtl] & {
left: 6px;
right: unset;
}
}
}
@media (max-width: 462px) { @media (max-width: 462px) {
.auth__wrapper { .auth__wrapper {
padding: 0; padding: 0;

View file

@ -4,10 +4,11 @@ import './Client.scss';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import Navigation from '../../organisms/navigation/Navigation'; import Navigation from '../../organisms/navigation/Navigation';
import Channel from '../../organisms/channel/Channel'; import Room from '../../organisms/room/Room';
import Windows from '../../organisms/pw/Windows'; import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs'; import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import RoomOptions from '../../organisms/room-optons/RoomOptions';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
@ -38,12 +39,13 @@ function Client() {
<div className="navigation__wrapper"> <div className="navigation__wrapper">
<Navigation /> <Navigation />
</div> </div>
<div className="channel__wrapper"> <div className="room__wrapper">
<Channel /> <Room />
</div> </div>
<Windows /> <Windows />
<Dialogs /> <Dialogs />
<EmojiBoardOpener /> <EmojiBoardOpener />
<RoomOptions />
</div> </div>
); );
} }

View file

@ -6,7 +6,7 @@
.navigation__wrapper { .navigation__wrapper {
width: var(--navigation-width); width: var(--navigation-width);
} }
.channel__wrapper { .room__wrapper {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
background-color: var(--bg-surface); background-color: var(--bg-surface);

View file

@ -1,13 +1,20 @@
import appDispatcher from '../dispatcher'; import appDispatcher from '../dispatcher';
import cons from '../state/cons'; import cons from '../state/cons';
function changeTab(tabId) { function selectTab(tabId) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.CHANGE_TAB, type: cons.actions.navigation.SELECT_TAB,
tabId, tabId,
}); });
} }
function selectSpace(roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.SELECT_SPACE,
roomId,
});
}
function selectRoom(roomId) { function selectRoom(roomId) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.SELECT_ROOM, type: cons.actions.navigation.SELECT_ROOM,
@ -27,16 +34,16 @@ function openInviteList() {
}); });
} }
function openPublicChannels(searchTerm) { function openPublicRooms(searchTerm) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS, type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
searchTerm, searchTerm,
}); });
} }
function openCreateChannel() { function openCreateRoom() {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_CREATE_CHANNEL, type: cons.actions.navigation.OPEN_CREATE_ROOM,
}); });
} }
@ -70,15 +77,25 @@ function openReadReceipts(roomId, eventId) {
}); });
} }
function openRoomOptions(cords, roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_ROOMOPTIONS,
cords,
roomId,
});
}
export { export {
changeTab, selectTab,
selectSpace,
selectRoom, selectRoom,
togglePeopleDrawer, togglePeopleDrawer,
openInviteList, openInviteList,
openPublicChannels, openPublicRooms,
openCreateChannel, openCreateRoom,
openInviteUser, openInviteUser,
openSettings, openSettings,
openEmojiBoard, openEmojiBoard,
openReadReceipts, openReadReceipts,
openRoomOptions,
}; };

View file

@ -190,7 +190,22 @@ async function invite(roomId, userId) {
} }
} }
function createSpaceShortcut(roomId) {
appDispatcher.dispatch({
type: cons.actions.room.CREATE_SPACE_SHORTCUT,
roomId,
});
}
function deleteSpaceShortcut(roomId) {
appDispatcher.dispatch({
type: cons.actions.room.DELETE_SPACE_SHORTCUT,
roomId,
});
}
export { export {
join, leave, join, leave,
create, invite, create, invite,
createSpaceShortcut, deleteSpaceShortcut,
}; };

View file

@ -4,6 +4,7 @@ import * as sdk from 'matrix-js-sdk';
import { secret } from './state/auth'; import { secret } from './state/auth';
import RoomList from './state/RoomList'; import RoomList from './state/RoomList';
import RoomsInput from './state/RoomsInput'; import RoomsInput from './state/RoomsInput';
import Notifications from './state/Notifications';
global.Olm = require('@matrix-org/olm'); global.Olm = require('@matrix-org/olm');
@ -56,6 +57,7 @@ class InitMatrix extends EventEmitter {
if (prevState === null) { if (prevState === null) {
this.roomList = new RoomList(this.matrixClient); this.roomList = new RoomList(this.matrixClient);
this.roomsInput = new RoomsInput(this.matrixClient); this.roomsInput = new RoomsInput(this.matrixClient);
this.notifications = new Notifications(this.roomList);
this.emit('init_loading_finished'); this.emit('init_loading_finished');
} }
}, },

View file

@ -0,0 +1,162 @@
import EventEmitter from 'events';
import cons from './cons';
class Notifications extends EventEmitter {
constructor(roomList) {
super();
this.matrixClient = roomList.matrixClient;
this.roomList = roomList;
this.roomIdToNoti = new Map();
this._initNoti();
this._listenEvents();
// TODO:
window.notifications = this;
}
_initNoti() {
const addNoti = (roomId) => {
const room = this.matrixClient.getRoom(roomId);
if (this.doesRoomHaveUnread(room) === false) return;
const total = room.getUnreadNotificationCount('total');
const highlight = room.getUnreadNotificationCount('highlight');
const noti = this.getNoti(room.roomId);
this._setNoti(room.roomId, total - noti.total, highlight - noti.highlight);
};
[...this.roomList.rooms].forEach(addNoti);
[...this.roomList.directs].forEach(addNoti);
}
doesRoomHaveUnread(room) {
const userId = this.matrixClient.getUserId();
const readUpToId = room.getEventReadUpTo(userId);
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
if (room.timeline.length
&& room.timeline[room.timeline.length - 1].sender
&& room.timeline[room.timeline.length - 1].sender.userId === userId
&& room.timeline[room.timeline.length - 1].getType() !== 'm.room.member') {
return false;
}
for (let i = room.timeline.length - 1; i >= 0; i -= 1) {
const event = room.timeline[i];
if (event.getId() === readUpToId) return false;
if (supportEvents.includes(event.getType())) {
return true;
}
}
return true;
}
getNoti(roomId) {
return this.roomIdToNoti.get(roomId) || { total: 0, highlight: 0, from: null };
}
getTotalNoti(roomId) {
const { total } = this.getNoti(roomId);
return total;
}
getHighlightNoti(roomId) {
const { highlight } = this.getNoti(roomId);
return highlight;
}
getFromNoti(roomId) {
const { from } = this.getNoti(roomId);
return from;
}
hasNoti(roomId) {
return this.roomIdToNoti.has(roomId);
}
_setNoti(roomId, total, highlight, childId) {
const prevTotal = this.roomIdToNoti.get(roomId)?.total ?? null;
const noti = this.getNoti(roomId);
noti.total += total;
noti.highlight += highlight;
if (childId) {
if (noti.from === null) noti.from = new Set();
noti.from.add(childId);
}
this.roomIdToNoti.set(roomId, noti);
this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
const parentIds = this.roomList.roomIdToParents.get(roomId);
if (typeof parentIds === 'undefined') return;
[...parentIds].forEach((parentId) => this._setNoti(parentId, total, highlight, roomId));
}
_deleteNoti(roomId, total, highlight, childId) {
if (this.roomIdToNoti.has(roomId) === false) return;
const noti = this.getNoti(roomId);
const prevTotal = noti.total;
noti.total -= total;
noti.highlight -= highlight;
if (childId && noti.from !== null) {
noti.from.delete(childId);
}
if (noti.from === null || noti.from.size === 0) {
this.roomIdToNoti.delete(roomId);
this.emit(cons.events.notifications.FULL_READ, roomId);
this.emit(cons.events.notifications.NOTI_CHANGED, roomId, null, prevTotal);
} else {
this.roomIdToNoti.set(roomId, noti);
this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
}
const parentIds = this.roomList.roomIdToParents.get(roomId);
if (typeof parentIds === 'undefined') return;
[...parentIds].forEach((parentId) => this._deleteNoti(parentId, total, highlight, roomId));
}
_listenEvents() {
this.matrixClient.on('Room.timeline', (mEvent, room) => {
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
if (!supportEvents.includes(mEvent.getType())) return;
const lastTimelineEvent = room.timeline[room.timeline.length - 1];
if (lastTimelineEvent.getId() !== mEvent.getId()) return;
if (mEvent.getSender() === this.matrixClient.getUserId()) return;
const total = room.getUnreadNotificationCount('total');
const highlight = room.getUnreadNotificationCount('highlight');
const noti = this.getNoti(room.roomId);
this._setNoti(room.roomId, total - noti.total, highlight - noti.highlight);
});
this.matrixClient.on('Room.receipt', (mEvent, room) => {
if (mEvent.getType() === 'm.receipt') {
const content = mEvent.getContent();
const readedEventId = Object.keys(content)[0];
const readerUserId = Object.keys(content[readedEventId]['m.read'])[0];
if (readerUserId !== this.matrixClient.getUserId()) return;
if (this.hasNoti(room.roomId)) {
const noti = this.getNoti(room.roomId);
this._deleteNoti(room.roomId, noti.total, noti.highlight);
}
}
});
this.matrixClient.on('Room.myMembership', (room, membership) => {
if (membership === 'leave' && this.hasNoti(room.roomId)) {
const noti = this.getNoti(room.roomId);
this._deleteNoti(room.roomId, noti.total, noti.highlight);
}
});
}
}
export default Notifications;

View file

@ -2,12 +2,22 @@ import EventEmitter from 'events';
import appDispatcher from '../dispatcher'; import appDispatcher from '../dispatcher';
import cons from './cons'; import cons from './cons';
function isMEventSpaceChild(mEvent) {
return mEvent.getType() === 'm.space.child' && Object.keys(mEvent.getContent()).length > 0;
}
class RoomList extends EventEmitter { class RoomList extends EventEmitter {
constructor(matrixClient) { constructor(matrixClient) {
super(); super();
this.matrixClient = matrixClient; this.matrixClient = matrixClient;
this.mDirects = this.getMDirects(); this.mDirects = this.getMDirects();
// Contains roomId to parent spaces roomId mapping of all spaces children.
// No matter if you have joined those children rooms or not.
this.roomIdToParents = new Map();
this.spaceShortcut = new Set();
this.inviteDirects = new Set(); this.inviteDirects = new Set();
this.inviteSpaces = new Set(); this.inviteSpaces = new Set();
this.inviteRooms = new Set(); this.inviteRooms = new Set();
@ -19,18 +29,82 @@ class RoomList extends EventEmitter {
this.processingRooms = new Map(); this.processingRooms = new Map();
this._populateRooms(); this._populateRooms();
this._populateSpaceShortcut();
this._listenEvents(); this._listenEvents();
appDispatcher.register(this.roomActions.bind(this)); appDispatcher.register(this.roomActions.bind(this));
} }
_updateSpaceShortcutData(shortcutList) {
const spaceContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent() || {};
spaceContent.shortcut = shortcutList;
this.matrixClient.setAccountData(cons['in.cinny.spaces'], spaceContent);
}
isOrphan(roomId) {
return !this.roomIdToParents.has(roomId);
}
getOrphans() {
const rooms = [...this.spaces].concat([...this.rooms]);
return rooms.filter((roomId) => !this.roomIdToParents.has(roomId));
}
getSpaceChildren(roomId) {
const space = this.matrixClient.getRoom(roomId);
const mSpaceChild = space?.currentState.getStateEvents('m.space.child');
const children = mSpaceChild?.map((mEvent) => {
const childId = mEvent.event.state_key;
if (isMEventSpaceChild(mEvent)) return childId;
return null;
});
return children?.filter((childId) => childId !== null);
}
addToRoomIdToParents(roomId, parentRoomId) {
if (!this.roomIdToParents.has(roomId)) {
this.roomIdToParents.set(roomId, new Set());
}
const parents = this.roomIdToParents.get(roomId);
parents.add(parentRoomId);
}
removeFromRoomIdToParents(roomId, parentRoomId) {
if (!this.roomIdToParents.has(roomId)) return;
const parents = this.roomIdToParents.get(roomId);
parents.delete(parentRoomId);
if (parents.size === 0) this.roomIdToParents.delete(roomId);
}
addToSpaces(roomId) {
this.spaces.add(roomId);
const spaceChildren = this.getSpaceChildren(roomId);
spaceChildren?.forEach((childRoomId) => {
this.addToRoomIdToParents(childRoomId, roomId);
});
}
deleteFromSpaces(roomId) {
this.spaces.delete(roomId);
const spaceChildren = this.getSpaceChildren(roomId);
spaceChildren?.forEach((childRoomId) => {
this.removeFromRoomIdToParents(childRoomId, roomId);
});
if (this.spaceShortcut.has(roomId)) {
// if delete space has shortcut remove it.
this.spaceShortcut.delete(roomId);
this._updateSpaceShortcutData([...this.spaceShortcut]);
}
}
roomActions(action) { roomActions(action) {
const addRoom = (roomId, isDM) => { const addRoom = (roomId, isDM) => {
const myRoom = this.matrixClient.getRoom(roomId); const myRoom = this.matrixClient.getRoom(roomId);
if (myRoom === null) return false; if (myRoom === null) return false;
if (isDM) this.directs.add(roomId); if (isDM) this.directs.add(roomId);
else if (myRoom.isSpaceRoom()) this.spaces.add(roomId); else if (myRoom.isSpaceRoom()) this.addToSpaces(roomId);
else this.rooms.add(roomId); else this.rooms.add(roomId);
return true; return true;
}; };
@ -64,6 +138,18 @@ class RoomList extends EventEmitter {
}); });
} }
}, },
[cons.actions.room.CREATE_SPACE_SHORTCUT]: () => {
if (this.spaceShortcut.has(action.roomId)) return;
this.spaceShortcut.add(action.roomId);
this._updateSpaceShortcutData([...this.spaceShortcut]);
this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
},
[cons.actions.room.DELETE_SPACE_SHORTCUT]: () => {
if (!this.spaceShortcut.has(action.roomId)) return;
this.spaceShortcut.delete(action.roomId);
this._updateSpaceShortcutData([...this.spaceShortcut]);
this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
},
}; };
actions[action.type]?.(); actions[action.type]?.();
} }
@ -83,8 +169,24 @@ class RoomList extends EventEmitter {
return mDirectsId; return mDirectsId;
} }
_populateSpaceShortcut() {
this.spaceShortcut.clear();
const spacesContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent();
if (spacesContent && Array.isArray(spacesContent?.shortcut)) {
spacesContent.shortcut.forEach((shortcut) => {
if (this.spaces.has(shortcut)) this.spaceShortcut.add(shortcut);
});
if (spacesContent.shortcut.length !== this.spaceShortcut.size) {
// update shortcut list from account data if shortcut space doesn't exist.
this._updateSpaceShortcutData([...this.spaceShortcut]);
}
}
}
_populateRooms() { _populateRooms() {
this.directs.clear(); this.directs.clear();
this.roomIdToParents.clear();
this.spaces.clear(); this.spaces.clear();
this.rooms.clear(); this.rooms.clear();
this.inviteDirects.clear(); this.inviteDirects.clear();
@ -109,7 +211,7 @@ class RoomList extends EventEmitter {
if (room.getMyMembership() !== 'join') return; if (room.getMyMembership() !== 'join') return;
if (this.mDirects.has(roomId)) this.directs.add(roomId); if (this.mDirects.has(roomId)) this.directs.add(roomId);
else if (room.isSpaceRoom()) this.spaces.add(roomId); else if (room.isSpaceRoom()) this.addToSpaces(roomId);
else this.rooms.add(roomId); else this.rooms.add(roomId);
}); });
} }
@ -123,6 +225,12 @@ class RoomList extends EventEmitter {
_listenEvents() { _listenEvents() {
// Update roomList when m.direct changes // Update roomList when m.direct changes
this.matrixClient.on('accountData', (event) => { this.matrixClient.on('accountData', (event) => {
if (event.getType() === cons['in.cinny.spaces']) {
this._populateSpaceShortcut();
this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED);
return;
}
if (event.getType() !== 'm.direct') return; if (event.getType() !== 'm.direct') return;
const latestMDirects = this.getMDirects(); const latestMDirects = this.getMDirects();
@ -155,18 +263,17 @@ class RoomList extends EventEmitter {
this.matrixClient.on('Room.name', () => { this.matrixClient.on('Room.name', () => {
this.emit(cons.events.roomList.ROOMLIST_UPDATED); this.emit(cons.events.roomList.ROOMLIST_UPDATED);
}); });
this.matrixClient.on('Room.receipt', (event, room) => {
if (event.getType() === 'm.receipt') {
const content = event.getContent();
const userReadEventId = Object.keys(content)[0];
const eventReaderUserId = Object.keys(content[userReadEventId]['m.read'])[0];
if (eventReaderUserId !== this.matrixClient.getUserId()) return;
this.emit(cons.events.roomList.MY_RECEIPT_ARRIVED, room.roomId);
}
});
this.matrixClient.on('RoomState.events', (event) => { this.matrixClient.on('RoomState.events', (mEvent) => {
if (event.getType() !== 'm.room.join_rules') return; if (mEvent.getType() === 'm.space.child') {
const { event } = mEvent;
if (isMEventSpaceChild(mEvent)) {
this.addToRoomIdToParents(event.state_key, event.room_id);
} else this.removeFromRoomIdToParents(event.state_key, event.room_id);
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
return;
}
if (mEvent.getType() !== 'm.room.join_rules') return;
this.emit(cons.events.roomList.ROOMLIST_UPDATED); this.emit(cons.events.roomList.ROOMLIST_UPDATED);
}); });
@ -207,7 +314,7 @@ class RoomList extends EventEmitter {
const procRoomInfo = this.processingRooms.get(roomId); const procRoomInfo = this.processingRooms.get(roomId);
if (procRoomInfo.isDM) this.directs.add(roomId); if (procRoomInfo.isDM) this.directs.add(roomId);
else if (room.isSpaceRoom()) this.spaces.add(roomId); else if (room.isSpaceRoom()) this.addToSpaces(roomId);
else this.rooms.add(roomId); else this.rooms.add(roomId);
if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId); if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
@ -218,7 +325,7 @@ class RoomList extends EventEmitter {
return; return;
} }
if (room.isSpaceRoom()) { if (room.isSpaceRoom()) {
this.spaces.add(roomId); this.addToSpaces(roomId);
this.emit(cons.events.roomList.ROOM_JOINED, roomId); this.emit(cons.events.roomList.ROOM_JOINED, roomId);
this.emit(cons.events.roomList.ROOMLIST_UPDATED); this.emit(cons.events.roomList.ROOMLIST_UPDATED);
@ -269,26 +376,17 @@ class RoomList extends EventEmitter {
} }
// when room is not a DM add/remove it from rooms. // when room is not a DM add/remove it from rooms.
if (membership === 'leave' || membership === 'kick' || membership === 'ban') { if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
if (room.isSpaceRoom()) this.spaces.delete(roomId); if (room.isSpaceRoom()) this.deleteFromSpaces(roomId);
else this.rooms.delete(roomId); else this.rooms.delete(roomId);
this.emit(cons.events.roomList.ROOM_LEAVED, roomId); this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
} }
if (membership === 'join') { if (membership === 'join') {
if (room.isSpaceRoom()) this.spaces.add(roomId); if (room.isSpaceRoom()) this.addToSpaces(roomId);
else this.rooms.add(roomId); else this.rooms.add(roomId);
this.emit(cons.events.roomList.ROOM_JOINED, roomId); this.emit(cons.events.roomList.ROOM_JOINED, roomId);
} }
this.emit(cons.events.roomList.ROOMLIST_UPDATED); this.emit(cons.events.roomList.ROOMLIST_UPDATED);
}); });
this.matrixClient.on('Room.timeline', (event, room) => {
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
if (!supportEvents.includes(event.getType())) return;
const lastTimelineEvent = room.timeline[room.timeline.length - 1];
if (lastTimelineEvent.getId() !== event.getId()) return;
this.emit(cons.events.roomList.EVENT_ARRIVED, room.roomId);
});
} }
} }
export default RoomList; export default RoomList;

View file

@ -6,23 +6,38 @@ const cons = {
BASE_URL: 'cinny_hs_base_url', BASE_URL: 'cinny_hs_base_url',
}, },
DEVICE_DISPLAY_NAME: 'Cinny Web', DEVICE_DISPLAY_NAME: 'Cinny Web',
'in.cinny.spaces': 'in.cinny.spaces',
tabs: {
HOME: 'home',
DIRECTS: 'dm',
},
notifs: {
DEFAULT: 'default',
ALL_MESSAGES: 'all_messages',
MENTIONS_AND_KEYWORDS: 'mentions_and_keywords',
MUTE: 'mute',
},
actions: { actions: {
navigation: { navigation: {
CHANGE_TAB: 'CHANGE_TAB', SELECT_TAB: 'SELECT_TAB',
SELECT_SPACE: 'SELECT_SPACE',
SELECT_ROOM: 'SELECT_ROOM', SELECT_ROOM: 'SELECT_ROOM',
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER', TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
OPEN_INVITE_LIST: 'OPEN_INVITE_LIST', OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
OPEN_PUBLIC_CHANNELS: 'OPEN_PUBLIC_CHANNELS', OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL', OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
OPEN_INVITE_USER: 'OPEN_INVITE_USER', OPEN_INVITE_USER: 'OPEN_INVITE_USER',
OPEN_SETTINGS: 'OPEN_SETTINGS', OPEN_SETTINGS: 'OPEN_SETTINGS',
OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD', OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
OPEN_READRECEIPTS: 'OPEN_READRECEIPTS', OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
}, },
room: { room: {
JOIN: 'JOIN', JOIN: 'JOIN',
LEAVE: 'LEAVE', LEAVE: 'LEAVE',
CREATE: 'CREATE', CREATE: 'CREATE',
CREATE_SPACE_SHORTCUT: 'CREATE_SPACE_SHORTCUT',
DELETE_SPACE_SHORTCUT: 'DELETE_SPACE_SHORTCUT',
error: { error: {
CREATE: 'ERROR_CREATE', CREATE: 'ERROR_CREATE',
}, },
@ -33,16 +48,18 @@ const cons = {
}, },
events: { events: {
navigation: { navigation: {
TAB_CHANGED: 'TAB_CHANGED', TAB_SELECTED: 'TAB_SELECTED',
SPACE_SELECTED: 'SPACE_SELECTED',
ROOM_SELECTED: 'ROOM_SELECTED', ROOM_SELECTED: 'ROOM_SELECTED',
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED', PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
INVITE_LIST_OPENED: 'INVITE_LIST_OPENED', INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
PUBLIC_CHANNELS_OPENED: 'PUBLIC_CHANNELS_OPENED', PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED', CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
INVITE_USER_OPENED: 'INVITE_USER_OPENED', INVITE_USER_OPENED: 'INVITE_USER_OPENED',
SETTINGS_OPENED: 'SETTINGS_OPENED', SETTINGS_OPENED: 'SETTINGS_OPENED',
EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED', EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
READRECEIPTS_OPENED: 'READRECEIPTS_OPENED', READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
}, },
roomList: { roomList: {
ROOMLIST_UPDATED: 'ROOMLIST_UPDATED', ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@ -50,8 +67,11 @@ const cons = {
ROOM_JOINED: 'ROOM_JOINED', ROOM_JOINED: 'ROOM_JOINED',
ROOM_LEAVED: 'ROOM_LEAVED', ROOM_LEAVED: 'ROOM_LEAVED',
ROOM_CREATED: 'ROOM_CREATED', ROOM_CREATED: 'ROOM_CREATED',
MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED', SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
EVENT_ARRIVED: 'EVENT_ARRIVED', },
notifications: {
NOTI_CHANGED: 'NOTI_CHANGED',
FULL_READ: 'FULL_READ',
}, },
roomTimeline: { roomTimeline: {
EVENT: 'EVENT', EVENT: 'EVENT',

View file

@ -6,29 +6,52 @@ class Navigation extends EventEmitter {
constructor() { constructor() {
super(); super();
this.activeTab = 'home'; this.selectedTab = cons.tabs.HOME;
this.activeRoomId = null; this.selectedSpaceId = null;
this.selectedSpacePath = [cons.tabs.HOME];
this.selectedRoomId = null;
this.isPeopleDrawerVisible = true; this.isPeopleDrawerVisible = true;
} }
getActiveTab() { _setSpacePath(roomId) {
return this.activeTab; if (roomId === null || roomId === cons.tabs.HOME) {
} this.selectedSpacePath = [cons.tabs.HOME];
return;
getActiveRoomId() { }
return this.activeRoomId; if (this.selectedSpacePath.includes(roomId)) {
const spIndex = this.selectedSpacePath.indexOf(roomId);
this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
return;
}
this.selectedSpacePath.push(roomId);
} }
navigate(action) { navigate(action) {
const actions = { const actions = {
[cons.actions.navigation.CHANGE_TAB]: () => { [cons.actions.navigation.SELECT_TAB]: () => {
this.activeTab = action.tabId; this.selectedTab = action.tabId;
this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab); if (this.selectedTab !== cons.tabs.DIRECTS) {
if (this.selectedTab === cons.tabs.HOME) {
this.selectedSpacePath = [cons.tabs.HOME];
this.selectedSpaceId = null;
} else {
this.selectedSpacePath = [this.selectedTab];
this.selectedSpaceId = this.selectedTab;
}
this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
} else this.selectedSpaceId = null;
this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
},
[cons.actions.navigation.SELECT_SPACE]: () => {
this._setSpacePath(action.roomId);
this.selectedSpaceId = action.roomId;
this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
}, },
[cons.actions.navigation.SELECT_ROOM]: () => { [cons.actions.navigation.SELECT_ROOM]: () => {
const prevActiveRoomId = this.activeRoomId; const prevSelectedRoomId = this.selectedRoomId;
this.activeRoomId = action.roomId; this.selectedRoomId = action.roomId;
this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId, prevActiveRoomId); this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoomId, prevSelectedRoomId);
}, },
[cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => { [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible; this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
@ -37,11 +60,11 @@ class Navigation extends EventEmitter {
[cons.actions.navigation.OPEN_INVITE_LIST]: () => { [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
this.emit(cons.events.navigation.INVITE_LIST_OPENED); this.emit(cons.events.navigation.INVITE_LIST_OPENED);
}, },
[cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => { [cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => {
this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm); this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm);
}, },
[cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => { [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED); this.emit(cons.events.navigation.CREATE_ROOM_OPENED);
}, },
[cons.actions.navigation.OPEN_INVITE_USER]: () => { [cons.actions.navigation.OPEN_INVITE_USER]: () => {
this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm); this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
@ -62,6 +85,13 @@ class Navigation extends EventEmitter {
action.eventId, action.eventId,
); );
}, },
[cons.actions.navigation.OPEN_ROOMOPTIONS]: () => {
this.emit(
cons.events.navigation.ROOMOPTIONS_OPENED,
action.cords,
action.roomId,
);
},
}; };
actions[action.type]?.(); actions[action.type]?.();
} }

View file

@ -4,7 +4,9 @@
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: #FFFFFF; --bg-surface: #FFFFFF;
--bg-surface-transparent: #FFFFFF00;
--bg-surface-low: #F6F6F6; --bg-surface-low: #F6F6F6;
--bg-surface-low-transparent: #F6F6F600;
--bg-surface-hover: rgba(0, 0, 0, 3%); --bg-surface-hover: rgba(0, 0, 0, 3%);
--bg-surface-active: rgba(0, 0, 0, 5%); --bg-surface-active: rgba(0, 0, 0, 5%);
--bg-surface-border: rgba(0, 0, 0, 6%); --bg-surface-border: rgba(0, 0, 0, 6%);
@ -30,6 +32,7 @@
--bg-danger-border: rgba(240, 71, 71, 20%); --bg-danger-border: rgba(240, 71, 71, 20%);
--bg-tooltip: #353535; --bg-tooltip: #353535;
--bg-badge: #989898;
/* text color | --tc-[background type]-[priority]: value */ /* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: #000000; --tc-surface-high: #000000;
@ -55,6 +58,7 @@
--tc-code: #e62498; --tc-code: #e62498;
--tc-tooltip: white; --tc-tooltip: white;
--tc-badge: white;
/* system icons | --ic-[background type]-[priority]: value */ /* system icons | --ic-[background type]-[priority]: value */
@ -155,14 +159,18 @@
.silver-theme { .silver-theme {
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: hsl(0, 0%, 95%); --bg-surface: hsl(0, 0%, 95%);
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
--bg-surface-low: hsl(0, 0%, 91%); --bg-surface-low: hsl(0, 0%, 91%);
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
} }
.dark-theme, .dark-theme,
.butter-theme { .butter-theme {
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: hsl(208, 8%, 20%); --bg-surface: hsl(208, 8%, 20%);
--bg-surface-transparent: hsla(208, 8%, 20%, 0);
--bg-surface-low: hsl(208, 8%, 16%); --bg-surface-low: hsl(208, 8%, 16%);
--bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
--bg-surface-hover: rgba(255, 255, 255, 3%); --bg-surface-hover: rgba(255, 255, 255, 3%);
--bg-surface-active: rgba(255, 255, 255, 5%); --bg-surface-active: rgba(255, 255, 255, 5%);
--bg-surface-border: rgba(0, 0, 0, 20%); --bg-surface-border: rgba(0, 0, 0, 20%);
@ -173,6 +181,7 @@
--bg-primary-border: rgba(59, 119, 191, 38%); --bg-primary-border: rgba(59, 119, 191, 38%);
--bg-tooltip: #000; --bg-tooltip: #000;
--bg-badge: hsl(0, 0%, 75%);
/* text color | --tc-[background type]-[priority]: value */ /* text color | --tc-[background type]-[priority]: value */
--tc-surface-high: rgba(255, 255, 255, 94%); --tc-surface-high: rgba(255, 255, 255, 94%);
@ -184,6 +193,7 @@
--tc-primary-low: rgba(255, 255, 255, 0.4); --tc-primary-low: rgba(255, 255, 255, 0.4);
--tc-code: #e565b1; --tc-code: #e565b1;
--tc-badge: black;
/* system icons | --ic-[background type]-[priority]: value */ /* system icons | --ic-[background type]-[priority]: value */
--ic-surface-normal: rgba(255, 255, 255, 68%); --ic-surface-normal: rgba(255, 255, 255, 68%);
@ -206,7 +216,11 @@
.butter-theme { .butter-theme {
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: hsl(64, 6%, 14%); --bg-surface: hsl(64, 6%, 14%);
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
--bg-surface-low: hsl(64, 6%, 10%); --bg-surface-low: hsl(64, 6%, 10%);
--bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
--bg-badge: #c4c1ab;
/* text color | --tc-[background type]-[priority]: value */ /* text color | --tc-[background type]-[priority]: value */

View file

@ -30,8 +30,8 @@ class Postie {
} }
hasTopicAndSubscriber(topic, address) { hasTopicAndSubscriber(topic, address) {
return (this.isTopicExist(topic)) return (this.hasTopic(topic))
? this.isSubscriberExist(topic, address) ? this.hasSubscriber(topic, address)
: false; : false;
} }

View file

@ -19,3 +19,17 @@ export function isNotInSameDay(dt2, dt1) {
|| dt2.getYear() !== dt1.getYear() || dt2.getYear() !== dt1.getYear()
); );
} }
export function getEventCords(ev) {
const boxInfo = ev.target.getBoundingClientRect();
return {
x: boxInfo.x,
y: boxInfo.y,
detail: ev.detail,
};
}
export function abbreviateNumber(number) {
if (number > 99) return '99+';
return number;
}