Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: addapt theming v2 channel list and preview to stream-chat-react SDK #102

Merged
merged 8 commits into from
May 24, 2022
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@
"scripts": {
"build": "yarn build-v1 && yarn build-v2",
"build-v1": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
"build-v2": "rm -rf dist-v2 && mkdir -p dist-v2/scss && yarn transform && yarn compile-to-css",
"transform": "postcss --dir dist-v2/scss --base src-v2/styles src-v2/styles",
"compile-to-css": "sass dist-v2/scss/index.scss dist-v2/css/index.css --style compressed && sass dist-v2/scss/index.layout.scss dist-v2/css/index.layout.css --style compressed",
"bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
"build-v2": "rm -rf dist/v2 && mkdir -p dist/v2/scss && yarn transform && yarn compile-to-css",
"transform": "postcss --dir dist/v2/scss --base src/v2/styles src/v2/styles",
"compile-to-css": "sass dist/v2/scss/index.scss dist/v2/css/index.css --style compressed && sass dist/v2/scss/index.layout.scss dist/v2/css/index.layout.css --style compressed",
"bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/v1/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
"copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
"copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
"copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/v1/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
"lint": "stylelint '**/*.scss' --max-warnings 0",
"build:ci": "yarn && yarn lint && yarn build",
"start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"
"start": "yarn build-v1 && sass --watch src/v1/styles/index.scss dist/css/index.css",
"start-v2": "yarn build-v2 && sass --watch src/v2/styles/index.scss dist/v2/css/index.css"
},
"release": {
"branches": [
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion src/styles/Audio.scss → src/v1/styles/Audio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
> div {
height: 4px;
border-radius: var(--border-radius-sm);
width: 0%;
width: 0;
background: var(--primary-color);
transition: width 0.5s linear;
}
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
animation: pulsate 1s linear 0s infinite alternate;

&:nth-of-type(2) {
animation: pulsate 1s linear 0.3334 infinite alternate;
animation: pulsate 1s linear 0.3334s infinite alternate;
}

&:last-of-type {
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
display: flex; /* inline-flex if you don't want the */
justify-content: flex-start;
align-items: flex-end;
padding: 0 0 0 0;
padding: 0;
position: relative;
margin: 1px 0;

&-inner {
position: relative;
/* flex: 1 if you want the messagebubbles to be the same width- */
> .str-chat__message-commerce__actions {
min-height: 10px;
min-width: 30px;
float: right;

.str-chat__reaction-list {
left: unset;
right: 46px;
Expand Down Expand Up @@ -68,6 +70,7 @@
&-text {
&-inner {
border-radius: 16px 16px 16px 0;

&--has-attachment {
border-radius: 4px 4px 16px 0;
}
Expand All @@ -80,7 +83,7 @@
.str-chat__message-commerce {
&-text {
&-inner {
border-radius: 4px 4px 4px 4px;
border-radius: 4px;
}
}
}
Expand All @@ -89,7 +92,7 @@
&-text {
display: flex;

padding: 0 0 0 0;
padding: 0;
position: relative;

&-inner {
Expand All @@ -105,12 +108,10 @@

margin-left: 0;
max-width: 345px;

p {
margin: 0;
white-space: pre-line;
&:not(:first-of-type) {
margin: 16px 0 0;
}

/* These are technically the same, but use both */
overflow-wrap: break-word;
Expand All @@ -124,6 +125,10 @@
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

&:not(:first-of-type) {
margin: 16px 0 0;
}
}

&--has-attachment {
Expand Down Expand Up @@ -172,6 +177,7 @@

&--with-reactions {
margin-top: 30px;

.str-chat__message-commerce__actions__action--reactions {
display: none;
}
Expand Down Expand Up @@ -202,7 +208,7 @@

/* error messages */
&--error {
margin: 0 0 32px 0;
margin: 0 0 32px;
font-size: var(--sm-font);

.str-chat__message-text-inner {
Expand All @@ -215,23 +221,29 @@
&.str-chat__message-commerce {
justify-content: flex-end;
margin-left: 0;

.str-chat__message-commerce__actions {
justify-content: flex-end;
}

.str-chat__message-commerce {
&-inner {
> .str-chat__message-commerce__actions {
float: left;

.str-chat__reaction-list {
left: 46px;
}
}

> .str-chat__message-commerce-reply-button {
display: flex;
justify-content: flex-end;

.str-chat__message-replies-count-button {
display: flex;
flex-direction: row-reverse;

svg {
transform: scaleX(-1);
margin-left: 5px;
Expand All @@ -245,43 +257,50 @@

.str-chat__message-commerce-text-inner {
background: #ebebeb;
border-width: 0px;
border-width: 0;
margin-top: 2px;
border-color: transparent;

p {
text-align: right;
}
}

> .str-chat__avatar {
display: none;
}

.str-chat__message-attachment {
margin: 0 auto 0 30px;

&--img {
border-radius: var(--border-radius) var(--border-radius) 2px var(--border-radius);
}
}

.str-chat__message-attachment-card {
border-radius: 16px 16px 4px 16px;
border-radius: 16px 16px 4px;
}

&--bottom,
&--single {
margin-right: 0;
}

&--single {
.str-chat__message-commerce {
&-text {
&-inner {
border-radius: 16px 16px 4px 16px;
border-radius: 16px 16px 4px;

&--has-attachment {
border-radius: 16px 4px 4px 16px;
}
}
}
}
}

&--bottom {
.str-chat__message-commerce {
&-text {
Expand All @@ -291,16 +310,20 @@
}
}
}

.str-chat__avatar {
order: 1;
}

.str-chat__message-commerce-text {
flex-direction: row-reverse;
justify-content: flex-start;

&-inner {
flex: unset;
}
}

.str-chat__message-commerce-data {
text-align: right;
}
Expand All @@ -323,6 +346,7 @@
.str-chat {
&__message-commerce {
font-family: var(--second-font);

&__actions {
display: flex;
margin-top: 5px;
Expand All @@ -336,28 +360,33 @@
align-items: center;
height: 10px;
cursor: pointer;

svg {
fill: #000;
opacity: 0.5;
}

&:hover {
svg {
opacity: 1;
}
}

&--thread,
&--reactions {
display: none;
}

&--options {
position: relative;
display: none;

.str-chat__message-actions-box {
bottom: 10px;
left: unset;
right: 100%;
width: 120px;
border-radius: 16px 16px 2px 16px;
border-radius: 16px 16px 2px;
}
}
}
Expand All @@ -367,14 +396,15 @@
.str-chat__message-commerce__actions__action--thread {
display: flex;
}

.str-chat__message-commerce__actions__action--reactions {
display: flex;
}
}

&-text {
display: flex;
padding: 0 0 0 0;
padding: 0;
position: relative;
}

Expand All @@ -389,11 +419,13 @@
p {
text-align: left;
}

a {
color: var(--secondary-color);
font-weight: var(--font-weight-bold);
text-decoration: none;
}

blockquote {
margin: 0 0 0 5px;
font-style: italic;
Expand All @@ -416,9 +448,11 @@
.str-chat__message-commerce__actions__action--options {
display: flex;
}

.str-chat__message-commerce__actions__action--reactions {
display: flex;
}

.str-chat__message-commerce__actions__action--thread {
display: flex;
}
Expand All @@ -434,7 +468,7 @@
}

.str-chat__message-commerce-status {
margin: 10px 0px 10px 10px;
margin: 10px 0 10px 10px;
order: 3;
position: absolute;
left: 100%;
Expand All @@ -444,6 +478,7 @@
justify-content: flex-end;
align-items: center;
z-index: 11;

&-number {
font-size: var(--xs-font);
margin-left: 4px;
Expand Down Expand Up @@ -487,6 +522,7 @@
border-radius: unset;
margin: 0 auto 0 0;
}

.str-chat__message-attachment-card {
margin: 0;
border-radius: 4px var(--border-radius) 4px 4px;
Expand All @@ -508,6 +544,7 @@
&__actions {
width: 30px;
}

&__actions__action--options {
.str-chat__message-actions-box {
right: unset;
Expand All @@ -524,10 +561,12 @@
color: white;
opacity: 0.5;
}

&-text-inner {
background: rgba(255, 255, 255, 0.05);
color: white;
}

&__actions {
svg {
fill: white;
Expand All @@ -536,12 +575,15 @@

.str-chat__message-attachment-card {
background: rgba(0, 0, 0, 0.2);

&--content {
background: rgba(0, 0, 0, 0.2);
}

&--title {
color: white;
}

&--url {
color: rgba(255, 255, 255, 0.5);
}
Expand All @@ -552,8 +594,10 @@
&-text-inner {
background: rgba(0, 0, 0, 0.2);
}

.str-chat__message-attachment-card {
background: rgba(0, 0, 0, 0.2);

&--content {
background: rgba(0, 0, 0, 0.2);
}
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loading