ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Dev] Introduce stylelint (#1706)

Browse Source 
Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
Co-authored-by: Anton Korenskoy <anton@korenskoy.ru>
This commit is contained in:
Alexander Zinchuk 2022-02-11 15:13:07 +01:00
parent 70774928fc
commit 5aa591eab5
23 changed files with 1753 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.stylelintrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"extends": "stylelint-config-recommended-scss",
"rules": {
"no-descending-specificity": null
}
}

1604
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -10,8 +10,8 @@
"build:production": "npm i && rm -rf dist/ && APP_VERSION=$(npm run inc_version --silent) APP_ENV=production npm run build && ./deploy/copy_to_dist.sh",
"deploy:production": "npm run build:production && git add -A && git commit -a -m '[Build]' --no-verify && git push",
"inc_version": "echo $((`cat .patch-version` + 1)) > .patch-version && echo \"$(node -p -e \"require('./package.json').version.match(/^\\d+\\.\\d+/)[0]\").$(cat .patch-version)\"",
"lint": "tsc && eslint . --ext .ts,.tsx --ignore-pattern src/lib/gramjs",
"lint:fix": "npm run lint -- --fix",
"lint": "tsc && stylelint \"**/*.{css,scss}\" && eslint . --ext .ts,.tsx --ignore-pattern src/lib/gramjs",
"lint:fix": "stylelint . && npm run lint -- --fix",
"gramjs:tl": "node ./src/lib/gramjs/tl/generateModules.js",
"gramjs:lint:fix": "eslint ./src/lib/gramjs --fix",
"test": "cross-env APP_ENV=test jest --verbose --forceExit",
@ -27,7 +27,8 @@
}
},
"lint-staged": {
"*.{ts,tsx,js}": "eslint --fix"
"*.{ts,tsx,js}": "eslint --fix",
"*.{css,scss}": "stylelint --fix"
},
"author": "Alexander Zinchuk (alexander@zinchuk.com)",
"license": "GPL-3.0-or-later",
@ -85,6 +86,8 @@
"sass": "^1.49.7",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"stylelint": "^14.3.0",
"stylelint-config-recommended-scss": "^5.0.2",
"typescript": "^4.5.5",
"webpack": "^5.68.0",
"webpack-bundle-analyzer": "^4.5.0",

2
src/components/auth/Auth.scss
View File

