From cfa0a33aa2a5594aa81d6e110268670a0afa7a25 Mon Sep 17 00:00:00 2001 From: Super Snager Date: Mon, 21 Sep 2020 16:39:32 +0200 Subject: [PATCH] chore(release): first release BREAKING CHANGE: First stable release --- .github/workflows/npm-publish.yml | 33 + .gitignore | 5 + LICENSE | 21 + README.md | 41 + commitlint.config.js | 1 + package.json | 90 ++ scripts/build-all.js | 82 ++ themes/default/_variables.scss | 793 ++++++++++++++++++ themes/default/components/_avatar-group.scss | 96 +++ themes/default/components/_avatar.scss | 117 +++ themes/default/components/_buttons.scss | 100 +++ .../default/components/_chat-container.scss | 42 + .../components/_conversation-header.scss | 121 +++ .../components/_conversation-list.scss | 20 + themes/default/components/_conversation.scss | 289 +++++++ .../default/components/_expansion-panel.scss | 80 ++ themes/default/components/_input-toolbox.scss | 17 + themes/default/components/_loader.scss | 65 ++ .../default/components/_main-container.scss | 198 +++++ themes/default/components/_message-group.scss | 247 ++++++ themes/default/components/_message-input.scss | 142 ++++ themes/default/components/_message-list.scss | 113 +++ .../components/_message-separator.scss | 34 + themes/default/components/_message.scss | 485 +++++++++++ themes/default/components/_overlay.scss | 41 + .../components/_perfect-scrollbar.scss | 122 +++ themes/default/components/_search.scss | 64 ++ themes/default/components/_sidebar.scss | 28 + themes/default/components/_status-list.scss | 89 ++ themes/default/components/_status.scss | 245 ++++++ .../default/components/_typing-indicator.scss | 62 ++ themes/default/exports.scss | 10 + themes/default/helpers/_functions.scss | 12 + themes/default/helpers/_mixins.scss | 115 +++ themes/default/main.scss | 25 + 35 files changed, 4045 insertions(+) create mode 100644 .github/workflows/npm-publish.yml create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 commitlint.config.js create mode 100644 package.json create mode 100644 scripts/build-all.js create mode 100644 themes/default/_variables.scss create mode 100644 themes/default/components/_avatar-group.scss create mode 100644 themes/default/components/_avatar.scss create mode 100644 themes/default/components/_buttons.scss create mode 100644 themes/default/components/_chat-container.scss create mode 100644 themes/default/components/_conversation-header.scss create mode 100644 themes/default/components/_conversation-list.scss create mode 100644 themes/default/components/_conversation.scss create mode 100644 themes/default/components/_expansion-panel.scss create mode 100644 themes/default/components/_input-toolbox.scss create mode 100644 themes/default/components/_loader.scss create mode 100644 themes/default/components/_main-container.scss create mode 100644 themes/default/components/_message-group.scss create mode 100644 themes/default/components/_message-input.scss create mode 100644 themes/default/components/_message-list.scss create mode 100644 themes/default/components/_message-separator.scss create mode 100644 themes/default/components/_message.scss create mode 100644 themes/default/components/_overlay.scss create mode 100644 themes/default/components/_perfect-scrollbar.scss create mode 100644 themes/default/components/_search.scss create mode 100644 themes/default/components/_sidebar.scss create mode 100644 themes/default/components/_status-list.scss create mode 100644 themes/default/components/_status.scss create mode 100644 themes/default/components/_typing-indicator.scss create mode 100644 themes/default/exports.scss create mode 100644 themes/default/helpers/_functions.scss create mode 100644 themes/default/helpers/_mixins.scss create mode 100644 themes/default/main.scss diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml new file mode 100644 index 0000000..0789e6c --- /dev/null +++ b/.github/workflows/npm-publish.yml @@ -0,0 +1,33 @@ +name: build + +on: + push: + branches: + - master + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Setup Node.js + uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + scope: '@chatscope' + - name: Install dependencies + run: yarn + - name: Build + run: yarn build + - name: Publish package + env: + GITHUB_TOKEN: ${{secrets.RELEASE_TOKEN}} + NPM_TOKEN: ${{secrets.NPM_TOKEN}} + NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} + GIT_AUTHOR_NAME: supersnager + GIT_AUTHOR_EMAIL: ${{secrets.GIT_AUTHOR_EMAIL}} + GIT_COMMITTER_NAME: supersnager + GIT_COMMITTER_EMAIL: ${{secrets.GIT_AUTHOR_EMAIL}} + run: npx semantic-release diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2eee6cf --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.idea +node_modules +yarn_error.log +dist +yarn-error.log \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e185c2b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2020 chatscope.io + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..5845608 --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +# Chat UI Kit Styles + +[![Actions Status](https://github.com/chatscope/chat-ui-kit-styles/workflows/build/badge.svg)](https://github.com/chatscope/chat-ui-kit-styles/actions) [![npm version](https://img.shields.io/npm/v/@chatscope-chat-ui-kit-styles.svg?style=flat)](https://npmjs.com/chatscope/chat-ui-kit-styles) [![](https://img.shields.io/npm/l/@chatscope/chat-ui-kit-react)]() [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://chatscope.io/storybook) + +Base theme for [chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react). + +You can use this theme, or create your own by customizing scss variables. + +## Install + +Using yarn. +```sh +yarn add @chatscope/chat-ui-kit-styles +``` + +Using npm. +```sh +npm install @chatscope/chat-ui-kit-styles +```` + +## Usage + +```jsx +import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'; +``` + +For more information please visit [Chat UI Kit React repository](https://github.com/chatscope/chat-ui-kit-react) +or check our friendly [Storybook](https://chatscope.io/storybook/react/). + + +## Community and support +* Twitting via [@chatscope](https://twitter.com/chatscope) +* Chatting at [Discord](https://discord.gg/ZSuESK) +* Facebooking at [Facebook](https://www.facebook.com/chatscope) + +## Website +[https://chatscope.io](https://chatscope.io) + +## License + +[MIT](https://github.com/chatscope/chat-ui-kit-styles/blob/master/LICENSE) diff --git a/commitlint.config.js b/commitlint.config.js new file mode 100644 index 0000000..28fe5c5 --- /dev/null +++ b/commitlint.config.js @@ -0,0 +1 @@ +module.exports = {extends: ['@commitlint/config-conventional']} diff --git a/package.json b/package.json new file mode 100644 index 0000000..8694ac0 --- /dev/null +++ b/package.json @@ -0,0 +1,90 @@ +{ + "name": "@chatscope/chat-ui-kit-styles", + "version": "0.0.9", + "description": "SCSS themes for @chatscope/chat-ui-kit-react library", + "license": "MIT", + "homepage": "https://chatscope.io/", + "keywords": [ + "chat", + "styles", + "css", + "scss", + "ui", + "user interface", + "components", + "ui kit", + "communication", + "conversation", + "toolkit", + "library", + "skin", + "theme", + "frontend", + "reusable", + "responsive" + ], + "repository": { + "type": "git", + "url": "https://github.com/chatscope/chat-ui-kit-styles.git" + }, + "dependencies": {}, + "devDependencies": { + "@commitlint/cli": "11.0.0", + "@commitlint/config-conventional": "11.0.0", + "@semantic-release/changelog": "5.0.1", + "@semantic-release/git": "9.0.0", + "@semantic-release/github": "^7.1.1", + "autoprefixer": "10.0.0", + "husky": "4.3.0", + "node-sass-chokidar": "1.5.0", + "npm-run-all": "4.1.5", + "semantic-release": "17.1.1" + }, + "scripts": { + "build:clean": "rm -Rf dist", + "build:autoprefixer": "postcss dist/**/*.css -r -m --no-map --use autoprefixer", + "build:sass": "node ./scripts/build-all", + "build": "npm-run-all -s build:clean build:sass build:autoprefixer", + "pack": "yarn pack", + "watch": "chokidar 'themes/**/*.scss' -c 'npm-run-all -s build:sass build:autoprefixer'" + }, + "husky": { + "hooks": { + "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" + } + }, + "files": [ + "dist", + "scripts", + "themes" + ], + "publishConfig": { + "access": "public" + }, + "release": { + "plugins": [ + "@semantic-release/commit-analyzer", + "@semantic-release/release-notes-generator", + [ + "@semantic-release/changelog", + { + "changelogFile": "CHANGELOG.md", + "changelogTitle": "# @chatscope/chat-ui-kit-styles changelog" + } + ], + "@semantic-release/github", + "@semantic-release/npm", + [ + "@semantic-release/git", + { + "assets": [ + "package.json", + "CHANGELOG.md" + ], + "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" + } + ] + ] + } + +} diff --git a/scripts/build-all.js b/scripts/build-all.js new file mode 100644 index 0000000..194ab67 --- /dev/null +++ b/scripts/build-all.js @@ -0,0 +1,82 @@ +// Build all themes + +const fs = require("fs"); +const path = require("path"); +var sass = require('node-sass'); + +function writeOutput(error, result, outputFile ) { + + if ( !error ) { + + // No errors during the compilation, write this result on the disk + fs.writeFile(outputFile, result.css, function(err){ + if ( !err ) { + console.log("\x1b[32m%s\x1b[36m%s\x1b[0m", "build-all: sass compiled file: ", outputFile) + } else { + console.error("\x1b[31m%s\x1b[0m", "build-all: sass error writing output file"); + throw (err); + } + }); + + if ( result.map ) { + + const mapFile = outputFile + ".map"; + fs.writeFile( mapFile, result.map, function(err){ + if ( !err ) { + console.log("\x1b[32m%s\x1b[36m%s\x1b[0m", "build-all: sass compiled map file: ", mapFile); + } else { + console.error("\x1b[31m%s\x1b[0m", "build-all: sass error writing output map file"); + throw (err); + } + }); + + } + + } else { + console.error("\x1b[31m%s\x1b[0m", "build-all: sass compile error"); + throw (error); + } +} + +const getAllDirs = (dirPath) => fs.readdirSync(dirPath).map( dir => ({ name: dir, path: path.join(dirPath, dir)})); + +const dirs = getAllDirs("./themes"); + +const sassOptions = { + indentType: "space", + indentWidth: 2, + sourceMap: true, + sourceMapContents: true, +}; + +const sassCompressedOptions = { + outputStyle: "compressed", + ...sassOptions +}; + +dirs.forEach( dir => { + + const distDirectory = `./dist/${dir.name}`; + const outputFile = path.join( distDirectory, "styles" ); + const outputFileName = outputFile + ".css"; + const outputMinFileName = outputFile + ".min.css"; + + if (!fs.existsSync(distDirectory)){ + fs.mkdirSync(distDirectory, { recursive: true}); + } + + // Non compressed output + sass.render({ + file: path.join( dir.path, "main.scss" ), + outFile: outputFileName, // Required for sourceMap + ...sassOptions + } , (error, result ) => writeOutput(error, result, outputFileName ) ); + + // Compressed output + sass.render({ + file: path.join( dir.path, "main.scss" ), + outFile: outputMinFileName, // Required for sourceMap + ...sassCompressedOptions + } , ( error, result ) => writeOutput(error, result, outputMinFileName ) ); + +}); diff --git a/themes/default/_variables.scss b/themes/default/_variables.scss new file mode 100644 index 0000000..87b6a81 --- /dev/null +++ b/themes/default/_variables.scss @@ -0,0 +1,793 @@ +// Variables +// +// + +@import "helpers/functions"; + +// Main class prefix +$prefix: "cs" !default; + +// Grid breakpoints +// +// Breakpoints for responsive view + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px +) !default; + +// Default font family +// + +$default-font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif; + +// Colors +// + +$color-primary: #c6e3fa; +$color-primary-light: #f6fbff; +$color-primary-dark: #6ea9d7; +$color-primary-dark: #6EAAD8; + +$color-secondary: #91ECEC; +$color-secondary-light: #C2F9F9; +$color-secondary-dark: #64D3D3; + +// Material text colors +// http://marcodiiga.github.io/rgba-to-rgb-conversion +// Hex values are calculated based on white background +// If you change background color rgb color will change, that is why its better to use rgba with opacity! +$color-text: rgba(0, 0, 0, .87) !default; // #212121 +$color-text-medium: rgba(0, 0, 0, .60) !default; // #666666 +$color-text-disabled: rgba(0, 0, 0, .38) !default; // #9e9e9e +$color-text-inverted: invert($color-text); + +// Base colors +// +// It's not recommended to change this colors because white is white and black is... black :) +$color-white: #fff !default; +$color-black: #000 !default; + +$default-bg-color: $color-white !default; + +// Element colors +// + +$default-border-color: rgba-to-rgb(rgba(scale-color($color-primary-dark, $saturation: -55%), 0.4), $default-bg-color) !default; + +// State colors +// + +$color-hover: $color-text !default; +$color-bg-hover: rgba-to-rgb(rgba($color-primary-dark, 0.08), $default-bg-color) !default; +$color-focus: $color-text !default; +$color-bg-focus: rgba-to-rgb(rgba($color-primary-dark, 0.24), $color-primary-light) !default; +$color-selected: darken($color-primary-dark, 25%) !default; +$color-bg-selected: $color-bg-focus !default; +$color-activated: darken($color-primary-dark, 25%) !default; +$color-bg-activated: $color-bg-focus !default; +$color-active: $color-primary-dark !default; +$color-bg-active: $color-bg-activated !default; +$color-disabled: $color-text-disabled !default; +$color-bg-disabled: rgba(0, 0, 0, .38) !default; + +// Functional colors +// + +$color-danger: #ec1212; +$color-error: $color-danger; + +// Border radius +// +// Default border radius for elements + +$default-border-radius: 0.7em !default; + +// Opacity +// + +$disabled-opacity: 0.38 !default; + +///////////////////////////////////////// Components ///////////////////////////////////////// + +// Avatar +// + +// Sizes +$avatar-xs-width: 16px !default; +$avatar-sm-width: 26px !default; +$avatar-md-width: 42px !default; +$avatar-lg-width: 68px !default; +$avatar-fluid-width: 100% !default; + +// Avatar group +// + +// Sizes +$avatar-group-xs-width: 16px !default; +$avatar-group-sm-width: 32px !default; +$avatar-group-md-width: 100%; +$avatar-group-lg-width: 80px !default; +$avatar-group-fluid-width: 100% !default; + +$avatar-group-md-min-width: 40px !default; + +// Buttons +// +// General button element and dedicated (function specific) buttons + +// Borders +$button-border: solid 1px $default-border-color; +$button-border-radius: $default-border-radius; + +// Colors +$button-color: $color-primary-dark; +$button-bg-color: transparent; + +// Fonts +$button-font-size: 1em; +$button-line-height: 1.5; + +// Opacity +$button-hover-opacity: 0.6; +$button-disabled-opacity: $disabled-opacity !default; + +// Spacing +$button-margin: 0.1em 0.2em; +$button-padding: 0.2em 0.7em; + +// Add user button + +$button-adduser-color: $button-color; +$button-adduser-bg-color: $button-bg-color; + +// Arrow button + +$button-arrow-color: $button-color; +$button-arrow-bg-color: $button-bg-color; + +// Ellipsis button + +$button-ellipis-color: $button-color; +$button-ellipis-bg-color: $button-bg-color; + +// Info button + +$button-info-color: $button-color; +$button-info-bg-color: $button-bg-color; + +// Star button + +$button-star-color: $button-color !default; +$button-star-bg-color: $button-bg-color; + +// Video call button + +$button-videocall-color: $button-color; +$button-videocall-bg-color: $button-bg-color; + +// Voice call button + +$button-voicecall-color: $button-color; +$button-voicecall-bg-color: $button-bg-color; + +// Send button + +$button-send-color: $button-color; +$button-send-bg-color: $button-bg-color; + +// Attachment button + +$button-attachment-color: $button-color; +$button-attachment-bg-color: $button-bg-color; + +// Chat container +// + +// Borders +$chat-container-message-input-border-top: solid 1px $default-border-color !default; +$chat-container-message-input-border-right: solid 0px $default-border-color !default; +$chat-container-message-input-border-bottom: solid 0px $default-border-color !default; +$chat-container-message-input-border-left: solid 0px $default-border-color !default; + +// Colors +$chat-container-color: $color-text !default; +$chat-container-bg-color: $default-bg-color !default; +$chat-container-message-input-color: $color-text !default; +$chat-container-message-input-bg-color: $default-bg-color !default; +$chat-container-input-toolbox-color: $color-text !default; +$chat-container-input-toolbox-bg-color: $default-bg-color !default; + +// Sizes +$chat-container-min-width: 180px !default; + +// Conversation +// + +// Colors +$conversation-color: $color-text !default; +$conversation-bg-color: $default-bg-color !default; +$conversation-unread-color: $color-white !default; +$conversation-unread-bg-color: $color-danger !default; +$conversation-hover-bg-color: $color-bg-hover !default; +$conversation-unread-dot-color: #2e63e8 !default; +$conversation-name-color: $color-text !default; +$conversation-name-activated-color: $color-activated !default; +$conversation-info-color: $color-text-medium !default; +$conversation-info-activated-color: $color-activated !default; +$conversation-active-color: $conversation-color !default; +$conversation-active-bg-color: $color-bg-active !default; +$conversation-activated-color: $color-activated !default; +$conversation-activated-bg-color: $color-bg-activated !default; + +// Fonts +$conversation-font-family: $default-font-family !default; +$conversation-unread-font-size: 0.75em !default; +$conversation-last-sender-name-font-weight: normal !default; +$conversation-info-content-font-weight: normal !default; + +// Sizes +$conversation-unread-dot-width: 0.7em; + +// Spacing +$conversation-operations-margin: 0 0 0 auto; +$conversation-last-activity-time-margin: 0 0 0 auto; +$chat-container-input-toolbox-margin: 0 !default; +$chat-container-input-toolbox-padding: 0 0.8em 0.17em 0 !default; + +// Conversation header +// + +// Borders +$conversation-header-border-top: solid 0px $default-border-color !default; +$conversation-header-border-right: solid 0px $default-border-color !default; +$conversation-header-border-bottom: solid 1px $default-border-color !default; +$conversation-header-border-left: solid 0px $default-border-color !default; + +// Colors +$conversation-header-bg-color: $color-primary-light !default; +$conversation-header-color: color-by-background($conversation-header-bg-color, $color-text, $color-text-inverted) !default; +$conversation-header-user-name-color: $conversation-header-color !default; +$conversation-header-user-name-bg-color: $conversation-header-bg-color !default; +$conversation-header-info-color: color-by-background($conversation-header-bg-color, $color-text-medium, $color-text-inverted) !default; +$conversation-header-info-bg-color: $conversation-header-bg-color !default; +$conversation-header-action-button-color: normal !default; +$conversation-header-action-button-bg-color: transparent !default; +$conversation-header-actions-color: $color-text !default; +$conversation-header-actions-bg-color: transparent !default; + +// Fonts +$conversation-header-font-family: $default-font-family !default; +$conversation-header-font-size: 1em !default; + +// Sizes +$conversation-header-content-min-width: 0 !default; + +// Spacing +$conversation-header-actions-margin: 0 0 0 0.5em; + +// Conversation list +// + +// Colors +$conversation-list-color: $color-text !default; +$conversation-list-bg-color: transparent !default; + +// Expansion panel +// + +// Borders +$expansion-panel-border: solid 1px $default-border-color !default; + +// Colors +$expansion-panel-color: $color-text !default; +$expansion-panel-bg-color: $default-bg-color !default; +$expansion-panel-header-color: $color-text-medium !default; +$expansion-panel-header-bg-color: $color-primary-light !default; +$expansion-panel-header-hover-color: $expansion-panel-header-color !default; +$expansion-panel-header-hover-bg-color: $color-bg-hover !default; +$expansion-panel-header-open-color: $expansion-panel-header-color !default; +$expansion-panel-header-open-bg-color: $expansion-panel-header-bg-color !default; +$expansion-panel-content-color: $color-text !default; +$expansion-panel-content-bg-color: $default-bg-color !default; +$expansion-panel-content-open-color: $expansion-panel-content-color !default; +$expansion-panel-content-open-bg-color: $expansion-panel-content-bg-color !default; + +// Fonts +$expansion-panel-font-family: $default-font-family !default; +$expansion-panel-font-weight: normal !default; +$expansion-panel-font-size: inherit !default; +$expansion-panel-font-variant: normal !default; + +$expansion-panel-header-font-family: $default-font-family !default; +$expansion-panel-header-font-weight: bold !default; +$expansion-panel-header-font-size: 0.75em !default; +$expansion-panel-header-font-variant: normal !default; + +$expansion-panel-content-font-family: $default-font-family !default; +$expansion-panel-content-font-weight: normal !default; +$expansion-panel-content-font-size: 0.8em !default; +$expansion-panel-content-font-variant: normal !default; + + +// Input toolbox +// + +// Colors +$input-toolbox-send-btn-color: $color-secondary !default; +$input-toolbox-upload-btn-color: $color-secondary !default; + +// Fonts +$input-toolbox-btn-font-size: 1.2em !default; + +// Spacing +$input-toolbox-btn-margin: 0 0.5em 0 0 !default; +$input-toolbox-margin: 0 !default; +$input-toolbox-padding: 0 0 0.4em 0 !default; + +// Loader +// + +// Borders +$loader-border-width: 0.2em !default; + +// Colors +$loader-color: $color-text !default; +$loader-bg-color: transparent !default; +$loader-spinner-color: $color-primary-dark !default; +$loader-spinner-bg-color: $color-primary !default; + +// Sizes +$loader-width: 1.8em !default; +$loader-height: 1.8em !default; + +// Main container +// + +// Borders +$main-container-border: solid 1px $default-border-color !default; +$main-container-conversation-list-border-top: solid 0px $default-border-color !default; +$main-container-conversation-list-border-right: solid 1px $default-border-color !default; +$main-container-conversation-list-border-bottom: solid 0px $default-border-color !default; +$main-container-conversation-list-border-left: solid 0px $default-border-color !default; +$main-container-chat-container-border-right: solid 0px $default-border-color !default; +$main-container-sidebar-right-border-top: solid 0px $default-border-color !default; +$main-container-sidebar-right-border-right: solid 0px $default-border-color !default; +$main-container-sidebar-right-border-bottom: solid 0px $default-border-color !default; +$main-container-sidebar-right-border-left: solid 1px $default-border-color !default; + +// Colors +$main-container-color: $color-text !default; +$main-container-bg-color: $default-bg-color !default; + +// Fonts +$main-container-font-size: 1rem; // Font size for child elements are relative to this size + +// Sizes +$main-container-conversation-list-flex-basis: 300px !default; +$main-container-sidebar-width: 300px !default; +$main-container-sidebar-min-width: $main-container-sidebar-width !default; + +$main-container-sidebar-left-max-width: 320px !default; +$main-container-sidebar-right-min-width: 150px !default; +$main-container-sidebar-right-max-width: 320px !default; + +// Message +// + +// Boolean flags +$show-message-incoming-sender-name: false !default; +$show-message-incoming-single-sender-name: true !default; +$show-message-incoming-first-sender-name: true !default; +$show-message-incoming-last-sender-name: false !default; + +$show-message-outgoing-sender-name: false !default; +$show-message-outgoing-single-sender-name: false !default; +$show-message-outgoing-first-sender-name: false !default; +$show-message-outgoing-last-sender-name: false !default; + +$show-message-incoming-sent-time: false !default; +$show-message-incoming-single-sent-time: true !default; +$show-message-incoming-first-sent-time: true !default; +$show-message-incoming-last-sent-time: false !default; + +$show-message-outgoing-sent-time: false !default; +$show-message-outgoing-single-sent-time: true !default; +$show-message-outgoing-first-sent-time: true !default; +$show-message-outgoing-last-sent-time: false !default; + +// Avatar flags +$show-message-incoming-avatar: false !default; +$show-message-incoming-single-avatar: true !default; +$show-message-incoming-first-avatar: false !default; +$show-message-incoming-last-avatar: true !default; + +$show-message-outgoing-avatar: false !default; +$show-message-outgoing-single-avatar: true !default; +$show-message-outgoing-first-avatar: false !default; +$show-message-outgoing-last-avatar: true !default; + +// Borders +$message-base-radius: $default-border-radius !default; + +$message-border-radius: 0 !default; + +// Border radius for single incoming message +$message-incoming-single-border-radius: $message-border-radius !default; + +// Border radius for first incoming message +$message-incoming-first-border-radius: $message-border-radius +$message-border-radius $message-border-radius 0 !default; +// Border radius for last incoming message +$message-incoming-last-border-radius: 0 $message-border-radius +$message-border-radius $message-border-radius !default; + +// Border radius for single outgoing message +$message-outgoing-single-border-radius: $message-border-radius !default; + +// Border radius for first outgoing message +$message-outgoing-first-border-radius: $message-border-radius +$message-border-radius 0 $message-border-radius !default; +// Border radius for last outgoing message +$message-outgoing-last-border-radius: $message-border-radius +$message-border-radius $message-border-radius $message-border-radius !default; + +// Border radius for content +$message-content-border-radius: $message-base-radius $message-base-radius +$message-base-radius $message-base-radius !default; + +// Border radius for normal incoming message content +$message-incoming-content-border-radius: 0 $message-base-radius +$message-base-radius 0 !default; + +// Border radius for single incoming message content +$message-incoming-content-single-border-radius: 0 $message-base-radius +$message-base-radius $message-base-radius !default; + +// Border radius for first incoming message content +$message-incoming-content-first-border-radius: 0 $message-base-radius +$message-base-radius 0 !default; + +// Border radius for last incoming message content +$message-incoming-content-last-border-radius: 0 $message-base-radius 0 +$message-base-radius !default; + +// Border radius for normal outgoing message content +$message-outgoing-content-border-radius: $message-base-radius 0 0 +$message-base-radius !default; + +// Border radius for single outgoing message content +$message-outgoing-content-single-border-radius: $message-base-radius +$message-base-radius 0 $message-base-radius !default; + +// Border radius for first outgoing message content +$message-outgoing-content-first-border-radius: $message-base-radius 0 0 +$message-base-radius !default; + +// Border radius for last outgoing message content +$message-outgoing-content-last-border-radius: $message-base-radius 0 +$message-base-radius $message-base-radius !default; + +// Colors +$message-color: $color-text !default; +$message-bg-color: transparent !default; + +$message-header-color: lighten($color-text, 30) !default; +$message-header-bg-color: transparent !default; + +$message-footer-color: lighten($color-text, 30) !default; +$message-footer-bg-color: transparent !default; + +$message-incoming-color: $message-color !default; +$message-incoming-bg-color: $message-bg-color !default; + +$message-outgoing-color: $message-color !default; +$message-outgoing-bg-color: transparent !default; + +$message-sender-name-color: $message-header-color !default; +$message-sender-name-bg-color: transparent !default; + +$message-sent-time-color: $message-header-color !default; +$message-sent-time-bg-color: transparent !default; + +$message-content-color: $color-text !default; +$message-content-bg-color: $color-primary !default; + +$message-content-incoming-color: $color-text !default; +$message-content-incoming-bg-color: $message-content-bg-color !default; + +$message-content-outgoing-color: $color-text !default; +$message-content-outgoing-bg-color: $color-primary-dark !default; + +// Fonts +$message-font-size: 1em !default; +$message-font-family: $default-font-family !default; + +$message-content-font-family: $default-font-family !default; +$message-content-font-weight: normal !default; +$message-content-font-size: 0.91em !default; +$message-content-font-variant: normal !default; + +// Sizes +$message-avatar-width: 42px; + +// Spacing +$message-margin:0; // Default margin for message +$message-only-child-margin: 0.2em 0 0 0; +$message-not-only-child-margin: 0.2em 0 0 0; + +$message-header-margin: 0 0.2em 0.1em 0.2em; +$message-footer-margin: 0.1em 0.2em 0 0.2em; + +$message-content-margin-top: 0; +$message-monologue-margin-top: 0.4em; + +$message-avatar-horizontal-margin: 8px !default; // Pixels because need to calculate with avatar width +$message-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default; +$message-incoming-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default; +$message-outgoing-avatar-margin: 0 0 0 $message-avatar-horizontal-margin !default; + +// Message group +// + +// Borders +$message-group-message-base-radius: $default-border-radius !default; +// Border radius for normal incoming message content +$message-group-incoming-message-content-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default; +// Border radius for single incoming message content +$message-group-incoming-message-content-single-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius $message-group-message-base-radius !default; +// Border radius for first message content in incoming group +$message-group-incoming-message-content-first-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default; +// Border radius for last message content in incoming group +$message-group-incoming-message-content-last-border-radius: 0 $message-group-message-base-radius 0 $message-group-message-base-radius !default; +// Border radius for normal outgoing message content +$message-group-outgoing-message-content-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default; +// Border radius for single outgoing message content +$message-group-outgoing-message-content-single-border-radius: $message-group-message-base-radius $message-group-message-base-radius 0 $message-group-message-base-radius !default; +// Border radius for first message content in outgoing group +$message-group-outgoing-message-content-first-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default; +// Border radius for last message content in outgoing group +$message-group-outgoing-message-content-last-border-radius: $message-group-message-base-radius 0 $message-group-message-base-radius $message-group-message-base-radius !default; + +// Colors +$message-group-header-color: $color-text-medium !default; +$message-group-header-bg-color: transparent !default; +$message-group-footer-color: $color-text-medium !default; +$message-group-footer-bg-color: transparent !default; +$message-group-message-content-bg-color: $color-primary !default; + +$message-group-message-content-incoming-color: $color-text !default; +$message-group-message-content-incoming-bg-color: $message-group-message-content-bg-color !default; + +$message-group-message-content-outgoing-color: $color-text !default; +$message-group-message-content-outgoing-bg-color: $color-primary-dark !default; + +// Fonts +$message-group-header-font-size: 0.8em !default; +$message-group-header-font-family: $default-font-family !default; + +$message-group-footer-font-size: 0.8em !default; +$message-group-footer-font-family: $default-font-family !default; + +// Spacing +$message-group-margin: 0.4em 0 0 0 !default; +$message-group-header-margin: 0 0 0.2em 0 !default; +$message-group-footer-margin: 0.2em 0 0 0 !default; + +$message-group-avatar-horizontal-margin: 8px; + +$message-group-header-padding: 0 !default; +$message-group-footer-padding: 0 !default; + +// Message input +// + +// Borders +$message-input-border-top: none !default; +$message-input-border-right: none !default; +$message-input-border-bottom: none !default; +$message-input-border-left: none !default; + +$message-input-content-editor-wrapper-border-radius: $default-border-radius !default; + +$message-input-content-editor-border-top-width: 0 !default; // These variables +$message-input-content-editor-border-right-width: 0 !default; // are used +$message-input-content-editor-border-bottom-width: 0 !default; // for some calculations +$message-input-content-editor-border-left-width: 0 !default; // by _message-input.scss + +$message-input-content-editor-border-top: $message-input-content-editor-border-top-width none !default; +$message-input-content-editor-border-right: $message-input-content-editor-border-right-width none !default; +$message-input-content-editor-border-bottom: $message-input-content-editor-border-bottom-width none !default; +$message-input-content-editor-border-left: $message-input-content-editor-border-left-width none !default; + +// Colors +$message-input-bg-color: $default-bg-color !default; +$message-input-content-editor-color: $color-text !default; +$message-input-content-editor-wrapper-bg-color: $color-primary !default; +$message-input-content-editor-container-bg-color: $message-input-content-editor-wrapper-bg-color !default; +$message-input-content-editor-bg-color: $message-input-content-editor-wrapper-bg-color !default; +$message-input-content-editor-disabled-color: $color-text-medium !default; +$message-input-content-editor-disabled-bg-color: rgba($message-input-content-editor-bg-color, 0.38) !default; + +// Fonts +$message-input-content-editor-font-family: $default-font-family !default; +$message-input-content-editor-container-font-size: 0.94em !default; + +// Sizes +$message-input-max-lines: 4; + +// Spacing +$message-input-placeholder-color: $color-text-disabled !default; +$message-input-padding: 0 !default; + +$message-input-content-editor-wrapper-margin: 0 !default; +$message-input-content-editor-wrapper-padding: 0.6em 0.9em !default; +$message-input-content-editor-container-padding-top: 0em !default; // These variables +$message-input-content-editor-container-padding-right: 0em !default; // are used +$message-input-content-editor-container-padding-bottom: 0em !default; // for some calculations +$message-input-content-editor-container-padding-left: 0em !default; // by _message-input.scss +$message-input-content-editor-container-padding: $message-input-content-editor-container-padding-top $message-input-content-editor-container-padding-right $message-input-content-editor-container-padding-bottom $message-input-content-editor-container-padding-left; + +// !!! Be careful, when set this to unitless value - calculations below will not work properly +// Also check if scroll is working properly after changing this value +$message-input-content-editor-container-line-height: 1.35em !default; + +// Message list +// + +// Colors +$message-list-color: $color-text !default; +$message-list-bg-color: $default-bg-color !default; +$message-list-typing-indicator-bg-color: $color-white !default; +$message-list-loading-more-bg-color: $color-white !default; + +// Sizes +$message-list-loading-more-height: 1.2em !default; + +// Spacing +$message-list-scroll-wrapper-padding: 0 1.2em 0 0.8em !default; +$message-list-loading-more-padding: 2px 0; +$message-list-message-separator-margin-top: 1.2em !default; + +// Message separator +// + +// Colors +$message-separator-color: $color-primary-dark !default; +$message-separator-bg-color: $default-bg-color !default; +$message-separator-font-size: 0.8em !default; +$message-separator-font-family: $default-font-family !default; + +$message-separator-content-color: $message-separator-color !default; +$message-separator-content-bg-color: $message-separator-bg-color !default; + +$message-separator-line-color: $message-separator-color !default; + +// Spacing +$message-separator-left-line-margin: 0 1em 0 0; +$message-separator-right-line-margin: 0 0 0 1em; + +// Overlay +// + +// Colors +$overlay-bg-color: rgba(198,227,250,0.38) !default + +// Search +// + +// Borders +$search-border-radius: $default-border-radius !default; + +// Colors +$search-bg-color: $color-primary !default; +$search-color: $color-text !default; +$search-icon-color: $color-primary-dark !default; +$search-clear-icon-color: $search-icon-color !default; +$search-clear-icon-color-hover: rgba($color-primary-dark, 0.6) !default; +$search-placeholder-color: $color-text !default; +$search-input-bg-color: $search-bg-color !default; +$search-disabled-color: $color-disabled !default; +$search-disabled-bg-color: $search-bg-color !default; +$search-input-disabled-bg-color: $search-disabled-bg-color !default; + +// Fonts +$search-font-family: inherit !default; +$search-font-size: inherit !default; + +// Opacity +$search-disabled-opacity: $disabled-opacity !default; + +// Sidebar +// + +// Colors +$sidebar-right-bg-color: $default-bg-color !default; +$sidebar-left-bg-color: $default-bg-color !default; + +// Status +// + +// Colors +$status-available-color: #00a27e !default; +$status-unavailable-color: #a66d00 !default; +$status-away-color: #fc8b00 !default; +$status-dnd-color: $color-danger !default; +$status-invisible-color: #c2d1d9 !default; +$status-eager-color: #ffee00 !default; + +$status-selected-color: $color-selected !default; +$status-selected-bg-color: $color-bg-selected !default; + +$status-available-name-color: $color-text !default; +$status-unavailable-name-color: $color-text !default; +$status-away-name-color: $color-text !default; +$status-dnd-name-color: $color-text !default; +$status-invisible-name-color: $color-text !default; +$status-eager-name-color: $color-text !default; + +// Fonts +$status-xs-fontsize: 1em !default; +$status-sm-fontsize: 1em !default; +$status-md-fontsize: 1em !default; +$status-lg-fontsize: 1em !default; + +// Sizes +$status-xs-width: 4px !default; +$status-sm-width: 8px !default; +$status-md-width: 11px !default; +$status-lg-width: 14px !default; +$status-fluid-width: 100% !default; + +// Spacing +$status-name-margin: 0 0 0 0.58em !default + +// Status list +// + +// Colors +$status-list-color: $color-text !default; +$status-list-bg-color: $default-bg-color !default; + +$status-list-margin: 0 !default; +$status-list-padding: 1em !default; + +$status-list-item-margin: 0 !default; +$status-list-item-padding: 0.4em 0.8em!default; + +$status-list-item-hover-color: $color-text-medium !default; +$status-list-item-hover-bg-color: $color-bg-hover !default; + +$status-list-item-focus-color: $color-focus !default; +$status-list-item-focus-bg-color: $color-bg-focus !default; + +$status-list-item-selected-color: $color-selected !default; +$status-list-item-selected-bg-color: $color-bg-selected !default; + +$status-list-item-active-color: $color-text !default; +$status-list-item-active-bg-color: $color-bg-active !default; + +// Typing indicator +// + +// Colors +$typing-indicator-text-color: $color-primary-dark !default; +$typing-indicator-text-bg-color: transparent !default; + +$typing-indicator-indicator-bg-color: transparent !default; +$typing-indicator-dot-bg-color: $color-primary-dark !default; + +// Fonts +$typing-indicator-font-family: $default-font-family !default; +$typing-indicator-font-size: inherit !default; + +// Sizes +$typing-indicator-dot-size: 4px; + +// Spacing +$typing-indicator-dot-spacing: 3px; +$typing-indicator-text-margin: 0 0 0 0.5em; diff --git a/themes/default/components/_avatar-group.scss b/themes/default/components/_avatar-group.scss new file mode 100644 index 0000000..883a0fb --- /dev/null +++ b/themes/default/components/_avatar-group.scss @@ -0,0 +1,96 @@ +@import "../variables"; + +$avatar-width-short-factor: 0.618; + +.#{$prefix}-avatar-group { + $class-name: &; + + @include flex-row-reverse; + overflow:visible; + position:relative; + flex-wrap: wrap; + box-sizing: border-box; + min-width: $avatar-group-md-min-width; + align-content: flex-start; + justify-content: flex-end; + + .#{$prefix}-avatar--active { + z-index:1; + } + + .#{$prefix}-avatar--active-on-hover:hover { + z-index:2; + } + + &--xs { + + $xs-padding: $avatar-xs-width - $avatar-xs-width * $avatar-width-short-factor; + padding-left: $xs-padding; + padding-top: $xs-padding; + + .#{$prefix}-avatar { + margin-top: - $xs-padding; + margin-left:- $xs-padding; + width: $avatar-xs-width; + height: $avatar-xs-width; + min-width: $avatar-xs-width; + min-height: $avatar-xs-width; + border: none; + border-right: 1px solid rgb(242, 242, 242); + } + + } + + &--sm { + + $sm-padding: $avatar-sm-width - $avatar-sm-width * $avatar-width-short-factor; + padding-left: $sm-padding; + padding-top: $sm-padding; + + .#{$prefix}-avatar { + margin-top: - $sm-padding; + margin-left:- $sm-padding; + width: $avatar-sm-width; + height: $avatar-sm-width; + min-width: $avatar-sm-width; + min-height: $avatar-sm-width; + } + } + + &--md { + + $md-padding: $avatar-md-width - $avatar-md-width * $avatar-width-short-factor; + padding-left: $md-padding; + padding-top: $md-padding; + + .#{$prefix}-avatar { + margin-top: - $md-padding; + margin-left:- $md-padding; + width: $avatar-md-width; + height: $avatar-md-width; + min-width: $avatar-md-width; + min-height: $avatar-md-width; + border: 2px solid rgb(242, 242, 242); + } + + } + + &--lg { + + $lg-padding: $avatar-lg-width - $avatar-lg-width * $avatar-width-short-factor; + padding-left: $lg-padding; + padding-top: $lg-padding; + + .#{$prefix}-avatar { + margin-top: - $lg-padding; + margin-left:- $lg-padding; + width: $avatar-lg-width; + height: $avatar-lg-width; + min-width: $avatar-lg-width; + min-height: $avatar-lg-width; + border: 2px solid rgb(242, 242, 242); + } + + } + +} \ No newline at end of file diff --git a/themes/default/components/_avatar.scss b/themes/default/components/_avatar.scss new file mode 100644 index 0000000..cc759b3 --- /dev/null +++ b/themes/default/components/_avatar.scss @@ -0,0 +1,117 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-avatar { + + $avatar-class: &; + + position: relative; + width: $avatar-md-width; + height: $avatar-md-width; + border-radius: 50%; + box-sizing: border-box; + + & > img { + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: 50%; + } + + &:hover { + > img { + filter: brightness(115%); + } + } + + &#{&}--xs { + width: $avatar-xs-width; + height: $avatar-xs-width; + min-width: $avatar-xs-width;; + min-height: $avatar-xs-width; + } + + &#{&}--sm { + width: $avatar-sm-width; + height: $avatar-sm-width; + min-width: $avatar-sm-width;; + min-height: $avatar-sm-width; + } + + &#{&}--md + { + width: $avatar-md-width; + height: $avatar-md-width; + min-width: $avatar-md-width;; + min-height: $avatar-md-width; + } + + &#{&}--lg { + width: $avatar-lg-width; + height: $avatar-lg-width; + min-width: $avatar-lg-width;; + min-height: $avatar-lg-width; + } + + &#{&}--fluid { + width: $avatar-fluid-width; + height: $avatar-fluid-width; + .#{$prefix}-status { + right: 5%; + width: 22%; + height: 22% + } + } + + // Status position and size + & .#{$prefix}-status { + box-sizing: border-box; + position: absolute; + right:-1px; + bottom: 3%; + + &__bullet { + box-sizing: content-box; + border: solid 2px #fff; + } + + $status-class: #{$prefix}-status; + $bullet-class: #{$prefix}-status__bullet; + + &--xs, + &--xs:not(.#{$status-class}--named) { + + @include status-size("xs", 1); + right: 0; + bottom: 0; + + } + + &--sm, + &--sm:not(.#{$status-class}--named) { + + @include status-size("sm", 2); + + right: -3px; + bottom: -1px; + } + + &--md, + &--md:not(.#{$status-class}--named) { + @include status-size("md", 2); + } + + &--lg, + &--lg:not(.#{$status-class}--named) { + + @include status-size("lg", 2); + bottom:4%; + + } + + } + + &#{$avatar-class}--active { + + } +} diff --git a/themes/default/components/_buttons.scss b/themes/default/components/_buttons.scss new file mode 100644 index 0000000..773c5d2 --- /dev/null +++ b/themes/default/components/_buttons.scss @@ -0,0 +1,100 @@ +@import "../variables"; + +.#{$prefix}-button { + + // Local alias + $button-class: &; + + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-align: center; + color: $button-color; + background-color: $button-bg-color; + border: none; + border-radius: $button-border-radius; + margin: $button-margin; + padding: $button-padding; + outline: none; + font-size: $button-font-size; + line-height: $button-line-height; + + &:focus { + outline:none; + } + + &:disabled { + opacity: $button-disabled-opacity; + } + + &:not(:disabled) { + cursor:pointer; + } + + &#{$button-class}--border { + border: $button-border; + } + + &:hover:not(:disabled) { + opacity: $button-hover-opacity; + } + + &#{$button-class}--right { + > svg[data-icon]:first-child { + margin-right:0.5em; + } + } + + &#{$button-class}--left { + >svg[data-icon]:last-child { + margin-left:0.5em; + } + } + + &--adduser { + color: $button-adduser-color; + background-color: $button-adduser-bg-color; + } + + &--arrow { + color: $button-arrow-color; + background-color: $button-arrow-bg-color; + } + + &--ellipsis { + color: $button-ellipis-color; + background-color: $button-ellipis-bg-color; + } + + &--info { + color: $button-info-color; + background-color: $button-info-bg-color; + } + + &--star { + color: $button-star-color; + background-color: $button-star-bg-color; + } + + &--videocall { + color: $button-videocall-color; + background-color: $button-videocall-bg-color; + } + + &--voicecall { + color: $button-voicecall-color; + background-color: $button-voicecall-bg-color; + } + + &--send { + color: $button-send-color; + background-color: $button-send-bg-color; + } + + &--attachment { + color: $button-attachment-color; + background-color: $button-attachment-bg-color; + } + +} + diff --git a/themes/default/components/_chat-container.scss b/themes/default/components/_chat-container.scss new file mode 100644 index 0000000..9a77adf --- /dev/null +++ b/themes/default/components/_chat-container.scss @@ -0,0 +1,42 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-chat-container { + box-sizing: border-box; + @include flex-column; + height: 100%; + min-width: $chat-container-min-width; // Required for ellipsis in child elements + color: $chat-container-color; + background-color: $chat-container-bg-color; + + & .#{$prefix}-message-input { + border-top: $chat-container-message-input-border-top; + border-right: $chat-container-message-input-border-right; + border-bottom: $chat-container-message-input-border-bottom; + border-left: $chat-container-message-input-border-left; + + //box-shadow: 0px -4px 5px -5px rgba(0, 0, 0, 0.38); + margin-top:auto; // Message input and following elements (input toolbox) will be placed at the bottom of the chat-container + padding: 0.3em 0 0.3em 0em; + color: $chat-container-message-input-color; + background-color: $chat-container-message-input-bg-color; + + & .#{$prefix}-message-input__content-editor-wrapper:first-child { + margin-left:0.8em; + } + + & .#{$prefix}-message-input__content-editor-wrapper:last-child { + margin-right:0.8em; + } + + } + + & .#{$prefix}-input-toolbox { + margin: $chat-container-input-toolbox-margin; + padding: $chat-container-input-toolbox-padding; + color: $chat-container-input-toolbox-color; + background-color: $chat-container-input-toolbox-bg-color; + } + +} + diff --git a/themes/default/components/_conversation-header.scss b/themes/default/components/_conversation-header.scss new file mode 100644 index 0000000..97f22c7 --- /dev/null +++ b/themes/default/components/_conversation-header.scss @@ -0,0 +1,121 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-conversation-header { + + $class-name: &; + + box-sizing: border-box; + color: $conversation-header-color; + background-color: $conversation-header-bg-color; + font-family: $conversation-header-font-family; + font-size: $conversation-header-font-size; + user-select: none; + //box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.38); + + @include flex-row; + align-items: stretch; + border-top: $conversation-header-border-top; + border-right: $conversation-header-border-right; + border-bottom: $conversation-header-border-bottom; + border-left: $conversation-header-border-left; + padding: 0.6em 0.9em; + + &__back { + box-sizing: border-box; + margin-right:0.5em; + @include flex-row; + align-items: center; + cursor: pointer; + order: 1; + + button { + font-size: 1.4em; + padding:0; + } + } + + &__avatar { + box-sizing: border-box; + width: $avatar-md-width; + height: $avatar-md-width; + margin-right: 1em; + order: 2; + + > .#{$prefix}-avatar { + > .#{$prefix}-status { + > .#{$prefix}-status__bullet { + border-color: $conversation-header-bg-color; + } + } + } + + .#{$prefix}-avatar-group { + padding-right:0 !important; + } + } + + &__content { + box-sizing: border-box; + @include flex-column; + order: 3; + flex-grow: 2; + justify-content: center; + min-width: $conversation-header-content-min-width; // Required for ellipsis in child elements + + #{$class-name}__user-name { + box-sizing: border-box; + @include text-truncate; + font-weight: bold; + color: $conversation-header-user-name-color; + background-color: $conversation-header-user-name-bg-color; + } + + #{$class-name}__info { + box-sizing: border-box; + @include text-truncate; + color: $conversation-header-info-color; + background-color: $conversation-header-info-bg-color; + font-weight: normal; + font-size: 0.9em; + } + + } + + &__actions { + box-sizing: border-box; + @include flex-row; + align-items: center; + color: $conversation-header-actions-color; + background-color: $conversation-header-actions-bg-color; + margin: $conversation-header-actions-margin; + order: 4; + .#{$prefix}-button:not(:first-child) { + margin-left:0.2em; + } + + .#{$prefix}-button { + padding:0; + } + + .#{$prefix}-button.#{$prefix}-button--arrow, + .#{$prefix}-button.#{$prefix}-button--info, + .#{$prefix}-button.#{$prefix}-button--voicecall, + .#{$prefix}-button.#{$prefix}-button--videocall, + .#{$prefix}-button.#{$prefix}-button--star, + .#{$prefix}-button.#{$prefix}-button--adduser, + .#{$prefix}-button.#{$prefix}-button--ellipsis, + .#{$prefix}-button.#{$prefix}-button--ellipsis + { + font-size: 1.4em; + color:$conversation-header-action-button-color; + background-color: $conversation-header-action-button-bg-color; + } + .#{$prefix}-button.#{$prefix}-button--ellipsis { + font-size: 1.3em; + } + + } + + +} diff --git a/themes/default/components/_conversation-list.scss b/themes/default/components/_conversation-list.scss new file mode 100644 index 0000000..8791bb6 --- /dev/null +++ b/themes/default/components/_conversation-list.scss @@ -0,0 +1,20 @@ +@import "../variables"; +@import "../helpers/mixins"; + +/********** Colors **********/ + +/********** Fonts **********/ + +/********** Styles **********/ +.#{$prefix}-conversation-list { + box-sizing: border-box; + position: relative; + overflow: hidden; + height: 100%; + color: $conversation-list-color; + background-color: $conversation-list-bg-color; + + & > ul { + @include reset-list; + } +} diff --git a/themes/default/components/_conversation.scss b/themes/default/components/_conversation.scss new file mode 100644 index 0000000..e6a642f --- /dev/null +++ b/themes/default/components/_conversation.scss @@ -0,0 +1,289 @@ +@import "../variables"; +@import "../helpers/mixins"; +@import "../helpers/functions"; + +// Positions +$_conversation-unread-top: 0.3em; +$_conversation-unread-right: 0.8em; + +.#{$prefix}-conversation { + + $class-name: &; + + @include flex-row; + box-sizing: border-box; + position: relative; + font-family: $conversation-font-family; + padding: $conversation-unread-font-size/2 + $_conversation-unread-top 0.8em $conversation-unread-font-size/2 + $_conversation-unread-top 0.8em; + cursor: pointer; + justify-content: flex-start; + color: $conversation-color; + user-select: none; + + &:hover { + background-color: $conversation-hover-bg-color; + + > .#{$prefix}-avatar { + > .#{$prefix}-status { + > .#{$prefix}-status__bullet { + border-color: $conversation-hover-bg-color; + } + } + } + + // Reset avatar brightness on hover + & > .#{$prefix}-avatar > img { + filter: none; + } + + } + + &#{&}:active { + + color: $conversation-active-color; + background-color: $conversation-active-bg-color; + + > .#{$prefix}-avatar { + > .#{$prefix}-status { + > .#{$prefix}-status__bullet { + border-color: $conversation-active-bg-color; + } + } + } + + } + + &#{&}--active { + + color: $conversation-name-activated-color; + background-color: $conversation-activated-bg-color; + + > .#{$prefix}-avatar { + > .#{$prefix}-status { + > .#{$prefix}-status__bullet { + border-color: $conversation-activated-bg-color; + } + } + } + + #{$class-name}__name { + color: $conversation-name-activated-color; + } + + #{$class-name}__info { + color: $conversation-info-activated-color; + } + + } + + > .#{$prefix}-avatar { + width: $avatar-md-width + 0.1px; + height: $avatar-md-width + 0.1px; + margin-right: 1em; + + > .#{$prefix}-status { + + border-color: $conversation-bg-color; + + } + + } + + > .#{$prefix}-avatar-group { + width: $avatar-md-width + 0.1px; + height: $avatar-md-width + 0.1px; + min-width: $avatar-md-width + 0.1px; + min-height: $avatar-md-width + 0.1px; + padding-right:0 !important; + margin-right: 1em; + } + + &__content { + box-sizing: border-box; + @include flex-column; + overflow: hidden; + margin-right: 1.1em; + flex-grow:1; + } + + &__operations { + box-sizing: border-box; + @include flex-row; + align-items: center; + margin: $conversation-operations-margin; + color: lighten($color-text, 70); + visibility: hidden; + } + + &__operations--visible { + visibility: visible; + } + + &__operations:hover { + color: lighten($color-text, 40); + } + + &:hover &__operations { + visibility: visible; + } + + &__name { + box-sizing: border-box; + color: $conversation-name-color; + font-size: 1em; + @include text-truncate; + } + + &__info { + box-sizing: border-box; + color: $conversation-info-color; + font-size: 0.8em; + @include text-truncate; + } + + &__last-sender { + box-sizing: border-box; + display:inline; + font-weight: $conversation-last-sender-name-font-weight; + } + + &__info-content { + box-sizing: border-box; + display:inline; + font-weight: $conversation-info-content-font-weight; + } + + &__last-activity-time { + box-sizing: border-box; + margin: $conversation-last-activity-time-margin; + font-size: 0.8em; + @include flex-row; + align-items: center; + } + + &__last-activity-time + &__operations { + margin-left:0.5em; + } + + &__unread-dot { + box-sizing: content-box; + @include flex-row; + align-items: center; + margin-right: 0.5em; + align-self: center; + + border-radius: 50%; + width: $conversation-unread-dot-width; + min-width: $conversation-unread-dot-width; + height: $conversation-unread-dot-width; + box-shadow: 1px 1px 1px 0px rgba(179, 179, 179, 1); + perspective: 200px; + perspective-origin: 50% 50%; + + background: radial-gradient( + circle at 3px 3px, + lighten($conversation-unread-dot-color, 17), + $conversation-unread-dot-color + ); + + } + + &__unread-dot { + + &:hover::before { + content: ""; + position: absolute; + top: 1%; + left: 5%; + border-radius: 50%; + z-index: 2; + + filter: blur(0); + height: 80%; + width: 40%; + background: radial-gradient( + circle at 130% 130%, + rgba(255, 255, 255, 0) 0, + rgba(255, 255, 255, 0) 46%, + rgba(255, 255, 255, 0.8) 50%, + rgba(255, 255, 255, 0.8) 58%, + rgba(255, 255, 255, 0) 60%, + rgba(255, 255, 255, 0) 100% + ); + + transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); + } + + &:hover::after { + content: ""; + position: absolute; + top: 5%; + left: 10%; + width: 80%; + height: 80%; + border-radius: 100%; + filter: blur(1px); + z-index: 2; + transform: rotateZ(-30deg); + + display: block; + background: radial-gradient( + circle at 50% 80%, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0) 74%, + white 80%, + white 84%, + rgba(255, 255, 255, 0) 100% + ); + + + animation: #{$prefix}-unread-anim 2s ease-out infinite; + } + + } + + // Without max width text will not be truncated + &__unread { + box-sizing: border-box; + position: absolute; + right: $_conversation-unread-right; + top: $_conversation-unread-top; + padding: 0.01em 0.3em; + border-radius: 0.3em; + font-size: $conversation-unread-font-size; + font-weight: 600; + color: $conversation-unread-color; + background-color: $conversation-unread-bg-color; + max-width: 40 * $conversation-unread-font-size; + @include text-truncate; + z-index:100; /* For grouped Avatar */ + + } + + &__unread:hover::before { + + } + + @keyframes #{$prefix}-unread-anim { + 0% { + transform: scale(1); + } + 20% { + transform: scaleY(0.95) scaleX(1.05); + } + 48% { + transform: scaleY(1.1) scaleX(0.9); + } + 68% { + transform: scaleY(0.98) scaleX(1.02); + } + 80% { + transform: scaleY(1.02) scaleX(0.98); + } + 97%, + 100% { + transform: scale(1); + } + } + +} \ No newline at end of file diff --git a/themes/default/components/_expansion-panel.scss b/themes/default/components/_expansion-panel.scss new file mode 100644 index 0000000..6c57814 --- /dev/null +++ b/themes/default/components/_expansion-panel.scss @@ -0,0 +1,80 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-expansion-panel { + + $panel-class: &; + box-sizing: border-box; + @include flex-column; + color: $expansion-panel-color; + background-color: $expansion-panel-bg-color; + border: $expansion-panel-border; + + font-family: $expansion-panel-font-family; + font-weight: $expansion-panel-font-weight; + font-size: $expansion-panel-font-size; + font-variant: $expansion-panel-font-variant; + + &__header { + box-sizing: border-box; + @include flex-row; + color: $expansion-panel-header-color; + background-color: $expansion-panel-header-bg-color; + font-family: $expansion-panel-header-font-family; + font-weight: $expansion-panel-header-font-weight; + font-size: $expansion-panel-header-font-size; + font-variant: $expansion-panel-header-font-variant; + user-select: none; + padding: 0.8em 0.8em; + align-items: center; + user-select:none; + cursor:pointer; + } + + &__header:hover { + color:$expansion-panel-header-hover-color; + background-color: $expansion-panel-header-hover-bg-color; + } + + &__title { + box-sizing: border-box; + flex-grow:1; + } + + &__icon { + box-sizing: border-box; + margin-left:1em; + margin-right:0.5em; + } + + &__content { + display:none; + color: $expansion-panel-content-color; + background-color: $expansion-panel-content-bg-color; + font-family: $expansion-panel-content-font-family; + font-weight: $expansion-panel-content-font-weight; + font-size: $expansion-panel-content-font-size; + font-variant: $expansion-panel-content-font-variant; + padding: 0.4em 0.8em; + } + + &--open &__content { + display:block; + color: $expansion-panel-content-open-color; + background-color:$expansion-panel-content-open-bg-color; + } + + &--closed &__content { + display:none; + } + + &--open &__header { + color: $expansion-panel-header-open-color; + background-color:$expansion-panel-header-open-bg-color; + } + + &--closed { + + } + +} \ No newline at end of file diff --git a/themes/default/components/_input-toolbox.scss b/themes/default/components/_input-toolbox.scss new file mode 100644 index 0000000..a25dfab --- /dev/null +++ b/themes/default/components/_input-toolbox.scss @@ -0,0 +1,17 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-input-toolbox { + box-sizing: border-box; + @include flex-row; + justify-content: flex-end; + margin: $input-toolbox-margin; + padding: $input-toolbox-padding; + + & .#{$prefix}-button { + @include reset-button; + margin: $input-toolbox-btn-margin; + font-size: $input-toolbox-btn-font-size; + } + +} diff --git a/themes/default/components/_loader.scss b/themes/default/components/_loader.scss new file mode 100644 index 0000000..52c7265 --- /dev/null +++ b/themes/default/components/_loader.scss @@ -0,0 +1,65 @@ +@import "../variables"; + +.#{$prefix}-loader { + box-sizing: border-box; + display:inline-flex; + position:relative; + font-size:1em; + width:$loader-width; + height: $loader-height; + color: $loader-color; + background-color: $loader-bg-color; + + &::before, + &::after { + box-sizing: border-box; + display:block; + width: $loader-width; + height: $loader-height; + margin: 0 0 0 ( $loader-width/2 * -1 ); // Center horizontally + } + + // Background circle + &::before { + position: absolute; + content: ""; + top: 0; + left: 50%; + border-radius:50%; + border-color: $loader-spinner-bg-color; + border-style: solid; + border-width: $loader-border-width; + //box-shadow: 0 0 2px $loader-spinner-bg-color; + } + + // Animated "circle" + &::after { + position: absolute; + content: ""; + top: 0; + left: 50%; + animation: loader-default .6s linear; + animation-iteration-count: infinite; + border-radius: 50%; + border-color: $loader-spinner-color transparent transparent transparent; + border-style: solid; + border-width: $loader-border-width; + box-shadow: 0 0 0 transparent; + } + + &--content { + width:auto; + height:auto; + padding-top: $loader-height + 0.8em; + } + + // Variant or future use + &--variant-default { + + } + +} + +@keyframes loader-default { + to { transform: rotate(360deg); } +} diff --git a/themes/default/components/_main-container.scss b/themes/default/components/_main-container.scss new file mode 100644 index 0000000..65a0b75 --- /dev/null +++ b/themes/default/components/_main-container.scss @@ -0,0 +1,198 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-main-container { + position:relative; + @include flex-row; + height: 100%; + overflow: auto; + border: $main-container-border; + box-sizing: border-box; + color: $main-container-color; + background-color: $main-container-bg-color; + font-size: $main-container-font-size; + + & > .#{$prefix}-conversation-list { + order: 0; + height: 100%; + flex-basis: $main-container-conversation-list-flex-basis; + border-top: $main-container-conversation-list-border-top; + border-right: $main-container-conversation-list-border-right; + border-botton: $main-container-conversation-list-border-bottom; + border-left: $main-container-conversation-list-border-left; + box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38); + /* Hmm without this, box shadow is cut at bottom */ + z-index:2; + } + + & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { + order:0; + height:100%; + max-width:$main-container-sidebar-left-max-width; + flex-basis: 35%; + border-right: $main-container-conversation-list-border-right; + //box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38); + /* Hmm without this, box shadow is cut at bottom */ + z-index:2; + } + + & > .#{$prefix}-sidebar.#{$prefix}-sidebar--right { + flex-basis: 25%; + min-width: $main-container-sidebar-right-min-width; + max-width: $main-container-sidebar-right-max-width; + + border-top: $main-container-sidebar-right-border-top; + border-right: $main-container-sidebar-right-border-right; + border-botton: $main-container-sidebar-right-border-bottom; + border-left: $main-container-sidebar-right-border-left; + + } + + & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left .#{$prefix}-search { + margin:0.5em; + } + + & .#{$prefix}-chat-container { + order:1; + z-index:1; + flex-grow: 1; + flex-basis: 65%; + border-right: $main-container-chat-container-border-right; + } + + & .#{$prefix}-sidebar { + order:2; + height:100%; + //box-shadow: -2px 0px 5px -2px rgba(0,0,0,0.38); + z-index:3; + } + + // Clear expansion panel border in sidebar + & .#{$prefix}-sidebar .#{$prefix}-expansion-panel { + border-left:0; + border-top:0; + border-right:0; + } + + // 3 because of scrollbar divs + & .#{$prefix}-sidebar .#{$prefix}-expansion-panel:nth-last-child(3) { + border-bottom: 0; + } + + & .#{$prefix}-conversation-header { + z-index: 1; + } + + + ///////////////////////////////////////////////////////////// + /// Responsive + &--responsive { + + .#{$prefix}-chat-container { + + .#{$prefix}-conversation-header { + .#{$prefix}-conversation-header__back { + display: none; + } + + .#{$prefix}-conversation-header__actions { + .#{$prefix}-button--info { + display: none; + } + } + + } + } + + @media( max-width: map-get($grid-breakpoints, md) ) { + + min-width: calc( 1.6em + 40px + #{$chat-container-min-width} ); // Horizontal padding from conversation-list plus avatar width plus ChatContainer min-width + + .#{$prefix}-search { + display:none; + } + + > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { + flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width + min-width: calc(1.6em + 40px); + } + + >.#{$prefix}-sidebar.#{$prefix}-sidebar--right { + display: none; + } + + > .#{$prefix}-conversation-list { // Only if conversation-list is direct child of main-container because main-container and conversation-list have different flex-direction + flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width + } + + .#{$prefix}-conversation-list, + .#{$prefix}-sidebar .#{$prefix}-conversation-list { + + .#{$prefix}-conversation { + > .#{$prefix}-avatar { + margin-right:0; // Reset right margin + } + + &__content { + display:none; + } + + &__operations { + display:none; + } + + &__last-activity-time { + display: none; + } + &__unread-dot { + position:absolute; + top:0.3em; + right:0.3em; + margin-right:0; + } + } + } + + .#{$prefix}-conversation-header { + + .#{$prefix}-conversation-header__actions { + .#{$prefix}-button--info { + display: flex; + } + } + + } + + } + + @media( max-width: map-get($grid-breakpoints, sm) ) { + + min-width: auto; + + > .#{$prefix}-sidebar.#{$prefix}-sidebar--left { + display:none; + } + + + .#{$prefix}-chat-container { + // Show back arrow + .#{$prefix}-conversation-header { + .#{$prefix}-conversation-header__back { + display: flex; + } + + .#{$prefix}-conversation-header__info { + + } + + } + } + + + + } + } + +///////////////////////////////////////////////////////////// + +} diff --git a/themes/default/components/_message-group.scss b/themes/default/components/_message-group.scss new file mode 100644 index 0000000..a85624c --- /dev/null +++ b/themes/default/components/_message-group.scss @@ -0,0 +1,247 @@ +@import "../variables"; +@import "../helpers/mixins"; + + +// Positions +$_message-group-avatar-justify-content: flex-end; + +/********** Styles **********/ +.#{$prefix}-message-group { + + // Local alias + $group-class: &; + $message-class: #{$prefix}-message; + $avatar-class: #{$prefix}-avatar; + + box-sizing: border-box; + @include flex-row; + margin: $message-group-margin; + + &__avatar { + box-sizing: border-box; + @include flex-column; + justify-content: $_message-group-avatar-justify-content; + } + + // Container for header, message and footer + &__content { + box-sizing: border-box; + @include flex-column; + } + + &__header { + box-sizing: border-box; + display:flex; + font-size: $message-group-header-font-size; + font-family: $message-group-header-font-family; + color: $message-group-header-color; + background-color: $message-group-header-bg-color; + margin: $message-group-header-margin; + padding: $message-group-header-padding; + } + + &__footer { + box-sizing: border-box; + display:flex; + font-size: $message-group-footer-font-size; + font-family: $message-group-footer-font-family; + color: $message-group-footer-color; + background-color: $message-group-footer-bg-color; + margin: $message-group-footer-margin; + padding: $message-group-footer-padding; + } + + &__messages { + box-sizing: border-box; + // First message in group + .#{$prefix}-message:first-child { + margin-top:0; + } + + // Every message in group + .#{$prefix}-message { + .#{$message-class}__content { + background-color: $message-group-message-content-bg-color; + margin-top:0; + } + } + + // Last message in group + .#{$prefix}-message:last-child { + + } + + } + + // Modifier - group of incoming messages + &--incoming { + justify-content: flex-start; + + & #{$group-class}__avatar { + margin-right: 8px; + order: 0; + } + + & #{$group-class}__content { + order:1; + } + + & #{$group-class}__messages { + + // First message in incoming group + & .#{$message-class}:first-child .#{$message-class}__content { + border-radius: $message-group-incoming-message-content-first-border-radius; + } + + // Message in incoming group + & .#{$message-class} .#{$message-class}__content { + border-radius: $message-group-incoming-message-content-border-radius; + color: $message-group-message-content-incoming-color; + background-color: $message-group-message-content-incoming-bg-color; + } + + // Last message in incoming group + & .#{$message-class}:last-child .#{$message-class}__content { + border-radius: $message-group-incoming-message-content-last-border-radius; + } + + // Single message in incoming group + // !!! only-child must be placed after last-child + .#{$prefix}-message:only-child .#{$message-class}__content { + border-radius: $message-group-incoming-message-content-single-border-radius; + } + + } + + } + + // Modifier - group of outgoing messages + &--outgoing { + justify-content: flex-end; + margin-left: auto; + + & #{$group-class}__avatar { + margin-left: 8px; + order: 1; + } + + & #{$group-class}__content { + order:0; + } + + & #{$group-class}__messages { + + & .#{$message-class} { + justify-content: flex-end; + } + + // First message in outgoing group + & .#{$message-class}:first-child .#{$message-class}__content { + border-radius: $message-group-outgoing-message-content-first-border-radius; + } + + // Message in outgoing group + & .#{$message-class} .#{$message-class}__content { + border-radius: $message-group-outgoing-message-content-border-radius; + color: $message-group-message-content-outgoing-color; + background-color: $message-group-message-content-outgoing-bg-color; + } + + // Last message in outgoing group + & .#{$message-class}:last-child .#{$message-class}__content { + border-radius: $message-group-outgoing-message-content-last-border-radius; + } + + // Single message in outgoing group + // !!! only-child must be placed after last-child + .#{$prefix}-message:only-child .#{$message-class}__content { + border-radius: $message-group-outgoing-message-content-single-border-radius; + } + + } + } + + // Avatar position + // By default incoming and default message has avatar on left and outgoing has avatar on right. + // This can be changed by adding --avatar-left or avatar-right modifier + &--avatar-tl { + + #{$group-class}__avatar { + justify-content: flex-start; + order:0; + margin-right: $message-group-avatar-horizontal-margin; + margin-left:0; + } + + #{$group-class}__content { + order:1; + } + } + + &--avatar-tr { + #{$group-class}__avatar { + justify-content: flex-start; + order:1; + margin-left: $message-group-avatar-horizontal-margin; + margin-right:0; + } + + #{$group-class}__content { + order:0; + } + } + + &--avatar-bl { + #{$group-class}__avatar { + justify-content: flex-end; + order:0; + margin-right: $message-group-avatar-horizontal-margin; + margin-left:0; + } + + #{$group-class}__content { + order:1; + } + } + + &--avatar-br { + #{$group-class}__avatar { + justify-content: flex-end; + order:1; + margin-left: $message-group-avatar-horizontal-margin; + margin-right:0; + } + + #{$group-class}__content { + order:0; + } + } + + &--avatar-cl { + + #{$group-class}__avatar { + justify-content: center; + order:0; + margin-right: $message-group-avatar-horizontal-margin; + margin-left:0; + } + + #{$group-class}__content { + order:1; + } + } + + &--avatar-cr { + #{$group-class}__avatar { + justify-content: center; + order:1; + margin-left: $message-group-avatar-horizontal-margin; + margin-right:0; + } + + #{$group-class}__content { + order:0; + } + } + +} \ No newline at end of file diff --git a/themes/default/components/_message-input.scss b/themes/default/components/_message-input.scss new file mode 100644 index 0000000..bca6b8c --- /dev/null +++ b/themes/default/components/_message-input.scss @@ -0,0 +1,142 @@ +@import "../variables"; +@import "../helpers/mixins"; + +// Overflows +$_message-input-overflow: visible; +$_message-input-content-editor-overflow: visible; + +// Don to override this value (no !default) +$_message-input-content-editor-border-vertical-width: $message-input-content-editor-border-top-width + $message-input-content-editor-border-bottom-width; +// Don to override this value (no !default) +$_message-input-content-editor-border-horizontal-width: $message-input-content-editor-border-left-width + $message-input-content-editor-border-right-width; + +// Calculated - do not override +$_message-input-content-editor-padding-vertical: $message-input-content-editor-container-padding-top + $message-input-content-editor-container-padding-bottom; +$_message-input-content-editor-padding-horizontal: $message-input-content-editor-container-padding-left + $message-input-content-editor-container-padding-right; + +// Calculated - do not override +$_message-input-content-editor-container-min-height: $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width; + +// Calculated - do not override +$_message-input-content-editor-container-max-height: $message-input-max-lines * $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width; + +.#{$prefix}-message-input { + + // Local alias + $message-input-class: &; + + @include flex-row; + position: relative; + background-color: $message-input-bg-color; + border-top: $message-input-border-top; + border-right: $message-input-border-right; + border-bottom: $message-input-border-bottom; + border-left: $message-input-border-left; + box-sizing: border-box; + padding: $message-input-padding; + overflow: $_message-input-overflow; + + &__content-editor-wrapper { + box-sizing: border-box; + position: relative; + background-color: $message-input-content-editor-wrapper-bg-color; + margin: $message-input-content-editor-wrapper-margin; + padding: $message-input-content-editor-wrapper-padding; + border-radius: $message-input-content-editor-wrapper-border-radius; + flex-grow:1; + + #{$message-input-class}--disabled & { + background-color: $message-input-content-editor-disabled-bg-color; + color: $message-input-content-editor-disabled-color; + } + + } + + &__content-editor-container { + box-sizing: border-box; + position:relative; + background-color: $message-input-content-editor-container-bg-color; + @include flex-column; + align-items: stretch; + overflow:hidden; + overflow-y:auto; + font-size: $message-input-content-editor-container-font-size; + line-height: $message-input-content-editor-container-line-height; + min-height: $_message-input-content-editor-container-min-height; + max-height: $_message-input-content-editor-container-max-height; + padding: $message-input-content-editor-container-padding; + scroll-padding: $message-input-content-editor-container-padding-bottom; + + #{$message-input-class}--disabled & { + color: $message-input-content-editor-disabled-color; + background-color: transparent; + } + } + + &__content-editor { + box-sizing: border-box; + flex-grow:1; + background-color: $message-input-content-editor-bg-color; + font-family: $message-input-content-editor-font-family; + outline: 0; + border-top: $message-input-content-editor-border-top; + border-right: $message-input-content-editor-border-right; + border-bottom: $message-input-content-editor-border-bottom; + border-left: $message-input-content-editor-border-left; + overflow: $_message-input-content-editor-overflow; + color: $message-input-content-editor-color; + overflow-wrap: break-word; + word-break: break-all; + #{$message-input-class}--disabled & { + background-color: transparent; // Because bg color is from parent and we are using alpha + color: $message-input-content-editor-disabled-color; + } + + } + + &__content-editor[data-placeholder]:empty:before { + box-sizing: border-box; + content: attr(data-placeholder); + color: $message-input-placeholder-color; + display: block; + cursor:text; + } + + &__tools { + @include flex-row; + box-sizing: border-box; + .#{$prefix}-button { + font-size:1.2em; + margin-top:0; + margin-bottom:0; + } + + .#{$prefix}-button--send { + align-self: flex-end; + } + + .#{$prefix}-button--attachment { + align-self: flex-end; + } + + } + + &__tools:first-child { + .#{$prefix}-button:first-child { + margin-left: 0; + } + .#{$prefix}-button:last-child { + margin-right: 0; + } + } + + &__tools:last-child { + .#{$prefix}-button:first-child { + margin-left: 0; + } + .#{$prefix}-button:last-child { + margin-right: 0; + } + } + +} diff --git a/themes/default/components/_message-list.scss b/themes/default/components/_message-list.scss new file mode 100644 index 0000000..b0c9c5d --- /dev/null +++ b/themes/default/components/_message-list.scss @@ -0,0 +1,113 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-message-list { + box-sizing: border-box; + width: 100%; + height: 100%; + overflow: hidden; + min-height: 1em + (1em * 0.25); // Place for typing indicator + position: relative; + color: $message-list-color; + background-color: $message-list-bg-color; + + &__scroll-wrapper { + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + /*overflow-y: scroll*/; // TODO: Uncomment this when not using fancy scroll + padding: $message-list-scroll-wrapper-padding; + } + + // Scroll-to point for sticky scroll + &__scroll-to:first-child { + box-sizing: border-box; + float: left; + clear: both; + height: 0; + } + + // Last message must have place for typing indicator when scrolled down to be able to read last message + // TODO: If fancy scroll is not used it should be nth-last-child(2). + // Value 4 is set because PerfectScrollbar ads two divs at the end of container + &__scroll-wrapper > .#{$prefix}-message:nth-last-child(4) { + margin-bottom: 1.4em + (1em * 0.25) + 1em; + } + + &__scroll-wrapper > .#{$prefix}-message-group:nth-last-child(4) { + margin-bottom: 1.4em + (1em * 0.25) + 1em; + } + + // Typing indicator (when exists) + & .#{$prefix}-typing-indicator { + position: absolute; + bottom: 0; + left: 0; + // !!!! TODO: set to 20px when not using fancy scroll + right: 15px; + background-color: $message-list-typing-indicator-bg-color; + padding: 0.5em 0.5em; + font-size: 0.9em; + height: 1em + (1em * 0.25); + line-height: 1em + (1em * 0.25); + } + + // Because message in group cant have max-width, only if its direct child of list + &__scroll-wrapper > .#{$prefix}-message, + &__scroll-wrapper > .#{$prefix}-message-group + { + max-width: 85%; + } + + & .#{$prefix}-message.#{$prefix}-message--incoming, + & .#{$prefix}-message-group.#{$prefix}-message-group--incoming, + { + margin-right: auto; + } + + & .#{$prefix}-message.#{$prefix}-message--outgoing, + & .#{$prefix}-message-group.#{$prefix}-message-group--outgoing, + { + margin-left: auto; + } + + & .#{$prefix}-message-separator:not(:first-child) { + margin-top: $message-list-message-separator-margin-top; + } + + &__loading-more { + box-sizing: content-box; + @include flex-row; + justify-content: center; + position:absolute; + background-color: $message-list-loading-more-bg-color; + padding: $message-list-loading-more-padding; + top:0; + left:0; + right:0; + height: $message-list-loading-more-height; + z-index: 1; + + .#{$prefix}-loader { + width:$message-list-loading-more-height; + height:$message-list-loading-more-height; + } + .#{$prefix}-loader::before, + .#{$prefix}-loader::after + { + width:100%; + height:100%; + } + + } + + // Perfect scrollbar fix to hide loading more indicator + .ps__rail-y { + z-index:2; + } + +} diff --git a/themes/default/components/_message-separator.scss b/themes/default/components/_message-separator.scss new file mode 100644 index 0000000..baadcf6 --- /dev/null +++ b/themes/default/components/_message-separator.scss @@ -0,0 +1,34 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-message-separator { + box-sizing: border-box; + color: $message-separator-color; + background-color: $message-separator-bg-color; + font-size: $message-separator-font-size; + font-family: $message-separator-font-family; + text-align: center; + @include flex-row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + + &::before, + &::after { + box-sizing: border-box; + content: ""; + background-color: $message-separator-color; + display: block; + flex-grow: 1; + height: 1px; + } + + &:not(:empty)::before { + margin: $message-separator-left-line-margin; + } + + &:not(:empty)::after { + margin: $message-separator-right-line-margin; + } + +} diff --git a/themes/default/components/_message.scss b/themes/default/components/_message.scss new file mode 100644 index 0000000..d4acc2b --- /dev/null +++ b/themes/default/components/_message.scss @@ -0,0 +1,485 @@ +@import "../variables"; + +$_message-avatar-justify-content: flex-end; + +// How far message avatar should be postponed from message (and message from avatar for outgoing) +$_message-avatar-offset: $message-avatar-width + $message-avatar-horizontal-margin; + + +.#{$prefix}-message { + // Local alias + $message-class: &; + + box-sizing: border-box; + font-size: $message-font-size; + font-family: $message-font-family; + color: $message-color; + display: flex; + flex-direction: row; + padding: 0; + background-color: $message-bg-color; + overflow: hidden; + + border-radius: $message-border-radius; + + &:only-child { + margin: $message-only-child-margin; + } + + &:not(:only-child) { + margin: $message-not-only-child-margin; + } + + &__avatar { + box-sizing: border-box; + margin: $message-avatar-margin; + display: flex; + flex-direction: column; + justify-content: $_message-avatar-justify-content; + width: $message-avatar-width; + } + + &__content-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: column; + } + + &__header { + box-sizing: border-box; + color: $message-header-color; + background-color: $message-header-bg-color; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + font-size: 0.8em; + margin: $message-header-margin; + + #{$message-class}__sender-name { + box-sizing: border-box; + color: $message-sender-name-color; + background-color: $message-sender-name-bg-color; + } + + #{$message-class}__sent-time { + box-sizing: border-box; + color: $message-sent-time-color; + background-color: $message-sent-time-bg-color; + margin-left: auto; + padding-left: 0.8em; + } + + } + + &__footer { + box-sizing: border-box; + color: $message-footer-color; + background-color: $message-footer-bg-color; + display: flex; + font-size: 0.8em; + margin: $message-footer-margin; + + #{$message-class}__sender-name { + box-sizing: border-box; + color: $message-sender-name-color; + background-color: $message-sender-name-bg-color; + } + + #{$message-class}__sent-time { + box-sizing: border-box; + color: $message-sent-time-color; + background-color: $message-sent-time-bg-color; + margin-left: auto; + padding-left: 0.8em; + } + + } + + &__content { + box-sizing: border-box; + color: $message-content-color; + background-color: $message-content-bg-color; + margin-top: $message-content-margin-top; + padding: 0.6em 0.9em; + border-radius: $message-content-border-radius; + white-space: pre-wrap; + overflow-wrap: break-word; + word-break: break-all; + font-family: $message-content-font-family; + font-weight: $message-content-font-weight; + font-size: $message-content-font-size; + font-variant: $message-content-font-variant; + } + + // Modifier: Incoming message + &--incoming { + color: $message-incoming-color; + background-color: $message-incoming-bg-color; + margin-right: auto; + + & #{$message-class}__avatar { + margin: $message-incoming-avatar-margin; + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-incoming-sender-name { + display: block; + } @else { + display: none; + } + } + + & #{$message-class}__sent-time { + @if $show-message-incoming-sent-time { + display: block; + } @else { + display: none; + } + } + + // Incoming message content + & #{$message-class}__content { + color: $message-content-incoming-color; + background-color: $message-content-incoming-bg-color; + border-radius: $message-incoming-content-border-radius; + } + } + + // Modifier: Outgoing message + &--outgoing { + color: $message-outgoing-color; + background-color: $message-outgoing-bg-color; + margin-left: auto; + justify-content: flex-end; + + & #{$message-class}__avatar { + order: 1; + margin: $message-outgoing-avatar-margin; + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-outgoing-sender-name { + display: block; + } @else { + display: none; + } + } + + & #{$message-class}__sent-time { + @if $show-message-outgoing-sent-time { + display: block; + } @else { + display: none; + } + } + + // Outgoing message content + & #{$message-class}__content { + color: $message-content-outgoing-color; + background-color: $message-content-outgoing-bg-color; + border-radius: $message-outgoing-content-border-radius; + } + } + + // Modifier: Single incoming message + &#{$message-class}--incoming#{$message-class}--single { + border-radius: $message-incoming-single-border-radius; + + // Top margin for monologue (only when its not first message in conversation) + &:not(:first-child) { + margin-top: $message-monologue-margin-top; + } + + & #{$message-class}__avatar { + + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-incoming-single-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-incoming-single-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-incoming-content-single-border-radius; + } + } + + // Modifier: First incoming message + &#{$message-class}--incoming#{$message-class}--first { + border-radius: $message-incoming-first-border-radius; + + // Top margin for monologue (only when its not first message in conversation) + &:not(:first-child) { + margin-top: $message-monologue-margin-top; + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-incoming-first-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-incoming-first-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-incoming-content-first-border-radius; + background-color: $message-content-incoming-bg-color; + } + } + + // Modifier: Last incoming message + &#{$message-class}--incoming#{$message-class}--last { + border-radius: $message-incoming-last-border-radius; + + & #{$message-class}__avatar { + + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-incoming-last-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-incoming-last-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-incoming-content-last-border-radius; + } + } + + // Modifier: Single outgoing message + &#{$message-class}--outgoing#{$message-class}--single { + border-radius: $message-outgoing-single-border-radius; + + // Top margin for monologue (only when its not first message in conversation) + &:not(:first-child) { + margin-top: $message-monologue-margin-top; + } + + & #{$message-class}__avatar { + + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-outgoing-single-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-outgoing-single-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-outgoing-content-single-border-radius; + } + } + + // Modifier: First outgoing message + &#{$message-class}--outgoing#{$message-class}--first { + border-radius: $message-outgoing-first-border-radius; + + margin-top: $message-monologue-margin-top; + + & #{$message-class}__avatar { + + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-outgoing-first-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-outgoing-first-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-outgoing-content-first-border-radius; + background-color: $message-content-outgoing-bg-color; + } + } + + // Modifier: Last outgoing message + &#{$message-class}--outgoing#{$message-class}--last { + border-radius: $message-outgoing-last-border-radius; + + & #{$message-class}__avatar { + + } + + & #{$message-class}__content-wrapper { + } + + & #{$message-class}__sender-name { + @if $show-message-outgoing-last-sender-name { + display: block; + } + } + + & #{$message-class}__sent-time { + @if $show-message-outgoing-last-sent-time { + display: block; + } @else { + display: none; + } + } + + #{$message-class}__content { + border-radius: $message-outgoing-content-last-border-radius; + } + } + + // Free space instead of avatar + &--incoming#{$message-class}--avatar-spacer { + margin-left: $_message-avatar-offset; + } + + &--outgoing#{$message-class}--avatar-spacer { + margin-right: $_message-avatar-offset; + } + + // Avatar position + // By default incoming and default message has avatar on left and outoging has avatar on right. + // This can be changed by adding --avatar-left or avatar-right modifier + &--avatar-tl { + + #{$message-class}__avatar { + justify-content:flex-start; + order:0; + margin-right: $message-avatar-horizontal-margin; + margin-left:0; + } + + #{$message-class}__message-wrapper { + order:1; + } + + } + + &--avatar-tr { + #{$message-class}__avatar { + justify-content:flex-start; + order:1; + margin-left: $message-avatar-horizontal-margin; + margin-right:0; + } + #{$message-class}__message-wrapper { + order:0; + } + } + + &--avatar-br { + + #{$message-class}__avatar { + justify-content:flex-end; + order:1; + margin-left: $message-avatar-horizontal-margin; + margin-right:0; + } + + #{$message-class}__message-wrapper { + order:0; + } + + } + + &--avatar-bl { + + #{$message-class}__avatar { + justify-content:flex-end; + order:0; + margin-right: $message-avatar-horizontal-margin; + margin-left:0; + } + + #{$message-class}__message-wrapper { + order:1; + } + + } + + &--avatar-cl { + + #{$message-class}__avatar { + justify-content:center; + order:0; + margin-right: $message-avatar-horizontal-margin; + margin-left:0; + } + + #{$message-class}__message-wrapper { + order:1; + } + + } + + &--avatar-cr { + + #{$message-class}__avatar { + justify-content:center; + order:1; + margin-left: $message-avatar-horizontal-margin; + margin-right:0; + } + + #{$message-class}__message-wrapper { + order:0; + } + + } + +} diff --git a/themes/default/components/_overlay.scss b/themes/default/components/_overlay.scss new file mode 100644 index 0000000..4eb639e --- /dev/null +++ b/themes/default/components/_overlay.scss @@ -0,0 +1,41 @@ +@import "../variables"; + +.#{$prefix}-overlay { + + box-sizing: border-box; + @include flex-row; + justify-content: center; + align-items: center; + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + backdrop-filter: blur(10%); + + // Content must be above opacity layer + &__content { + z-index: 220; + } + + // Opacity layer + &::before { + box-sizing: border-box; + content: ""; + background-color: $overlay-bg-color; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 200; + } + + &--blur::before { + backdrop-filter: blur(2px); + } + + &--grayscale::before { + backdrop-filter: grayscale(50%); + } +} \ No newline at end of file diff --git a/themes/default/components/_perfect-scrollbar.scss b/themes/default/components/_perfect-scrollbar.scss new file mode 100644 index 0000000..fb39529 --- /dev/null +++ b/themes/default/components/_perfect-scrollbar.scss @@ -0,0 +1,122 @@ +@import "../variables"; + +// Container style +.ps { + overflow: hidden !important; + overflow-anchor: none; + -ms-overflow-style: none; + touch-action: auto; + -ms-touch-action: auto; +} + +// Scrollbar rail styles +.ps__rail-x { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + height: 15px; + // there must be 'bottom' or 'top' for ps__rail-x + bottom: 0px; + // please don't change 'position' + position: absolute; +} + +.ps__rail-y { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + width: 15px; + // there must be 'right' or 'left' for ps__rail-y + right: 0; + // https://github.com/mdbootstrap/perfect-scrollbar/issues/792#issue-335195410 + // Ugly but working fix + left:auto !important; + // end of ugly fix + // please don't change 'position' + position: absolute; +} + +.ps--active-x > .ps__rail-x, +.ps--active-y > .ps__rail-y { + display: block; + background-color: transparent; +} + +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: 0.6; +} + +.ps .ps__rail-x:hover, +.ps .ps__rail-y:hover, +.ps .ps__rail-x:focus, +.ps .ps__rail-y:focus, +.ps .ps__rail-x.ps--clicking, +.ps .ps__rail-y.ps--clicking { + background-color: #eee; + background-color: $color-primary-light; + opacity: 0.9; +} + +// Scrollbar thumb styles +.ps__thumb-x { + background-color: $color-primary-dark; + border-radius: 6px; + transition: background-color .2s linear, height .2s ease-in-out; + -webkit-transition: background-color .2s linear, height .2s ease-in-out; + height: 6px; + // there must be 'bottom' for ps__thumb-x + bottom: 2px; + // please don't change 'position' + position: absolute; +} + +.ps__thumb-y { + background-color: $color-primary; + border-radius: 6px; + transition: background-color .2s linear, width .2s ease-in-out; + -webkit-transition: background-color .2s linear, width .2s ease-in-out; + width: 6px; + // there must be 'right' for ps__thumb-y + right: 2px; + // please don't change 'position' + position: absolute; +} + +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x { + background-color: $color-primary; + height: 11px; +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y { + background-color: $color-primary; + width: 11px; +} + +// MS supports +@supports (-ms-overflow-style: none) { + .ps { + overflow: auto !important; + } +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps { + overflow: auto !important; + } +} + +.scrollbar-container { + position: relative; + height: 100%; +} diff --git a/themes/default/components/_search.scss b/themes/default/components/_search.scss new file mode 100644 index 0000000..d13c726 --- /dev/null +++ b/themes/default/components/_search.scss @@ -0,0 +1,64 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-search { + + box-sizing: border-box; + @include flex-row; + @include reset-spacing; + background-color: $search-bg-color; + align-items: center; + position: relative; + border-radius: $search-border-radius; + padding: 0.6em 0.9em; + + &__input { + box-sizing: border-box; + order:1; + color: $search-color; + border:none; + width:100%; + outline:0; + margin-right:0.5em; + background-color:$search-input-bg-color; + } + + &__input:disabled { + color: $search-disabled-color; + background-color:$search-input-disabled-bg-color; + } + + &__input::placeholder { + color: $search-placeholder-color; + } + + &__search-icon { + box-sizing: border-box; + order:0; + display:block; + margin-right:0.5em; + color: $search-icon-color; + } + + &__clear-icon { + box-sizing: border-box; + &:hover { + color: $search-clear-icon-color-hover; + cursor: pointer; + } + order: 2; + color: $search-clear-icon-color; + visibility:hidden; + + &--active { + visibility: visible; + } + } + + &--disabled { + opacity: $search-disabled-opacity; + color: $search-disabled-color; + background-color: $search-disabled-bg-color; + } + +} diff --git a/themes/default/components/_sidebar.scss b/themes/default/components/_sidebar.scss new file mode 100644 index 0000000..9cc7a84 --- /dev/null +++ b/themes/default/components/_sidebar.scss @@ -0,0 +1,28 @@ +@import "../variables"; +@import "../helpers/mixins"; + +// Sidebar variables + +.#{$prefix}-sidebar { + + box-sizing: border-box; + position: relative; + overflow: hidden; + height: 100%; + @include flex-column; + + + // For now left and right modifiers are only for indicate on what side sidebar should be placed inside container + &--left { + background-color: $sidebar-left-bg-color; + } + + &--right { + background-color: $sidebar-right-bg-color; + } + + & .#{$prefix}-expansion-panel + .#{$prefix}-expansion-panel { + border-top:0; + } + +} diff --git a/themes/default/components/_status-list.scss b/themes/default/components/_status-list.scss new file mode 100644 index 0000000..66e3023 --- /dev/null +++ b/themes/default/components/_status-list.scss @@ -0,0 +1,89 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-status-list { + + $status-class: #{$prefix}-status; + + box-sizing: border-box; + list-style-type: none; + margin: $status-list-margin; + padding: $status-list-padding; + color: $status-list-color; + background-color: $status-list-bg-color; + + > li { + box-sizing: border-box; + cursor:pointer; + user-select: none; + + > .#{$status-class} { + + margin: $status-list-item-margin; + padding: $status-list-item-padding; + width:auto; + height:auto; + + } + + .#{$status-class}--selected { + color: $status-list-item-selected-color; + background-color: $status-list-item-selected-bg-color; + + .#{$status-class}__name { + color: $status-list-item-selected-color; + background-color: $status-list-item-selected-bg-color; + } + + } + + &:hover { + color: $status-list-item-hover-color; + background-color: $status-list-item-hover-bg-color; + } + + &:focus { + color: $status-list-item-focus-color; + background-color: $status-list-item-focus-bg-color; + } + + &:active { + color: $status-list-item-active-color; + background-color: $status-list-item-active-bg-color; + } + } + + &--xs { + > li { + > .#{$status-class} { + @include status-size("xs", $named: true); + } + } + } + + &--sm { + > li { + > .#{$status-class} { + @include status-size("sm", $named: true); + } + } + } + + &--md { + > li { + > .#{$status-class} { + @include status-size("md", $named: true); + } + } + } + + + &--lg { + > li { + > .#{$status-class} { + @include status-size("lg", $named: true); + } + } + } + +} \ No newline at end of file diff --git a/themes/default/components/_status.scss b/themes/default/components/_status.scss new file mode 100644 index 0000000..cd74bce --- /dev/null +++ b/themes/default/components/_status.scss @@ -0,0 +1,245 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-status { + + box-sizing: border-box; + $status-class: &; + $bullet-class: #{$status-class}__bullet; + $name-class: #{$status-class}__name; + + position:relative; + @include flex-row; + align-items: center; + flex-wrap: nowrap; + font-size: $status-md-fontsize; + + #{$bullet-class} { + box-sizing: content-box; + width: $status-md-width; + height: $status-md-width; + border-radius: 50%; + position: relative; + + // Bubble + perspective: 200px; + perspective-origin: 50% 50%; + // End Bubble + + } + + &--selected { + color: $status-selected-color; + background-color: $status-selected-bg-color; + } + + &--named { + width: auto; + height:auto; + } + + &__name { + margin: $status-name-margin; + line-height: 1.5; + } + + @at-root .#{$prefix}-avatar:hover #{$bullet-class}:before, + &:hover #{$bullet-class}:before { + box-sizing: border-box; + content: ""; + position: absolute; + top: 1%; + left: 5%; + border-radius: 50%; + z-index: 2; + + filter: blur(0); + height: 80%; + width: 40%; + background: radial-gradient( + circle at 130% 130%, + rgba(255, 255, 255, 0) 0, + rgba(255, 255, 255, 0) 46%, + rgba(255, 255, 255, 0.8) 50%, + rgba(255, 255, 255, 0.8) 58%, + rgba(255, 255, 255, 0) 60%, + rgba(255, 255, 255, 0) 100% + ); + + transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); + } + + @at-root .#{$prefix}-avatar:hover #{$bullet-class}:after, // For hover on parent avatar + &:hover #{$bullet-class}:after { + box-sizing: border-box; + content: ""; + position: absolute; + top: 5%; + left: 10%; + width: 80%; + height: 80%; + border-radius: 100%; + filter: blur(1px); + z-index: 2; + transform: rotateZ(-30deg); + + display: block; + background: radial-gradient( + circle at 50% 80%, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0) 74%, + white 80%, + white 84%, + rgba(255, 255, 255, 0) 100% + ); + + + animation: #{$prefix}-bubble-anim 2s ease-out infinite; + } + + + &--available { + + #{$bullet-class} { + background: radial-gradient( + circle at 3px 3px, + lighten($status-available-color, 10), + $status-available-color + ); + } + + #{$name-class} { + color: $status-available-name-color; + } + + } + + &--unavailable { + #{$bullet-class} { + background: radial-gradient( + circle at 3px 3px, + lighten($status-unavailable-color, 25), + $status-unavailable-color + ); + } + + #{$name-class} { + color: $status-unavailable-name-color; + } + + } + + &--away { + + #{$bullet-class} { + background: radial-gradient( + circle at 3px 3px, + lighten($status-away-color, 35), + $status-away-color + ); + } + + #{$name-class} { + color: $status-away-name-color; + } + + } + + &--dnd { + + #{$bullet-class} { + background-color: $status-dnd-color; + background: radial-gradient( + circle at 3px 3px, + lighten($status-dnd-color, 30), + $status-dnd-color + ); + } + + #{$name-class} { + color: $status-dnd-name-color; + } + + } + + &--invisible { + #{$bullet-class} { + background-color: $status-invisible-color; + background: radial-gradient( + circle at 3px 3px, + lighten($status-invisible-color, 25), + $status-invisible-color + ); + } + + #{$name-class} { + color: $status-invisible-name-color; + } + } + + // Eager to chat + &--eager { + #{$bullet-class} { + background: radial-gradient( + circle at 3px 3px, + lighten($status-eager-color, 40), + $status-eager-color + ); + } + + #{$name-class} { + color: $status-eager-name-color; + } + + } + + // Sized + &--xs:not(&--named) { + @include status-size("xs"); + } + + &--sm:not(&--named) { + @include status-size("sm"); + } + + &--md:not(&--named) { + @include status-size("md"); + } + + &--lg:not(&--named) { + @include status-size("lg"); + } + + &--fluid { + width: $status-fluid-width; + height: $status-fluid-width; + #{$bullet-class} { + width: $status-fluid-width; + min-width: $status-fluid-width; + height: $status-fluid-width; + } + } + + @keyframes #{$prefix}-bubble-anim { + 0% { + transform: scale(1); + } + 20% { + transform: scaleY(0.95) scaleX(1.05); + } + 48% { + transform: scaleY(1.1) scaleX(0.9); + } + 68% { + transform: scaleY(0.98) scaleX(1.02); + } + 80% { + transform: scaleY(1.02) scaleX(0.98); + } + 97%, + 100% { + transform: scale(1); + } + } + +} diff --git a/themes/default/components/_typing-indicator.scss b/themes/default/components/_typing-indicator.scss new file mode 100644 index 0000000..5b2c1eb --- /dev/null +++ b/themes/default/components/_typing-indicator.scss @@ -0,0 +1,62 @@ +@import "../variables"; +@import "../helpers/mixins"; + +.#{$prefix}-typing-indicator { + box-sizing: content-box; + font-size: $typing-indicator-font-size; + font-family: $typing-indicator-font-family; + @include flex-row; + align-items: stretch; + + &__indicator { + box-sizing: inherit; + background-color: $typing-indicator-indicator-bg-color; + @include flex-row; + align-items: center; + } + + &__dot { + box-sizing: inherit; + animation: #{$prefix}-typing-indicator__typing-animation 1.5s infinite ease-in-out; + border-radius: 100%; + display: inline-block; + height: $typing-indicator-dot-size; + width: $typing-indicator-dot-size; + background-color: $typing-indicator-dot-bg-color; + } + + &__dot:not(:last-child) { + margin-right: $typing-indicator-dot-spacing; + } + + &__dot:nth-child(1) { + box-sizing: inherit; + } + &__dot:nth-child(2) { + animation-delay: 300ms; + } + &__dot:nth-child(3) { + animation-delay: 400ms; + } + + &__text { + box-sizing: inherit; + @include text-truncate; + color: $typing-indicator-text-color; + background-color: $typing-indicator-text-bg-color; + margin: $typing-indicator-text-margin; + user-select: none; + } + + @keyframes #{$prefix}-typing-indicator__typing-animation { + 0% { + transform: translateY(0px); + } + 28% { + transform: translateY(-5px); + } + 44% { + transform: translateY(0px); + } + } +} diff --git a/themes/default/exports.scss b/themes/default/exports.scss new file mode 100644 index 0000000..672b2bf --- /dev/null +++ b/themes/default/exports.scss @@ -0,0 +1,10 @@ +@import "variables"; + +// Experimental! Export theme variables for Webpack +// +// Exported variables can be loaded by Webpack and used in Javascript +// This file is not included in css build + +:export { + buttonInfoColor: $button-info-color; +} diff --git a/themes/default/helpers/_functions.scss b/themes/default/helpers/_functions.scss new file mode 100644 index 0000000..f31d96b --- /dev/null +++ b/themes/default/helpers/_functions.scss @@ -0,0 +1,12 @@ +@function rgba-to-rgb($rgba, $background: #fff) { + @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%) +} + +@function color-by-background($bg-color, $text-color, $inverted-text-color) { + @if (lightness( $bg-color ) > 40) { + @return $text-color; + } + @else { + @return $inverted-text-color; + } +} diff --git a/themes/default/helpers/_mixins.scss b/themes/default/helpers/_mixins.scss new file mode 100644 index 0000000..3ee0787 --- /dev/null +++ b/themes/default/helpers/_mixins.scss @@ -0,0 +1,115 @@ +@mixin reset-spacing { + margin: 0; + padding: 0; +} + +@mixin reset-button { + @include reset-spacing; + background: none; + border: none; +} + +@mixin reset-list { + @include reset-spacing; + list-style-type: none; +} + +@mixin flex-row { + display: flex; + flex-direction: row; +} + +@mixin flex-row-reverse { + display: flex; + flex-direction: row-reverse; +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Mixins for status size +// + +$bullet-class: #{$prefix}-status__bullet; + +@mixin status-xs { + font-size: $status-xs-fontsize; + width: $status-xs-width; + height: $status-xs-width; + .#{$bullet-class} { + width: $status-xs-width; + height: $status-xs-width; + } +} + +@mixin status-sm { + font-size: $status-sm-fontsize; + .#{$bullet-class} { + width: $status-sm-width; + height: $status-sm-width; + } +} + +@mixin status-md { + font-size: $status-md-fontsize; + width: $status-md-width; + height: $status-md-width; + .#{$bullet-class} { + width: $status-md-width; + height: $status-md-width; + } +} + +@mixin status-lg { + font-size: $status-lg-fontsize; + width: $status-lg-width; + height: $status-lg-width; + .#{$bullet-class} { + width: $status-lg-width; + height: $status-lg-width; + } +} + +// Tablica z rozmiarami klucz wartość +$status-sizes: ( + "xs": $status-xs-width, + "sm": $status-sm-width, + "md": $status-md-width, + "lg": $status-lg-width +); + +$status-font-sizes: ( + "xs": $status-xs-fontsize, + "sm": $status-sm-fontsize, + "md": $status-md-fontsize, + "lg": $status-lg-fontsize +); + +@mixin status-size($size, $border-width:0, $named:false) { + $element-width: map_get($status-sizes, $size) + 2*$border-width; + $bullet-width: $element-width - 2*$border-width; + font-size: map_get($status-font-sizes, $size); + + @if ( $named == false ) { + width: $element-width; + height: $element-width; + } @else { + width: auto; + height: auto; + } + + .#{$bullet-class} { + width: $bullet-width; + min-width: $bullet-width; + height: $bullet-width; + } + +} \ No newline at end of file diff --git a/themes/default/main.scss b/themes/default/main.scss new file mode 100644 index 0000000..0fa1438 --- /dev/null +++ b/themes/default/main.scss @@ -0,0 +1,25 @@ +@charset "utf-8"; +@import "helpers/functions"; +@import "components/main-container"; +@import "components/message"; +@import "components/message-group"; +@import "components/message-separator"; +@import "components/message-list"; +@import "components/avatar"; +@import "components/avatar-group"; +@import "components/message-input"; +@import "components/input-toolbox"; +@import "components/chat-container"; +@import "components/typing-indicator"; +@import "components/conversation-header"; +@import "components/conversation"; +@import "components/conversation-list"; +@import "components/status"; +@import "components/sidebar"; +@import "components/expansion-panel"; +@import "components/search"; +@import "components/buttons"; +@import "components/loader"; +@import "components/overlay"; +@import "components/status-list"; +@import "components/perfect-scrollbar"; \ No newline at end of file