Adding correct SCSS file integration with Svelte

This commit is contained in:
David Négrier 2021-05-17 14:30:54 +02:00
parent 1885ea42a4
commit 5cb58d98a0
10 changed files with 5039 additions and 74 deletions

View File

@ -4,7 +4,7 @@
position: fixed; position: fixed;
transition: transform 0.5s; transition: transform 0.5s;
background-color: white; background-color: white;
&.loading { &.loading {
background-color: gray; background-color: gray;
} }
@ -15,7 +15,7 @@
height: 100%; height: 100%;
} }
} }
aside { aside {
background: gray; background: gray;
align-items: center; align-items: center;
@ -32,7 +32,7 @@
position: absolute; position: absolute;
background: none; background: none;
border: none; border: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
img { img {
height: 25px; height: 25px;

View File

@ -1,9 +1,9 @@
*{ *{
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
cursor: url('/resources/logos/cursor_normal.png'), auto; cursor: url('../logos/cursor_normal.png'), auto;
} }
* a, button, select{ * a, button, select{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
body{ body{
overflow: hidden; overflow: hidden;
@ -39,7 +39,7 @@ body .message-info.warning{
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
background-color: #00000099; background-color: #00000099;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.video-container i{ .video-container i{
position: absolute; position: absolute;
@ -75,7 +75,7 @@ body .message-info.warning{
.video-container button.report{ .video-container button.report{
display: block; display: block;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
background: none; background: none;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border: none; border: none;
@ -108,7 +108,7 @@ body .message-info.warning{
left: 5px; left: 5px;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
@ -118,7 +118,7 @@ body .message-info.warning{
left: 36px; left: 36px;
color: white; color: white;
font-size: 16px; font-size: 16px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.video-container img.active { .video-container img.active {
display: block !important; display: block !important;
@ -126,7 +126,7 @@ body .message-info.warning{
.video-container video{ .video-container video{
height: 100%; height: 100%;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.video-container video:focus{ .video-container video:focus{
@ -206,7 +206,7 @@ video#myCamVideo{
} }
/*btn animation*/ /*btn animation*/
.btn-cam-action div{ .btn-cam-action div{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
/*position: absolute;*/ /*position: absolute;*/
border: solid 0px black; border: solid 0px black;
width: 44px; width: 44px;
@ -260,7 +260,7 @@ video#myCamVideo{
top: calc(48px - 37px); top: calc(48px - 37px);
left: calc(48px - 41px); left: calc(48px - 41px);
position: relative; position: relative;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
/* Spinner */ /* Spinner */
@ -572,7 +572,7 @@ input[type=range]:focus::-ms-fill-upper {
margin: 2%; margin: 2%;
flex-basis: 96%; flex-basis: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
pointer-events: auto; pointer-events: auto;
/*flex-shrink: 2;*/ /*flex-shrink: 2;*/
} }
@ -590,7 +590,7 @@ input[type=range]:focus::-ms-fill-upper {
.sidebar > div { .sidebar > div {
margin: 2%; margin: 2%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;
pointer-events: auto; pointer-events: auto;
} }
@ -600,7 +600,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
.sidebar > div video { .sidebar > div video {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
/* Let's make sure videos are vertically centered if they need to be cropped */ /* Let's make sure videos are vertically centered if they need to be cropped */
@ -625,7 +625,7 @@ input[type=range]:focus::-ms-fill-upper {
margin: 1%; margin: 1%;
max-height: 96%; max-height: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.chat-mode > div:hover { .chat-mode > div:hover {
@ -715,7 +715,7 @@ input[type=range]:focus::-ms-fill-upper {
margin-top: 6px; margin-top: 6px;
width: 30px; width: 30px;
height: 30px; height: 30px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
padding: 0 5px; padding: 0 5px;
transition: all .5s ease; transition: all .5s ease;
transform: rotateY(0); transform: rotateY(0);
@ -739,7 +739,7 @@ input[type=range]:focus::-ms-fill-upper {
.main-console div.console:hover, .main-console div.console:hover,
.message-container div.clear:hover { .message-container div.clear:hover {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
top: calc(100% + 5px); top: calc(100% + 5px);
transform: scale(1.2) translateY(3px); transform: scale(1.2) translateY(3px);
} }
@ -772,7 +772,7 @@ input[type=range]:focus::-ms-fill-upper {
transition: all .2s ease; transition: all .2s ease;
} }
.main-console .btn-action .btn:hover{ .main-console .btn-action .btn:hover{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
background-color: #ffda01; background-color: #ffda01;
color: black; color: black;
border: 1px solid black; border: 1px solid black;
@ -787,7 +787,7 @@ input[type=range]:focus::-ms-fill-upper {
.main-console .menu span { .main-console .menu span {
margin: 20px; margin: 20px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.main-console .menu span.active { .main-console .menu span.active {
@ -821,10 +821,10 @@ input[type=range]:focus::-ms-fill-upper {
} }
.main-console section div.upload label img{ .main-console section div.upload label img{
height: 150px; height: 150px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.main-console section div.upload label img{ .main-console section div.upload label img{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
@ -917,7 +917,7 @@ div.modal-report-user{
right: 0; right: 0;
left: auto; left: auto;
top: 0; top: 0;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
width: 15px; width: 15px;
height: 15px; height: 15px;
margin: 10px; margin: 10px;
@ -936,7 +936,7 @@ div.modal-report-user{
transition: all .2s ease; transition: all .2s ease;
} }
.modal-report-user button:hover{ .modal-report-user button:hover{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
background-color: #ffda01; background-color: #ffda01;
color: black; color: black;
border: 1px solid black; border: 1px solid black;
@ -979,7 +979,7 @@ div.modal-report-user{
} }
.discussion .active-btn{ .discussion .active-btn{
display: none; display: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: #2d2d2dba; background-color: #2d2d2dba;
@ -1008,7 +1008,7 @@ div.modal-report-user{
right: 10px; right: 10px;
background: none; background: none;
border: none; border: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.discussion .close-btn img{ .discussion .close-btn img{
height: 15px; height: 15px;
@ -1033,7 +1033,7 @@ div.modal-report-user{
background-color: #ffffff69; background-color: #ffffff69;
padding: 5px; padding: 5px;
border-radius: 15px; border-radius: 15px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
} }
.discussion .participants .participant:hover{ .discussion .participants .participant:hover{
@ -1066,7 +1066,7 @@ div.modal-report-user{
} }
.discussion .participants .participant button.report-btn{ .discussion .participants .participant button.report-btn{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
position: absolute; position: absolute;
background-color: #2d2d2dba; background-color: #2d2d2dba;
right: 34px; right: 34px;
@ -1176,7 +1176,7 @@ div.action.danger{
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
div.action p.action-body{ div.action p.action-body{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('../logos/cursor_pointer.png'), pointer;
padding: 10px; padding: 10px;
background-color: #2d2d2dba; background-color: #2d2d2dba;
color: #fff; color: #fff;

View File

@ -7,11 +7,12 @@
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"@types/google-protobuf": "^3.7.3", "@types/google-protobuf": "^3.7.3",
"@types/jasmine": "^3.5.10", "@types/jasmine": "^3.5.10",
"@types/mini-css-extract-plugin": "^1.4.3",
"@types/node": "^15.3.0",
"@types/quill": "^1.3.7", "@types/quill": "^1.3.7",
"@types/webpack-dev-server": "^3.11.4", "@types/webpack-dev-server": "^3.11.4",
"@typescript-eslint/eslint-plugin": "^4.23.0", "@typescript-eslint/eslint-plugin": "^4.23.0",
"@typescript-eslint/parser": "^4.23.0", "@typescript-eslint/parser": "^4.23.0",
"autoprefixer": "^10.2.5",
"css-loader": "^5.2.4", "css-loader": "^5.2.4",
"eslint": "^7.26.0", "eslint": "^7.26.0",
"html-webpack-plugin": "^5.3.1", "html-webpack-plugin": "^5.3.1",
@ -25,6 +26,7 @@
"svelte-preprocess": "^4.7.3", "svelte-preprocess": "^4.7.3",
"ts-loader": "^9.1.2", "ts-loader": "^9.1.2",
"ts-node": "^9.1.1", "ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.4", "typescript": "^4.2.4",
"webpack": "^5.37.0", "webpack": "^5.37.0",
"webpack-cli": "^4.7.0", "webpack-cli": "^4.7.0",
@ -45,9 +47,9 @@
"socket.io-client": "^2.3.0" "socket.io-client": "^2.3.0"
}, },
"scripts": { "scripts": {
"start": "webpack serve --open", "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
"build": "NODE_ENV=production webpack", "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
"test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json", "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
"lint": "node_modules/.bin/eslint src/ . --ext .ts", "lint": "node_modules/.bin/eslint src/ . --ext .ts",
"fix": "node_modules/.bin/eslint --fix src/ . --ext .ts" "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
} }

View File

@ -10,17 +10,17 @@
</section> </section>
</main> </main>
<style> <style lang="scss">
.menuIcon button { .menuIcon button {
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding: 2px 8px; padding: 2px 8px;
} img {
.menuIcon button img{ width: 14px;
width: 14px; padding-top: 0;
padding-top: 0; /*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/ }
} }
.menuIcon section { .menuIcon section {
margin: 10px; margin: 10px;

View File

@ -1,22 +0,0 @@
import { derived, writable, Writable } from "svelte/store";
class RequestedConstraintsStore {
constructor(
public camera: Writable<boolean> = writable(false),
public microphone: Writable<boolean> = writable(false),
) { }
get fullname() {
// Use derived to access writable values and export as readonly
return derived(
[this.camera, this.microphone],
([$camera, $microphone]) => {
console.log("cam or mic", $camera || $microphone)
return $camera || $microphone;
}
)
}
}
// Export a singleton
export const myFormStore = new MyFormStore();

View File

@ -0,0 +1,8 @@
{
"extends": "./tsconfig.json",
"include": ["./src/**/*", "./tests/**/*"],
"compilerOptions": {
"module": "CommonJS",
"lib": ["es2015","dom"],
}
}

View File

@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true
}
}

View File

@ -1,10 +1,13 @@
{ {
// "include": ["src/**/*", "webpack.config.ts"],
"extends": "@tsconfig/svelte/tsconfig.json", "extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./dist/", "outDir": "./dist/",
"sourceMap": true, "sourceMap": true,
"moduleResolution": "node", "moduleResolution": "node",
"module": "CommonJS", //"module": "CommonJS",
"module": "ESNext",
"target": "ES2017", "target": "ES2017",
"declaration": false, "declaration": false,
"downlevelIteration": true, "downlevelIteration": true,

View File

@ -1,13 +1,21 @@
import type {Configuration} from "webpack"; import type {Configuration} from "webpack";
import type WebpackDevServer from "webpack-dev-server"; import type WebpackDevServer from "webpack-dev-server";
import SveltePreprocess from 'svelte-preprocess'; //import SveltePreprocess from 'svelte-preprocess';
import Autoprefixer from 'autoprefixer'; //import Autoprefixer from 'autoprefixer';
//import autoPreprocess from 'svelte-preprocess';
const path = require('path'); import path from 'path';
const webpack = require('webpack'); import webpack from 'webpack';
const HtmlWebpackPlugin = require('html-webpack-plugin'); import HtmlWebpackPlugin from 'html-webpack-plugin';
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin") import sveltePreprocess from 'svelte-preprocess';
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
//const path = require('path');
//const webpack = require('webpack');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const sveltePreprocess = require('svelte-preprocess');
const mode = process.env.NODE_ENV ?? 'development'; const mode = process.env.NODE_ENV ?? 'development';
const isProduction = mode === 'production'; const isProduction = mode === 'production';
@ -41,7 +49,27 @@ module.exports = {
}, },
{ {
test: /\.scss$/, test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'], use: [
MiniCssExtractPlugin.loader, {
loader: 'css-loader',
/*options: {
url: false,
sourceMap: true
}*/
}, 'sass-loader'],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
/*options: {
url: false,
sourceMap: true
}*/
}
]
}, },
{ {
test: /\.(html|svelte)$/, test: /\.(html|svelte)$/,
@ -60,13 +88,19 @@ module.exports = {
noPreserveState: false, noPreserveState: false,
optimistic: true, optimistic: true,
}, },
//preprocess: autoPreprocess({}),
preprocess: sveltePreprocess({
scss: true,
sass: true,
})
// FIXME: SveltePreprocess does not work here // FIXME: SveltePreprocess does not work here
/*preprocess: SveltePreprocess({ /*preprocess: SveltePreprocess({
scss: true, scss: true,
sass: true, sass: true,
postcss: { postcss: {
plugins: [ plugins: [
Autoprefixer //Autoprefixer
] ]
} }
})*/ })*/
@ -82,7 +116,10 @@ module.exports = {
fullySpecified: false fullySpecified: false
} }
}, },
{
test: /\.(ttf|eot|svg|png|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
type: 'asset/resource'
}
], ],
}, },
resolve: { resolve: {
@ -105,7 +142,8 @@ module.exports = {
require('webpack-require-http') require('webpack-require-http')
],*/ ],*/
plugins: [ plugins: [
new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}), new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
new HtmlWebpackPlugin( new HtmlWebpackPlugin(
{ {
template: './dist/index.tmpl.html.tmp', template: './dist/index.tmpl.html.tmp',
@ -150,7 +188,7 @@ module.exports = {
modules: false, modules: false,
assets: true, assets: true,
entrypoints: false, entrypoints: false,
errorDetails: false errorDetails: false,
} }
} as Configuration & WebpackDevServer.Configuration; } as Configuration & WebpackDevServer.Configuration;

4929
front/yarn.lock Normal file

File diff suppressed because it is too large Load Diff