├── .editorconfig ├── .env.example ├── .eslintrc.js ├── .github └── dependabot.yml ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── README.md ├── assets ├── _animation.scss ├── _chatbox.scss ├── _comment.scss ├── _custom.scss ├── _dropdown-menu.scss ├── _global.scss ├── _icon.scss ├── _input.scss ├── _navbar.scss ├── _notification.scss ├── _scrollbar.scss ├── _sidebar.scss ├── _style.scss ├── _toastr.scss ├── _variables.scss ├── bootstrap │ └── main.scss └── index.scss ├── collaborapps.png ├── components ├── Chat │ ├── Content.vue │ └── Header.vue ├── Default │ ├── Loading │ │ ├── Dot.vue │ │ ├── Eater.vue │ │ ├── Index.vue │ │ └── Search.vue │ └── Modal.vue ├── Form │ ├── Input.vue │ ├── SubmitButton.vue │ └── TextArea.vue ├── Home │ ├── Post │ │ ├── Comment │ │ │ ├── Create.vue │ │ │ ├── Index.vue │ │ │ └── Show.vue │ │ ├── Create.vue │ │ ├── Edit.vue │ │ ├── Filter │ │ │ └── Index.vue │ │ ├── Index.vue │ │ └── Show.vue │ └── Side │ │ ├── Channel │ │ ├── Create.vue │ │ ├── Index.vue │ │ └── Item │ │ │ └── Index.vue │ │ ├── Room │ │ ├── Index.vue │ │ └── User │ │ │ └── Index.vue │ │ └── Server │ │ └── Index.vue ├── Icon │ ├── Award.vue │ ├── Briefcase.vue │ ├── Calendar.vue │ └── Home.vue ├── NuxtLogo.vue ├── Shared │ ├── TheChatBox.vue │ ├── TheFooter.vue │ └── TheNavbar.vue └── Wrapper │ └── Default.vue ├── config.json ├── layouts ├── default.vue ├── error.vue └── login.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── auth │ ├── login │ │ └── index.vue │ ├── profile │ │ └── index.vue │ ├── register │ │ └── index.vue │ └── setting │ │ └── index.vue ├── channels │ ├── _id │ │ ├── edit.vue │ │ └── index.vue │ └── index.vue ├── index.vue └── notifications │ ├── index.vue │ ├── read │ └── index.vue │ └── unread │ └── index.vue ├── plugins ├── bootstrap.js ├── echo.js └── fontawesome.js ├── static ├── favicon.ico ├── svg │ ├── bean-eater.svg │ ├── bot-wave.svg │ └── wave.svg └── test.css └── store ├── README.md ├── channels.js ├── chat.js ├── index.js └── posts.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | VUE_APP_WEBSOCKETS_KEY=local 2 | BACKEND_BASE_URL=http://localhost:8000 3 | PUSHER_WS_PORT=6001 4 | PUSHER_WS_HOST=localhost 5 | PUSHER_KEY=local 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'prettier', 13 | 'plugin:prettier/recommended', 14 | 'plugin:nuxt/recommended' 15 | ], 16 | plugins: ['prettier'], 17 | // add your custom rules here 18 | rules: { 19 | // eqeqeq: 'off', 20 | 'linebreak-style': ['error'] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "arrowParens": "always", 4 | "singleQuote": true, 5 | "endOfLine": "lf", 6 | "trailingComma": "none" 7 | } 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [0.1.0] 4 | 5 | ### Added 6 | 7 | ``` 8 | Notes: * = Real Time 9 | ``` 10 | 11 | - Chat\* 12 | - Channel 13 | - Post\* 14 | - Comment\* 15 | - React\* 16 | - Voice\* 17 | - Auth 18 | - Login 19 | - Logout 20 | - Profile 21 | - Setting 22 | 23 | ## [0.2.0] 24 | ### Added 25 | - Channel 26 | - Post 27 | - Filter [PIN] 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Collabor Apps 2 | 3 | CollaborApps is now support Laravel 9. 4 | 5 | Realtime collaboration web based application built with Laravel 9 & Nuxt. Communicate with message & voice realtime. 6 | 7 | ### Image Preview 8 | 9 | ![Example Collaborapps](https://user-images.githubusercontent.com/53980548/151662579-218da4f3-df7c-432f-916b-f7f1fe522275.png) 10 | 11 | ## Installation 12 | 13 | ### Backend Installation 14 | 15 | - Clone BE repo [ssh or https] 16 | 17 | ``` 18 | git clone git@github.com:WailanTirajoh/CollaborApps-Backend.git 19 | ``` 20 | 21 | - Change directory to folder 22 | 23 | ``` 24 | cd collaborapps-backend 25 | ``` 26 | 27 | - Copy .env.example to .env 28 | 29 | ``` 30 | cp .env.example .env 31 | ``` 32 | 33 | - Create database [mysql or pgsql] 34 | 35 | ``` 36 | mysql -u -p 37 | create database 2022_collaborapps; 38 | ``` 39 | 40 | - Fresh Migrate DB 41 | 42 | ``` 43 | php artisan migrate:fresh --seed 44 | ``` 45 | 46 | - serve server & websocket server 47 | 48 | ``` 49 | // install dependency 50 | composer install 51 | 52 | // generate backend key 53 | php artisan key:generate 54 | 55 | // open 2 terminal on backend directory and run 56 | // on terminal 1 57 | php artisan serv 58 | 59 | // on terminal 2 60 | php artisan websockets:serv 61 | ``` 62 | 63 | ### Frontend Installation 64 | 65 | - Clone FE repo [ssh or https] 66 | 67 | ``` 68 | git clone git@github.com:WailanTirajoh/CollaborApps.git 69 | ``` 70 | 71 | - Change directory to folder 72 | 73 | ``` 74 | cd collaborapps 75 | ``` 76 | 77 | - Install dependency / package 78 | 79 | ``` 80 | npm i 81 | ``` 82 | 83 | - Serv app 84 | 85 | ``` 86 | npm run dev 87 | ``` 88 | 89 | ### Login 90 | 91 | - user 1: 92 | 93 | ``` 94 | email: examplea@example.com 95 | password: password 96 | ``` 97 | 98 | - user 2: 99 | 100 | ``` 101 | email: exampleb@example.com 102 | password: password 103 | ``` 104 | -------------------------------------------------------------------------------- /assets/_animation.scss: -------------------------------------------------------------------------------- 1 | // Intro Opacity 2 | .intro { 3 | &-opacity { 4 | opacity: 0; 5 | -webkit-animation: 0.2s intro-opacity-animation ease-in-out 0.33333s; 6 | animation: 0.2s intro-opacity-animation ease-in-out 0.33333s; 7 | -webkit-animation-fill-mode: forwards; 8 | animation-fill-mode: forwards; 9 | -webkit-animation-delay: 0.1s; 10 | animation-delay: 0.1s; 11 | } 12 | 13 | @-webkit-keyframes intro-opacity-animation { 14 | 100% { 15 | opacity: 1; 16 | } 17 | } 18 | @keyframes intro-opacity-animation { 19 | 100% { 20 | opacity: 1; 21 | } 22 | } 23 | // End Intro Opacity 24 | 25 | // Intro Y 26 | &-y { 27 | position: relative; 28 | opacity: 0; 29 | transform: translateY(20px); 30 | -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s; 31 | animation: 0.4s intro-y-animation ease-in-out 0.33333s; 32 | -webkit-animation-fill-mode: forwards; 33 | animation-fill-mode: forwards; 34 | -webkit-animation-delay: 0.1s; 35 | animation-delay: 0.1s; 36 | } 37 | 38 | @-webkit-keyframes intro-y-animation { 39 | 100% { 40 | opacity: 1; 41 | } 42 | 100% { 43 | transform: translateY(0px); 44 | } 45 | } 46 | @keyframes intro-y-animation { 47 | 100% { 48 | opacity: 1; 49 | } 50 | 100% { 51 | transform: translateY(0px); 52 | } 53 | } 54 | // End Intro Y 55 | 56 | // Intro X 57 | &-x { 58 | position: relative; 59 | opacity: 0; 60 | transform: translateX(20px); 61 | -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s; 62 | animation: 0.4s intro-y-animation ease-in-out 0.33333s; 63 | -webkit-animation-fill-mode: forwards; 64 | animation-fill-mode: forwards; 65 | -webkit-animation-delay: 0.1s; 66 | animation-delay: 0.1s; 67 | } 68 | 69 | @-webkit-keyframes intro-x-animation { 70 | 100% { 71 | opacity: 1; 72 | } 73 | 100% { 74 | transform: translateX(0px); 75 | } 76 | } 77 | @keyframes intro-x-animation { 78 | 100% { 79 | opacity: 1; 80 | } 81 | 100% { 82 | transform: translateX(0px); 83 | } 84 | } 85 | // End Intro X 86 | } 87 | 88 | // Hover float animation 89 | .hover-float { 90 | transition: all 0.15s ease-in-out; 91 | cursor: pointer; 92 | } 93 | 94 | .hover-float:hover { 95 | transform: scale(1.2); 96 | z-index: 10; 97 | } 98 | // End hover flaot animation 99 | -------------------------------------------------------------------------------- /assets/_chatbox.scss: -------------------------------------------------------------------------------- 1 | .chat-box { 2 | transition: all 0.35s ease-in-out; 3 | width: 23.5vw; 4 | right: 1rem; 5 | bottom: 0; 6 | border-radius: 1rem 1rem 0rem 0rem; 7 | height: 90vh; 8 | transform: translateY(82.5vh); 9 | background-color: white; 10 | &.isPinned { 11 | transform: translateY(0vh); 12 | height: 500px; 13 | } 14 | 15 | .header { 16 | display: flex; 17 | align-items: center; 18 | height: 7.5vh; 19 | border-radius: 1rem 1rem 0rem 0rem; 20 | border-bottom: 2px solid beige; 21 | background-color: white; 22 | &:hover { 23 | background-color: ghostwhite; 24 | } 25 | } 26 | } 27 | 28 | @media only screen and (max-width: 767px) { 29 | .chat-app .chat { 30 | margin: 0; 31 | } 32 | .chat-app .chat-history { 33 | height: 300px; 34 | } 35 | } 36 | 37 | @media only screen and (min-width: 768px) and (max-width: 992px) { 38 | .chat-app .chat-history { 39 | height: 600px; 40 | } 41 | } 42 | 43 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 44 | .chat-app .chat-history { 45 | height: calc(100vh - 350px); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /assets/_comment.scss: -------------------------------------------------------------------------------- 1 | .left-border { 2 | &:before { 3 | content: ""; 4 | width: 0.15rem; 5 | background-color: $comment-background; 6 | height: 100%; 7 | position: absolute; 8 | top: -45px; 9 | left: -1.5rem; 10 | z-index: 0; 11 | } 12 | li.left-line { 13 | &:before { 14 | content: ""; 15 | width: 1.5rem; 16 | height: 1rem; 17 | position: absolute; 18 | top: 0px; 19 | left: -1.5rem; 20 | border-bottom-left-radius: 0.75rem; 21 | border-bottom: 0.15rem solid $comment-background; 22 | } 23 | } 24 | } 25 | .h-left-border { 26 | &:before { 27 | content: ""; 28 | width: 1.5rem; 29 | height: 4.5rem; 30 | position: absolute; 31 | top: -60px; 32 | left: -1.5rem; 33 | border-bottom-left-radius: 0.5rem; 34 | border-bottom: 0.15rem solid $comment-background; 35 | border-left: 0.15rem solid $comment-background; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /assets/_custom.scss: -------------------------------------------------------------------------------- 1 | .custom { 2 | &-shadow { 3 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 4 | &-box { 5 | box-shadow: 0 51px 54px rgb(0 0 0 / 5%), 6 | 0 21.3066px 21.0653px rgb(0 0 0 / 4%), 7 | 0 11.3915px 10.5568px rgb(0 0 0 / 3%), 8 | 0 6.38599px 5.52636px rgb(0 0 0 / 3%), 9 | 0 3.39155px 2.7104px rgb(0 0 0 / 2%), 0 1.4113px 1.027px rgb(0 0 0 / 2%); 10 | } 11 | } 12 | &-inner { 13 | &-shadow { 14 | box-shadow: inset 0px 0px 4px rgb(0 0 0 / 25%); 15 | } 16 | } 17 | &-border { 18 | &-right { 19 | border-right: 0.5px solid rgba(108, 117, 125, 0.25); 20 | } 21 | &-left { 22 | border-left: 0.5px solid rgba(108, 117, 125, 0.25); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/_dropdown-menu.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | min-width: 7rem; 3 | &.show { 4 | animation-name: slidenavAnimation; 5 | animation-duration: 0.3s; 6 | animation-iteration-count: 1; 7 | animation-timing-function: ease; 8 | animation-fill-mode: forwards; 9 | 10 | -webkit-animation-name: slidenavAnimation; 11 | -webkit-animation-duration: 0.3s; 12 | -webkit-animation-iteration-count: 1; 13 | -webkit-animation-timing-function: ease; 14 | -webkit-animation-fill-mode: forwards; 15 | 16 | -moz-animation-name: slidenavAnimation; 17 | -moz-animation-duration: 0.3s; 18 | -moz-animation-iteration-count: 1; 19 | -moz-animation-timing-function: ease; 20 | -moz-animation-fill-mode: forwards; 21 | } 22 | } 23 | .room { 24 | .user { 25 | .dropdown { 26 | &-toggle::after { 27 | display: unset; 28 | margin-left: unset; 29 | vertical-align: unset; 30 | content: unset; 31 | border-top: unset; 32 | border-right: unset; 33 | border-left: unset; 34 | } 35 | &-menu { 36 | z-index: 9; 37 | min-width: 2rem; 38 | transform: translate3d(10px, 30px, 0px) !important; 39 | } 40 | } 41 | } 42 | } 43 | 44 | @keyframes slidenavAnimation { 45 | from { 46 | opacity: 0; 47 | } 48 | to { 49 | opacity: 1; 50 | } 51 | } 52 | 53 | @-webkit-keyframes slidenavAnimation { 54 | from { 55 | opacity: 0; 56 | } 57 | to { 58 | opacity: 1; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /assets/_global.scss: -------------------------------------------------------------------------------- 1 | .bg { 2 | &-dark { 3 | &-gray { 4 | background-color: $dark-gray !important; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /assets/_icon.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | margin-right: 0.025rem; 3 | text-align: center; 4 | width: 1.6rem; 5 | } 6 | -------------------------------------------------------------------------------- /assets/_input.scss: -------------------------------------------------------------------------------- 1 | .input-file::-webkit-file-upload-button { 2 | color: $dark-gray; 3 | display: inline-block; 4 | background: white; 5 | border: 1px solid #dee2e6 !important; 6 | padding: 7px 15px; 7 | border-radius: 3px; 8 | white-space: nowrap; 9 | cursor: pointer; 10 | font-size: 10pt; 11 | } 12 | 13 | input[type='range'][orient='vertical'] { 14 | writing-mode: bt-lr; /* IE */ 15 | -webkit-appearance: slider-vertical; /* Chromium */ 16 | width: 8px; 17 | height: 175px; 18 | } 19 | 20 | .input-range { 21 | transition: all 0.35s ease-in-out; 22 | opacity: 1; 23 | &.hide { 24 | opacity: 0; 25 | } 26 | } 27 | 28 | input[type='range'] { 29 | -webkit-appearance: none; 30 | margin: 18px 0; 31 | width: 100%; 32 | } 33 | input[type='range']:focus { 34 | outline: none; 35 | } 36 | input[type='range']::-webkit-slider-runnable-track { 37 | width: 100%; 38 | height: 0.5rem; 39 | cursor: pointer; 40 | background: rgba(108, 117, 125, 0.25); 41 | border-radius: 0.15rem; 42 | } 43 | input[type='range']::-webkit-slider-thumb { 44 | height: 1.5rem; 45 | width: 0.75rem; 46 | margin-top: -0.5rem; 47 | background: #ffffff; 48 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 49 | cursor: pointer; 50 | -webkit-appearance: none; 51 | border-radius: 0.25rem; 52 | } 53 | // input[type='range']:focus::-webkit-slider-runnable-track { 54 | // background: rgba(108, 117, 125, 0.75); 55 | // } 56 | input[type='range']::-moz-range-track { 57 | width: 100%; 58 | height: 8.4px; 59 | cursor: pointer; 60 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 61 | background: rgba(108, 117, 125, 0.25); 62 | border-radius: 1.3px; 63 | border: 0.2px solid #010101; 64 | } 65 | input[type='range']::-moz-range-thumb { 66 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 67 | border: 1px solid #000000; 68 | height: 36px; 69 | width: 16px; 70 | border-radius: 3px; 71 | background: #ffffff; 72 | cursor: pointer; 73 | } 74 | input[type='range']::-ms-track { 75 | width: 100%; 76 | height: 8.4px; 77 | cursor: pointer; 78 | background: transparent; 79 | border-color: transparent; 80 | border-width: 16px 0; 81 | color: transparent; 82 | } 83 | input[type='range']::-ms-fill-lower { 84 | background: #2a6495; 85 | border: 0.2px solid #010101; 86 | border-radius: 2.6px; 87 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 88 | } 89 | input[type='range']::-ms-fill-upper { 90 | background: #3071a9; 91 | border: 0.2px solid #010101; 92 | border-radius: 2.6px; 93 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 94 | } 95 | input[type='range']::-ms-thumb { 96 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 97 | border: 1px solid #000000; 98 | height: 36px; 99 | width: 16px; 100 | border-radius: 3px; 101 | background: #ffffff; 102 | cursor: pointer; 103 | } 104 | input[type='range']:focus::-ms-fill-lower { 105 | background: #3071a9; 106 | } 107 | input[type='range']:focus::-ms-fill-upper { 108 | background: #367ebd; 109 | } 110 | -------------------------------------------------------------------------------- /assets/_navbar.scss: -------------------------------------------------------------------------------- 1 | .user-profile { 2 | padding-left: 0.5rem !important; 3 | border-radius: 0px 0rem 0rem 1rem; 4 | a { 5 | img { 6 | margin-right: 0.5rem; 7 | } 8 | &:hover { 9 | color: darkslategray; 10 | } 11 | text-decoration: none; 12 | display: flex; 13 | align-items: center; 14 | gap: 0.25rem; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /assets/_notification.scss: -------------------------------------------------------------------------------- 1 | .notification { 2 | ul { 3 | padding-top: 1rem; 4 | &.sidebar { 5 | list-style-type: none; 6 | padding-left: 0; 7 | li { 8 | background-color: white !important; 9 | padding: 1rem; 10 | margin-bottom: 0.5rem; 11 | border-radius: 0.5rem; 12 | a { 13 | text-decoration: none; 14 | color: inherit; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | 21 | .notification-detail { 22 | ul { 23 | list-style-type: none; 24 | li { 25 | display: flex; 26 | gap: 0.5rem; 27 | margin-bottom: 2rem; 28 | .user { 29 | &-pic { 30 | img { 31 | width: 3rem; 32 | height: 3rem; 33 | border-radius: 100%; 34 | object-fit: cover; 35 | } 36 | } 37 | &-name { 38 | margin-bottom: 0.5rem; 39 | padding-left: 1rem; 40 | } 41 | } 42 | .message { 43 | background-color: white; 44 | padding: 1rem; 45 | border-radius: 0.5rem; 46 | display: block; 47 | &::before { 48 | content: ''; 49 | left: -2rem; 50 | width: 2rem; 51 | height: 1.25rem; 52 | position: absolute; 53 | top: 3rem; 54 | border-bottom-left-radius: 0.5rem; 55 | border-bottom: 0.15rem solid #fff; 56 | border-left: 0.15rem solid #fff; 57 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 58 | } 59 | &::after { 60 | content: ''; 61 | left: -0.35rem; 62 | width: 2rem; 63 | height: 6.25rem; 64 | position: absolute; 65 | top: 4.25rem; 66 | border-bottom-left-radius: 5.5rem; 67 | border-bottom: 0.15rem solid #fff; 68 | border-left: 0.15rem solid #fff; 69 | box-shadow: 0 0.125rem 0rem rgb(0 0 0 / 5%) !important; 70 | } 71 | } 72 | &:last-child { 73 | .message { 74 | &::after { 75 | content: unset; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /assets/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 0.55rem; 3 | height: 0.75rem; 4 | &-track { 5 | padding: 0.25rem; 6 | // display: none; 7 | } 8 | &-thumb { 9 | background: #b3b3b3; 10 | border-radius: 10rem; 11 | // border: 0.125rem solid white; 12 | &:hover { 13 | background: #9d9d9d; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /assets/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .server { 2 | .nuxt-link-active { 3 | background-color: #e4e6e9 !important; 4 | } 5 | transition: all 0.35s ease-in-out; 6 | &.hide { 7 | transform: translateX(-5rem); 8 | } 9 | // max-width: 5rem; 10 | .dropdown-toggle::after { 11 | display: unset; 12 | margin-left: unset; 13 | vertical-align: unset; 14 | content: unset; 15 | border-top: unset; 16 | border-right: unset; 17 | border-left: unset; 18 | } 19 | .dropdown-menu { 20 | &.show { 21 | transform: translate3d(120px, 0px, 0px) !important; 22 | border: unset; 23 | } 24 | } 25 | 26 | @keyframes slidenavAnimation { 27 | from { 28 | opacity: 0; 29 | } 30 | to { 31 | opacity: 1; 32 | } 33 | } 34 | 35 | @-webkit-keyframes slidenavAnimation { 36 | from { 37 | opacity: 0; 38 | } 39 | to { 40 | opacity: 1; 41 | } 42 | } 43 | } 44 | 45 | .channel { 46 | transition: all 0.35s ease-in-out; 47 | // max-width: 18rem; 48 | 49 | ul { 50 | list-style: none; 51 | list-style-type: none; 52 | position: relative; 53 | } 54 | .side-list { 55 | overflow: auto; 56 | // overflow: hidden; 57 | // &:hover { 58 | // overflow-y: auto; 59 | // } 60 | position: relative; 61 | padding-inline-start: 2px !important; 62 | .side-parent { 63 | .parent-2 { 64 | &, 65 | ul { 66 | list-style: none; 67 | list-style-type: none; 68 | position: relative; 69 | } 70 | } 71 | padding-left: 0px; 72 | position: relative; 73 | a { 74 | &.nuxt-link-active { 75 | .side-link { 76 | background-color: #e4e6e9; 77 | &:hover { 78 | background-color: #e4e6e9; 79 | } 80 | } 81 | } 82 | color: rgba(0, 0, 0, 0.85); 83 | text-decoration: none; 84 | position: relative; 85 | .side-link { 86 | background-color: white; 87 | transition: all 0.05s ease-in-out; 88 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 89 | padding: 0.25rem; 90 | padding-left: 0.15rem; 91 | margin-bottom: 0.25rem; 92 | border-radius: 0.2rem; 93 | &:hover { 94 | background-color: #e4e6e9 !important; 95 | } 96 | .side-icon { 97 | margin-right: 0.05rem; 98 | text-align: center; 99 | width: 1.6rem; 100 | } 101 | &.bg { 102 | &-dark { 103 | &-gray { 104 | background-color: $dark-gray !important; 105 | } 106 | } 107 | } 108 | } 109 | } 110 | } 111 | 112 | .left-border { 113 | &:before { 114 | content: ''; 115 | width: 0.25rem; 116 | background-color: $line-background; 117 | height: 100%; 118 | position: absolute; 119 | top: -45px; 120 | left: -1.5rem; 121 | z-index: 0; 122 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 123 | } 124 | li.left-line { 125 | &:before { 126 | content: ''; 127 | width: 1.5rem; 128 | height: 1rem; 129 | position: absolute; 130 | top: 0px; 131 | left: -1.5rem; 132 | border-bottom-left-radius: 0.75rem; 133 | border-bottom: 0.15rem solid $line-background; 134 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 135 | } 136 | } 137 | } 138 | .h-left-border { 139 | &:before { 140 | content: ''; 141 | left: -1.15rem; 142 | width: 1.15rem; 143 | height: 1.25rem; 144 | position: absolute; 145 | top: -0.25rem; 146 | border-bottom-left-radius: 0.5rem; 147 | border-bottom: 0.15rem solid $line-background; 148 | border-left: 0.15rem solid $line-background; 149 | box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; 150 | } 151 | } 152 | 153 | .v-left-border { 154 | &:before { 155 | content: ''; 156 | width: 1.5rem; 157 | height: 100%; 158 | position: absolute; 159 | top: -0.725rem; 160 | left: 0.85rem; 161 | border-bottom-left-radius: 0.5rem; 162 | border-bottom: 0.15rem solid $line-background; 163 | border-left: 0.15rem solid $line-background; 164 | box-shadow: 0 0.1rem 0rem rgb(0 0 0 / 8%) !important; 165 | } 166 | } 167 | } 168 | } 169 | 170 | .poeples { 171 | max-width: 5rem; 172 | } 173 | -------------------------------------------------------------------------------- /assets/_style.scss: -------------------------------------------------------------------------------- 1 | .font-mono { 2 | font-family: $font-family; 3 | } 4 | 5 | .bg-gray { 6 | &-400 { 7 | background-color: $gray-400; 8 | } 9 | &-200 { 10 | background-color: $gray-200; 11 | } 12 | } 13 | 14 | .bg-button { 15 | background-color: $main-color !important; 16 | } 17 | 18 | .text-sm { 19 | .form-control { 20 | font-size: small !important; 21 | border-radius: 20px; 22 | border: none; 23 | background-color: $light-gray; 24 | } 25 | } 26 | 27 | .fw { 28 | &-medium { 29 | font-weight: 600; 30 | } 31 | } 32 | 33 | .rounded { 34 | &-3xl { 35 | border-radius: 15px; 36 | } 37 | } 38 | 39 | .bg-gray { 40 | background-color: #f0f2f5; 41 | } 42 | .bg-light-gray { 43 | background-color: $light-gray; 44 | } 45 | 46 | .h-50-px { 47 | height: 50px; 48 | } 49 | 50 | .max-h-250-px { 51 | max-height: 250px; 52 | } 53 | 54 | .no-select { 55 | -webkit-touch-callout: none; /* iOS Safari */ 56 | -webkit-user-select: none; /* Safari */ 57 | -khtml-user-select: none; /* Konqueror HTML */ 58 | -moz-user-select: none; /* Old versions of Firefox */ 59 | -ms-user-select: none; /* Internet Explorer/Edge */ 60 | user-select: none; /* Non-prefixed version, currently 61 | supported by Chrome, Edge, Opera and Firefox */ 62 | } 63 | 64 | body { 65 | // overflow: overlay; 66 | background-color: #f0f2f5; 67 | } 68 | 69 | .light-black { 70 | color: rgba(0, 0, 0, 0.55); 71 | } 72 | 73 | .color-gray { 74 | color: gray; 75 | } 76 | 77 | .text-decoration-none { 78 | text-decoration: none; 79 | } 80 | .cursor-pointer { 81 | cursor: pointer; 82 | } 83 | .bg-tan { 84 | background-color: #dfbe99; 85 | } 86 | 87 | .object-fit { 88 | &-cover { 89 | object-fit: cover; 90 | } 91 | &-contain { 92 | object-fit: contain; 93 | } 94 | } 95 | 96 | .w { 97 | &-3r { 98 | width: 3.5rem; 99 | } 100 | &-2r { 101 | width: 2rem; 102 | } 103 | &-1r { 104 | width: 1rem; 105 | } 106 | } 107 | 108 | .h { 109 | &-3r { 110 | height: 3.5rem; 111 | } 112 | &-2r { 113 | height: 2rem; 114 | } 115 | &-1r { 116 | height: 1rem; 117 | } 118 | } 119 | 120 | .text { 121 | &-x { 122 | &s { 123 | font-size: x-small; 124 | } 125 | } 126 | &-sm { 127 | font-size: small; 128 | } 129 | &-transform { 130 | &-capitalize { 131 | text-transform: capitalize; 132 | } 133 | } 134 | } 135 | 136 | // Dropdown 137 | .dropdown-toggle::after { 138 | display: inline-block; 139 | margin-left: 0.7rem; 140 | vertical-align: 0.255em; 141 | content: ''; 142 | border-top: 0.3em solid; 143 | border-right: 0.3em solid transparent; 144 | border-bottom: 0; 145 | border-left: 0.3em solid transparent; 146 | } 147 | // End of dropdown 148 | 149 | .show-desktop { 150 | display: none; 151 | } 152 | 153 | @media (min-width: 992px) { 154 | .hide-desktop { 155 | display: none; 156 | } 157 | .show-desktop { 158 | display: block; 159 | } 160 | } 161 | 162 | @media (min-width: 1200px) { 163 | .container-xl, 164 | .container-lg, 165 | .container-md, 166 | .container-sm, 167 | .container { 168 | max-width: 1300px; 169 | } 170 | } 171 | 172 | @media (min-width: 1400px) { 173 | .container-xxl, 174 | .container-xl, 175 | .container-lg, 176 | .container-md, 177 | .container-sm, 178 | .container { 179 | max-width: 1450px; 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /assets/_toastr.scss: -------------------------------------------------------------------------------- 1 | .toasted-container { 2 | &.top { 3 | &-center { 4 | left: 50% !important; 5 | top: 0.15rem !important; 6 | } 7 | &-left { 8 | left: 10px !important; 9 | top: 0.15rem !important; 10 | } 11 | &-right { 12 | right: 20px !important; 13 | top: 0.15rem !important; 14 | } 15 | } 16 | } 17 | 18 | .toasted .primary.success, 19 | .toasted.toasted-primary.success { 20 | background: white !important; 21 | border: gray; 22 | color: rgba(0, 0, 0, 0.85); 23 | font-weight: 500; 24 | } 25 | -------------------------------------------------------------------------------- /assets/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $primary-color: #f2f2f2; 3 | $blizzard-blue-color: #c4f5fc; 4 | 5 | $gray-400: #f2f2f2; 6 | $gray-200: #f5f7fa; 7 | 8 | // Waves color 9 | $waves-color: #012a35; 10 | 11 | $font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, sans-serif, 12 | Apple Color Emoji, Segoe UI Emoji; 13 | $line-color: #30362f; 14 | $dark-gray: #505050; 15 | 16 | $light-gray: #f0f2f5; 17 | $comment-background: white; 18 | $main-color: #3f0e40; 19 | $line-background: #fff; 20 | -------------------------------------------------------------------------------- /assets/bootstrap/main.scss: -------------------------------------------------------------------------------- 1 | // $primary: rgb(240, 238, 238); 2 | 3 | @import "~bootstrap/scss/bootstrap"; 4 | -------------------------------------------------------------------------------- /assets/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'style'; 3 | @import 'sidebar'; 4 | @import 'chatbox'; 5 | @import 'global'; 6 | @import 'scrollbar'; 7 | @import 'navbar'; 8 | @import 'comment'; 9 | @import 'animation'; 10 | @import 'toastr'; 11 | @import 'input'; 12 | @import 'dropdown-menu'; 13 | @import 'custom'; 14 | @import 'notification'; 15 | -------------------------------------------------------------------------------- /collaborapps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WailanTirajoh/CollaborApps/2d4dbe4afd42f35cece1add0672ac24936eaa2ca/collaborapps.png -------------------------------------------------------------------------------- /components/Chat/Content.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 80 | 81 | 158 | -------------------------------------------------------------------------------- /components/Chat/Header.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /components/Default/Loading/Dot.vue: -------------------------------------------------------------------------------- 1 | 129 | 130 | 133 | -------------------------------------------------------------------------------- /components/Default/Loading/Eater.vue: -------------------------------------------------------------------------------- 1 | 101 | -------------------------------------------------------------------------------- /components/Default/Loading/Index.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | -------------------------------------------------------------------------------- /components/Default/Loading/Search.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 48 | -------------------------------------------------------------------------------- /components/Default/Modal.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 39 | -------------------------------------------------------------------------------- /components/Form/Input.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 56 | -------------------------------------------------------------------------------- /components/Form/SubmitButton.vue: -------------------------------------------------------------------------------- 1 | 20 | 27 | 38 | -------------------------------------------------------------------------------- /components/Form/TextArea.vue: -------------------------------------------------------------------------------- 1 |