@ -29,8 +29,8 @@
}
#logo {
background-size: 100%;
background: url('../../assets/telegram-logo.svg') center no-repeat;
background-size: 100%;
}
h2 {

7
src/components/common/Avatar.scss
View File

@ -15,6 +15,8 @@
img:not(.emoji) {
border-radius: 50%;
width: 100%;
height: 100%;
}
.emoji {
@ -123,9 +125,4 @@
&.interactive {
cursor: pointer;
}
img:not(.emoji) {
width: 100%;
height: 100%;
}
}

1
src/components/common/File.scss
View File

@ -86,7 +86,6 @@
font-size: 1.5rem;
position: absolute;
top: 0;
start: 0;
width: 3.375rem;
height: 3.375rem;
display: flex;

2
src/components/common/GifButton.scss
View File

@ -23,8 +23,8 @@
.thumbnail {
width: 100%;
height: 100%;
background-size: cover !important;
background: transparent no-repeat center;
background-size: cover !important;
}
.preview, video {

2
src/components/common/PasswordMonkey.scss
View File

@ -33,7 +33,7 @@
.monkey-preview {
width: 100%;
height: 100%;
background-size: 100%;
background: url('../../assets/monkey.svg') center;
background-size: 100%;
}
}

3
src/components/left/search/ChatMessage.scss
View File

@ -46,8 +46,7 @@
.sender-name {
color: var(--color-text);
}
.sender-name {
&::after {
content: ': ';
}

1
src/components/left/search/LeftSearch.scss
View File

@ -106,7 +106,6 @@
.handle {
unicode-bidi: plaintext;
color: var(--color-primary);
unicode-bidi: plaintext;
&::before {
content: '@';

3
src/components/left/settings/folders/SettingsFoldersChatsPicker.scss
View File

@ -8,9 +8,6 @@
margin-bottom: 0.5rem;
margin-left: 0.5rem;
flex-grow: 1;
}
.max-items-reached {
color: var(--color-text-secondary);
}
}

1
src/components/mediaViewer/MediaViewerSlides.scss
View File

@ -4,6 +4,7 @@
height: 100%;
max-height: 100vh;
min-height: -moz-available;
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
max-height: -webkit-fill-available;
width: 100%;
overflow: hidden;

4
src/components/middle/MessageList.scss
View File

@ -22,11 +22,11 @@
@media (pointer: coarse) {
user-select: none;
touch-callout: none;
-webkit-touch-callout: none;
&.select-mode-active {
user-select: auto;
touch-callout: default;
-webkit-touch-callout: default;
}
}

8
src/components/middle/MessageSelectToolbar.scss
View File

@ -36,11 +36,6 @@
opacity: 1;
&-inner {
transform: scaleX(1);
transition: transform var(--select-transition), opacity var(--select-transition);
}
& .MessageSelectToolbar-inner {
transform: scaleX(1) translateX(0);
}
@ -91,6 +86,9 @@
box-shadow: 0 1px 2px var(--color-default-shadow);
font-weight: 500;
transform: scaleX(1);
transition: transform var(--select-transition), opacity var(--select-transition);
@media (max-width: 600px) {
padding: 0;
max-width: none;

22
src/components/middle/MiddleColumn.scss
View File

@ -112,18 +112,6 @@
}
}
.messaging-disabled {
&-inner {
width: 100%;
padding: 1rem;
border-radius: var(--border-radius-messages);
background: var(--color-background);
color: var(--color-text-secondary);
text-align: center;
box-shadow: 0 1px 2px var(--color-default-shadow);
}
}
.Composer {
#message-compose {
transform: scaleX(1) translateX(0);
@ -222,6 +210,16 @@
opacity: 0;
}
}
&-inner {
width: 100%;
padding: 1rem;
border-radius: var(--border-radius-messages);
background: var(--color-background);
color: var(--color-text-secondary);
text-align: center;
box-shadow: 0 1px 2px var(--color-default-shadow);
}
}
.middle-column-footer {

201
src/components/middle/message/Message.scss
View File

@ -1,3 +1,5 @@
@import 'message-content';
// General styles
.Message {
display: flex;
@ -21,6 +23,11 @@
--deleting-translate-x: -50%;
--select-message-scale: 0.9;
--border-top-left-radius: var(--border-radius-messages);
--border-top-right-radius: var(--border-radius-messages);
--border-bottom-left-radius: var(--border-radius-messages);
--border-bottom-right-radius: var(--border-radius-messages);
@media (min-width: 1921px) {
--max-width: calc(30vw - 1rem);
}
@ -146,6 +153,27 @@
padding-left: 0.25rem;
}
}
&.first-in-group:not(.last-in-group) {
--border-bottom-left-radius: var(--border-radius-messages-small);
}
&:not(.first-in-group):not(.last-in-group) {
--border-top-left-radius: var(--border-radius-messages-small);
--border-bottom-left-radius: var(--border-radius-messages-small);
}
&.last-in-group:not(.first-in-group) {
--border-top-left-radius: var(--border-radius-messages-small);
}
&.last-in-group {
--border-bottom-left-radius: var(--border-radius-messages-small);
.message-content.has-appendix {
--border-bottom-left-radius: 0;
}
}
}
&.own {
@ -180,6 +208,28 @@
@media (max-width: 600px) {
padding-right: 0.25rem;
}
&.first-in-group:not(.last-in-group) {
--border-bottom-right-radius: var(--border-radius-messages-small);
}
&:not(.first-in-group):not(.last-in-group) {
--border-top-right-radius: var(--border-radius-messages-small);
--border-bottom-right-radius: var(--border-radius-messages-small);
}
&.last-in-group:not(.first-in-group) {
--border-top-right-radius: var(--border-radius-messages-small);
}
&.last-in-group {
--border-bottom-right-radius: var(--border-radius-messages-small);
.message-content.has-appendix {
--border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
&.is-deleting {
@ -308,12 +358,14 @@
}
.album-item-select-wrapper {
position: absolute;
.Message.own & {
background: var(--color-background-own);
}
.message-select-control {
position: absolute;
z-index: 2;
top: 0.438rem;
right: 0.438rem;
left: unset;
@ -346,6 +398,22 @@
}
&.is-in-document-group {
.message-content.document {
padding: .25rem .5rem !important;
}
&.last-in-document-group {
.message-content.document {
padding-bottom: .5rem !important
}
}
&.first-in-document-group {
.message-content.document {
padding-top: .5rem !important
}
}
&:not(.first-in-document-group) {
&::before {
top: 0 !important;
@ -448,15 +516,6 @@
}
}
.album-item-select-wrapper {
position: absolute;
.message-select-control {
position: absolute;
z-index: 2;
}
}
.message-select-control {
position: absolute;
left: 0;
@ -494,103 +553,6 @@
margin-right: 0.3rem;
}
&.is-in-document-group {
.message-content.document {
padding: .25rem .5rem !important;
}
&.last-in-document-group {
.message-content.document {
padding-bottom: .5rem !important
}
}
&.first-in-document-group {
.message-content.document {
padding-top: .5rem !important
}
}
}
}
// Border-radius styles
.message-content,
.Album,
.media-inner,
.message-content.media .media-inner img,
.message-content.media .media-inner video,
.message-content.custom-shape .media-inner img {
border-top-left-radius: var(--border-top-left-radius);
border-top-right-radius: var(--border-top-right-radius);
border-bottom-left-radius: var(--border-bottom-left-radius);
border-bottom-right-radius: var(--border-bottom-right-radius);
}
.media-inner video.full-media {
background: transparent !important;
}
.media-inner {
overflow: hidden;
&.small-image img {
border-radius: 0 !important;
}
}
.Message {
--border-top-left-radius: var(--border-radius-messages);
--border-top-right-radius: var(--border-radius-messages);
--border-bottom-left-radius: var(--border-radius-messages);
--border-bottom-right-radius: var(--border-radius-messages);
&:not(.own) {
&.first-in-group:not(.last-in-group) {
--border-bottom-left-radius: var(--border-radius-messages-small);
}
&:not(.first-in-group):not(.last-in-group) {
--border-top-left-radius: var(--border-radius-messages-small);
--border-bottom-left-radius: var(--border-radius-messages-small);
}
&.last-in-group:not(.first-in-group) {
--border-top-left-radius: var(--border-radius-messages-small);
}
&.last-in-group {
--border-bottom-left-radius: var(--border-radius-messages-small);
.message-content.has-appendix {
--border-bottom-left-radius: 0;
}
}
}
&.own {
&.first-in-group:not(.last-in-group) {
--border-bottom-right-radius: var(--border-radius-messages-small);
}
&:not(.first-in-group):not(.last-in-group) {
--border-top-right-radius: var(--border-radius-messages-small);
--border-bottom-right-radius: var(--border-radius-messages-small);
}
&.last-in-group:not(.first-in-group) {
--border-top-right-radius: var(--border-radius-messages-small);
}
&.last-in-group {
--border-bottom-right-radius: var(--border-radius-messages-small);
.message-content.has-appendix {
--border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.message-content {
&.has-replies:not(.custom-shape):not(.has-reactions) .WebPage.with-video .media-inner {
margin-bottom: 1.5rem !important;
@ -668,8 +630,31 @@
}
}
// Border-radius styles
.message-content,
.Album,
.media-inner,
.message-content.media .media-inner img,
.message-content.media .media-inner video,
.message-content.custom-shape .media-inner img {
border-top-left-radius: var(--border-top-left-radius);
border-top-right-radius: var(--border-top-right-radius);
border-bottom-left-radius: var(--border-bottom-left-radius);
border-bottom-right-radius: var(--border-bottom-right-radius);
}
.media-inner video.full-media {
background: transparent !important;
}
.media-inner {
overflow: hidden;
&.small-image img {
border-radius: 0 !important;
}
}
.Message .custom-shape .message-action-button {
bottom: .25rem;
}
@import 'message-content';

2
src/components/ui/Checkbox.scss
View File

@ -19,6 +19,7 @@
}
&::after {
/* stylelint-disable-next-line scss/operator-no-unspaced */
background: var(--color-primary) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50% 50%;
background-size: 12px;
border-radius: 50%;
@ -84,6 +85,7 @@
}
&::after {
/* stylelint-disable-next-line scss/operator-no-unspaced */
background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
background-size: .875rem;
opacity: 0;

4
src/components/ui/Modal.scss
View File

@ -84,7 +84,7 @@
transform: translate3d(0, 1rem, 0);
}
.modal-header {
.modal-header, %modal-header {
padding: 1rem 1rem 0;
display: flex;
align-items: center;
@ -104,7 +104,7 @@
}
.modal-header-condensed {
@extend .modal-header;
@extend %modal-header;
padding: .5rem 1.25rem 0 .9375rem !important;
.modal-action-button {

2
src/components/ui/ProgressSpinner.scss
View File

@ -3,6 +3,7 @@
z-index: 1;
width: 3.375rem;
height: 3.375rem;
/* stylelint-disable-next-line scss/operator-no-unspaced */
background: rgba(0, 0, 0, .25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat 49% 49%;
border-radius: 50%;
cursor: pointer;
@ -31,6 +32,7 @@
&.size-s, &.size-m {
width: auto;
height: auto;
/* stylelint-disable-next-line scss/operator-no-unspaced */
background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) no-repeat 49% 49%;
&.square {

6
src/styles/_common.scss
View File

@ -4,12 +4,8 @@
.media-inner {
position: relative;
video,
img {
video, img {
display: block;
}
img, video {
object-fit: cover;
}

4
src/styles/_spacing.scss
View File

@ -1,6 +1,8 @@
@use "sass:map";
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
$spacers: map.merge(
(
0: 0,
1: ($spacer * .25),

20
src/styles/_variables.scss
View File

@ -1,3 +1,5 @@
@use "sass:color";
@function toRGB($color) {
@return red($color) + ", " + green($color) + ", " + blue($color);
}
@ -7,9 +9,9 @@
$background-opacity: opacity($background);
// calculate opacity
$bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
$bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
$bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
$bm-red: color.red($foreground) * $opacity + color.red($background) * $background-opacity * (1 - $opacity);
$bm-green: color.green($foreground) * $opacity + color.green($background) * $background-opacity * (1 - $opacity);
$bm-blue: color.blue($foreground) * $opacity + color.blue($background) * $background-opacity * (1 - $opacity);
@return rgb($bm-red, $bm-green, $bm-blue);
}
@ -67,7 +69,7 @@ $color-message-reaction-own-hover: #b5e0a4;
--color-background-secondary: #f4f4f5;
--color-background-secondary-accent: #E4E4E5;
--color-background-own: #{$color-light-green};
--color-background-own-selected: #{darken($color-light-green, 10%)};
--color-background-own-selected: color.adjust($color-light-green, -10%);
--color-text: #{$color-black};
--color-text-lighter: #{$color-dark-gray};
--color-text-secondary: #{$color-text-secondary};
@ -90,15 +92,15 @@ $color-message-reaction-own-hover: #b5e0a4;
--color-composer-button: #{$color-text-secondary}CC;
--color-primary: #{$color-primary};
--color-primary-shade: #{mix($color-primary, $color-black, 92%)};
--color-primary-shade-darker: #{mix($color-primary, $color-black, 84%)};
--color-primary-shade-rgb: #{toRGB(mix($color-primary, $color-black, 92%))};
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
--color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
--color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
--color-primary-opacity: rgba(var(--color-primary), 0.50);
--color-green: #{$color-green};
--color-green-darker: #{mix($color-green, $color-black, 84%)};
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
--color-error: #{$color-error};
--color-error-shade: #{mix($color-error, $color-black, 92%)};
--color-error-shade: #{color.mix($color-error, $color-black, 92%)};
--color-error-rgb: #{toRGB($color-error)};
--color-warning: #{$color-warning};

1
src/styles/icons.scss
View File

@ -9,6 +9,7 @@
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;