mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-10 09:10:29 +03:00
Refactor state & Custom editor (#1190)
* Fix eslint * Enable ts strict mode * install folds, jotai & immer * Enable immer map/set * change cross-signing alert anim to 30 iteration * Add function to access matrix client * Add new types * Add disposable util * Add room utils * Add mDirect list atom * Add invite list atom * add room list atom * add utils for jotai atoms * Add room id to parents atom * Add mute list atom * Add room to unread atom * Use hook to bind atoms with sdk * Add settings atom * Add settings hook * Extract set settings hook * Add Sidebar components * WIP * Add bind atoms hook * Fix init muted room list atom * add navigation atoms * Add custom editor * Fix hotkeys * Update folds * Add editor output function * Add matrix client context * Add tooltip to editor toolbar items * WIP - Add editor to room input * Refocus editor on toolbar item click * Add Mentions - WIP * update folds * update mention focus outline * rename emoji element type * Add auto complete menu * add autocomplete query functions * add index file for editor * fix bug in getPrevWord function * Show room mention autocomplete * Add async search function * add use async search hook * use async search in room mention autocomplete * remove folds prefer font for now * allow number array in async search * reset search with empty query * Autocomplete unknown room mention * Autocomplete first room mention on tab * fix roomAliasFromQueryText * change mention color to primary * add isAlive hook * add getMxIdLocalPart to mx utils * fix getRoomAvatarUrl size * fix types * add room members hook * fix bug in room mention * add user mention autocomplete * Fix async search giving prev result after no match * update folds * add twemoji font * add use state provider hook * add prevent scroll with arrow key util * add ts to custom-emoji and emoji files * add types * add hook for emoji group labels * add hook for emoji group icons * add emoji board with basic emoji * add emojiboard in room input * select multiple emoji with shift press * display custom emoji in emojiboard * Add emoji preview * focus element on hover * update folds * position emojiboard properly * convert recent-emoji.js to ts * add use recent emoji hook * add io.element.recent_emoji to account data evt * Render recent emoji in emoji board * show custom emoji from parent spaces * show room emoji * improve emoji sidebar * update folds * fix pack avatar and name fallback in emoji board * add stickers to emoji board * fix bug in emoji preview * Add sticker icon in room input * add debounce hook * add search in emoji board * Optimize emoji board * fix emoji board sidebar divider * sync emojiboard sidebar with scroll & update ui * Add use throttle hook * support custom emoji in editor * remove duplicate emoji selection function * fix emoji and mention spacing * add emoticon autocomplete in editor * fix string * makes emoji size relative to font size in editor * add option to render link element * add spoiler in editor * fix sticker in emoji board search using wrong type * render custom placeholder * update hotkey for block quote and block code * add terminate search function in async search * add getImageInfo to matrix utils * send stickers * add resize observer hook * move emoji board component hooks in hooks dir * prevent editor expand hides room timeline * send typing notifications * improve emoji style and performance * fix imports * add on paste param to editor * add selectFile utils * add file picker hook * add file paste handler hook * add file drop handler * update folds * Add file upload card * add bytes to size util * add blurHash util * add await to js lib * add browser-encrypt-attachment types * add list atom * convert mimetype file to ts * add matrix types * add matrix file util * add file related dom utils * add common utils * add upload atom * add room input draft atom * add upload card renderer component * add upload board component * add support for file upload in editor * send files with message / enter * fix circular deps * store editor toolbar state in local store * move msg content util to separate file * store msg draft on room switch * fix following member not updating on msg sent * add theme for folds component * fix system default theme * Add reply support in editor * prevent initMatrix to init multiple time * add state event hooks * add async callback hook * Show tombstone info for tombstone room * fix room tombstone component border * add power level hook * Add room input placeholder component * Show input placeholder for muted member
This commit is contained in:
Ajay Bura
GitHub
parent
2055d7a07f
commit
0b06bed1db
128 changed files with 8799 additions and 409 deletions
107
src/index.scss
107
src/index.scss
|
|
@ -1,14 +1,20 @@
|
|||
@use './app/partials/screen';
|
||||
|
||||
:root {
|
||||
@font-face {
|
||||
font-family: Twemoji;
|
||||
src: url('../public/font/Twemoji.Mozilla.v.7.0.woff2'),
|
||||
url('../public/font/Twemoji.Mozilla.v0.7.0.ttf');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #FFFFFF;
|
||||
--bg-surface-transparent: #FFFFFF00;
|
||||
--bg-surface-low: #F6F6F6;
|
||||
--bg-surface-low-transparent: #F6F6F600;
|
||||
--bg-surface-extra-low: #F6F6F6;
|
||||
--bg-surface-extra-low-transparent: #F6F6F600;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-transparent: #ffffff00;
|
||||
--bg-surface-low: #f6f6f6;
|
||||
--bg-surface-low-transparent: #f6f6f600;
|
||||
--bg-surface-extra-low: #f6f6f6;
|
||||
--bg-surface-extra-low-transparent: #f6f6f600;
|
||||
--bg-surface-hover: rgba(0, 0, 0, 3%);
|
||||
--bg-surface-active: rgba(0, 0, 0, 5%);
|
||||
--bg-surface-border: rgba(0, 0, 0, 6%);
|
||||
|
|
@ -22,7 +28,7 @@
|
|||
--bg-positive-hover: rgba(69, 184, 59, 8%);
|
||||
--bg-positive-active: rgba(69, 184, 59, 15%);
|
||||
--bg-positive-border: rgba(69, 184, 59, 40%);
|
||||
|
||||
|
||||
--bg-caution: rgb(255, 179, 0);
|
||||
--bg-caution-hover: rgba(255, 179, 0, 8%);
|
||||
--bg-caution-active: rgba(255, 179, 0, 15%);
|
||||
|
|
@ -37,18 +43,18 @@
|
|||
--bg-badge: #989898;
|
||||
--bg-ping: hsla(137deg, 100%, 68%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 0%, .1);
|
||||
--bg-divider: hsla(0, 0%, 0%, 0.1);
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: #000000;
|
||||
--tc-surface-normal: rgba(0, 0, 0, 78%);
|
||||
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
|
||||
--tc-surface-low: rgba(0, 0, 0, 48%);
|
||||
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 68%);
|
||||
--tc-primary-low: rgba(255, 255, 255, 40%);
|
||||
|
||||
|
||||
--tc-positive-high: var(--bg-positive);
|
||||
--tc-positive-normal: rgb(69, 184, 59, 80%);
|
||||
--tc-positive-low: rgb(69, 184, 59, 60%);
|
||||
|
|
@ -56,7 +62,7 @@
|
|||
--tc-caution-high: var(--bg-caution);
|
||||
--tc-caution-normal: rgb(255, 179, 0, 80%);
|
||||
--tc-caution-low: rgb(255, 179, 0, 60%);
|
||||
|
||||
|
||||
--tc-danger-high: var(--bg-danger);
|
||||
--tc-danger-normal: rgba(240, 71, 71, 88%);
|
||||
--tc-danger-low: rgba(240, 71, 71, 60%);
|
||||
|
|
@ -66,7 +72,6 @@
|
|||
--tc-tooltip: white;
|
||||
--tc-badge: white;
|
||||
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: #272727;
|
||||
--ic-surface-normal: #626262;
|
||||
|
|
@ -102,7 +107,6 @@
|
|||
--av-small: 36px;
|
||||
--av-extra-small: 24px;
|
||||
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 20%);
|
||||
--bg-overlay-low: rgba(0, 0, 0, 50%);
|
||||
|
|
@ -124,11 +128,9 @@
|
|||
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
|
||||
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
|
||||
|
||||
|
||||
/* border */
|
||||
--bo-radius: 8px;
|
||||
|
||||
|
||||
/* font styles: font-size, letter-spacing, line-hight */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
|
|
@ -160,7 +162,6 @@
|
|||
--fw-medium: 500;
|
||||
--fw-bold: 700;
|
||||
|
||||
|
||||
/* spacing | --sp-[space]: value */
|
||||
--sp-none: 0px;
|
||||
--sp-ultra-tight: 4px;
|
||||
|
|
@ -170,7 +171,6 @@
|
|||
--sp-loose: 20px;
|
||||
--sp-extra-loose: 32px;
|
||||
|
||||
|
||||
/* other */
|
||||
--border-width: 1px;
|
||||
--header-height: 54px;
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
--people-drawer-width: calc(268px - var(--border-width));
|
||||
|
||||
--popup-window-drawer-width: 280px;
|
||||
|
||||
|
||||
@include screen.smallerThan(tabletBreakpoint) {
|
||||
--navigation-drawer-width: calc(240px + var(--border-width));
|
||||
--people-drawer-width: calc(256px - var(--border-width));
|
||||
|
|
@ -191,11 +191,11 @@
|
|||
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
|
||||
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
|
||||
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
|
||||
|
||||
--font-primary: 'Roboto', sans-serif;
|
||||
--font-secondary: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
--font-emoji: 'Twemoji';
|
||||
--font-primary: 'Roboto', var(--font-emoji), sans-serif;
|
||||
--font-secondary: 'Roboto', var(--font-emoji), sans-serif;
|
||||
}
|
||||
|
||||
.silver-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
|
|
@ -207,7 +207,8 @@
|
|||
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
}
|
||||
|
||||
@mixin dark-mode() {
|
||||
.dark-theme,
|
||||
.butter-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(208, 8%, 20%);
|
||||
--bg-surface-transparent: hsla(208, 8%, 20%, 0);
|
||||
|
|
@ -228,15 +229,14 @@
|
|||
--bg-badge: hsl(0, 0%, 75%);
|
||||
--bg-ping: hsla(137deg, 100%, 38%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 100%, .1);
|
||||
|
||||
--bg-divider: hsla(0, 0%, 100%, 0.1);
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgba(255, 255, 255, 98%);
|
||||
--tc-surface-normal: rgba(255, 255, 255, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
|
||||
--tc-surface-low: rgba(255, 255, 255, 58%);
|
||||
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 0.68);
|
||||
--tc-primary-low: rgba(255, 255, 255, 0.4);
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
--mx-uc-7: hsl(243, 100%, 74%);
|
||||
--mx-uc-8: hsl(94, 66%, 50%);
|
||||
}
|
||||
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 60%);
|
||||
--bg-overlay-low: rgba(0, 0, 0, 80%);
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
|
||||
|
||||
/* font styles: font-size, letter-spacing, line-hight */
|
||||
--fs-h1: 35.6px;
|
||||
|
||||
|
|
@ -292,18 +292,7 @@
|
|||
/* override normal font weight for dark mode */
|
||||
--fw-normal: 350;
|
||||
|
||||
--font-secondary: 'InterVariable', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.dark-theme,
|
||||
.butter-theme {
|
||||
@include dark-mode();
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.system-theme {
|
||||
@include dark-mode();
|
||||
}
|
||||
--font-secondary: 'InterVariable', 'Roboto', var(--font-emoji), sans-serif;
|
||||
}
|
||||
|
||||
.butter-theme {
|
||||
|
|
@ -317,14 +306,12 @@
|
|||
|
||||
--bg-badge: #c4c1ab;
|
||||
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgb(255, 251, 222, 94%);
|
||||
--tc-surface-normal: rgba(255, 251, 222, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
||||
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
||||
--tc-surface-low: rgba(255, 251, 222, 58%);
|
||||
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: rgb(255, 251, 222);
|
||||
--ic-surface-normal: rgba(255, 251, 222, 84%);
|
||||
|
|
@ -387,9 +374,11 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
a {
|
||||
|
|
@ -428,16 +417,16 @@ button {
|
|||
textarea,
|
||||
input,
|
||||
input[type],
|
||||
input[type=text],
|
||||
input[type=username],
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
input[type=checkbox] {
|
||||
input[type='text'],
|
||||
input[type='username'],
|
||||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='checkbox'] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
input[type='checkbox'] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
|
|
@ -451,7 +440,7 @@ input[type=checkbox] {
|
|||
&:checked {
|
||||
background-color: var(--bg-primary);
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
|
|
@ -468,11 +457,11 @@ textarea {
|
|||
}
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
|
|
@ -484,4 +473,4 @@ audio:not([controls]) {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue