svelte architecture separation of global css and layouts and websockets init
This commit is contained in:
simplonco
@@ -28,4 +28,5 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
|
||||
/ auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::after{content:"";position:absolute;top:calc(50% - 6px);left:0px;width:12px;height:12px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back {grid-area:back}.grid_box.svelte-1fj8iha .user {grid-area:user}.grid_box.svelte-1fj8iha .close {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back user close ' auto
|
||||
' room_name room_name room_name ' auto
|
||||
' panel_user panel_user panel_user ' 1fr
|
||||
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}
|
||||
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm{display:flex;position:fixed;bottom:20px;right:20px;padding:0px;width:auto;height:auto;border:1px solid black}.chat_box.svelte-auy6qm *{-ms-overflow-style:none;scrollbar-width:none}.chat_box.svelte-auy6qm *::-webkit-scrollbar{display:none}.chat_box.svelte-auy6qm .grid_box{display:grid;margin:5px;gap:5px;width:300px;height:400px}.chat_box.svelte-auy6qm .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}.chat_box.svelte-auy6qm .grid_box p{padding:10px;font-size:15px}.chat_box.svelte-auy6qm .panel{overflow-y:scroll}.chat_box.svelte-auy6qm .panel > *{margin-top:10px;margin-bottom:10px}.chat_box.svelte-auy6qm .__show_if_only_child{display:none}.chat_box.svelte-auy6qm .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__center{margin-left:auto;margin-right:auto}.chat_box.svelte-auy6qm .__border_top{border-top:1px solid black}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_show{display:flex}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block,.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block *{pointer-events:none;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__to_show{display:none}.grid_box.svelte-fc4a40 .chat{grid-area:chat}.grid_box.svelte-fc4a40{gap:0px;grid:' chat ' auto
|
||||
/ auto }.chat_box.close .grid_box.svelte-fc4a40{margin:0px;width:auto;height:auto}.chat_box.svelte-auy6qm{display:flex;position:fixed;bottom:20px;right:20px;padding:0px;width:auto;height:auto;border:1px solid black}.chat_box.svelte-auy6qm *{-ms-overflow-style:none;scrollbar-width:none}.chat_box.svelte-auy6qm *::-webkit-scrollbar{display:none}.chat_box.svelte-auy6qm .grid_box{display:grid;margin:5px;gap:5px;width:300px;height:400px}.chat_box.svelte-auy6qm .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}.chat_box.svelte-auy6qm .grid_box p{padding:10px;font-size:15px}.chat_box.svelte-auy6qm .panel{overflow-y:scroll}.chat_box.svelte-auy6qm .panel > *{margin-top:10px;margin-bottom:10px}.chat_box.svelte-auy6qm .__show_if_only_child{display:none}.chat_box.svelte-auy6qm .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__center{margin-left:auto;margin-right:auto}.chat_box.svelte-auy6qm .__border_top{border-top:1px solid black}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_show{display:flex}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block,.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block *{pointer-events:none;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__to_show{display:none}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,19 +1,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Debug from './tmp_debug.svelte';
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
|
||||
import HomeLayout from './Layout_home.svelte';
|
||||
import RoomLayout from './Layout_room.svelte';
|
||||
import NewLayout from './Layout_new.svelte';
|
||||
import SettingsLayout from './Layout_settings.svelte';
|
||||
import RoomsetLayout from './Layout_room_set.svelte';
|
||||
import ProtectedLayout from './Layout_protected.svelte';
|
||||
import CreateLayout from './Layout_create.svelte';
|
||||
import MuteLayout from './Layout_mute.svelte';
|
||||
import UserLayout from './Layout_user.svelte';
|
||||
import Layouts from './Chat_layouts.svelte';
|
||||
export let color = "transparent";
|
||||
|
||||
/* web sockets with socket.io
|
||||
*/
|
||||
@@ -61,207 +50,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
/* global variables
|
||||
*/
|
||||
export let color = "transparent";
|
||||
let room = "";
|
||||
let admin = false;
|
||||
let layout = "close";
|
||||
let layouts = ["home", "home"];
|
||||
|
||||
/* hold previous version of layout, to go back
|
||||
*/
|
||||
function set_layouts(layout)
|
||||
{
|
||||
if (layout === "close")
|
||||
return;
|
||||
if (layout === layouts[0])
|
||||
return;
|
||||
if (layout === layouts[1])
|
||||
layouts = [layout, "home"];
|
||||
else
|
||||
layouts = [layout, layouts[0]];
|
||||
}
|
||||
$: set_layouts(layout);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<Layouts color={color} />
|
||||
|
||||
{#if layout === "home"}
|
||||
<HomeLayout bind:layout />
|
||||
|
||||
{:else if layout === "room"}
|
||||
<RoomLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "new"}
|
||||
<NewLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "settings"}
|
||||
<SettingsLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "room_set"}
|
||||
<RoomsetLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "protected"}
|
||||
<ProtectedLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "create"}
|
||||
<CreateLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "mute"}
|
||||
<MuteLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "user"}
|
||||
<UserLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else}
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout={layouts[0]} my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TMP DEBUG -->
|
||||
<Debug bind:layout />
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* style if chat_box is closed
|
||||
*/
|
||||
.chat {grid-area: chat;}
|
||||
.chat_box.close .grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
.chat_box.close {
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block),
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
|
||||
pointer-events: none;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
export let color;
|
||||
export let layout;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 5px;
|
||||
gap: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block),
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
|
||||
pointer-events: none;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
|
||||
import Debug from './tmp_debug.svelte';
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
import ChatBox from './Chat_box_css.svelte';
|
||||
|
||||
import CloseLayout from './Layout_close.svelte';
|
||||
import HomeLayout from './Layout_home.svelte';
|
||||
import RoomLayout from './Layout_room.svelte';
|
||||
import NewLayout from './Layout_new.svelte';
|
||||
@@ -15,55 +16,11 @@
|
||||
import MuteLayout from './Layout_mute.svelte';
|
||||
import UserLayout from './Layout_user.svelte';
|
||||
|
||||
/* web sockets with socket.io
|
||||
*/
|
||||
import { onMount } from 'svelte';
|
||||
import io from 'socket.io-client';
|
||||
const socket = io('http://transcendance:8080', {
|
||||
path: '/chat/socket.io'
|
||||
});
|
||||
onMount(async => {
|
||||
socket.on('connect', function(){
|
||||
console.log("socket.io connected");
|
||||
});
|
||||
socket.on('disconnect', function(){
|
||||
console.log("socket.io disconnected");
|
||||
});
|
||||
socket.on('connect_error', function(){
|
||||
console.log("socket.io connect_error");
|
||||
});
|
||||
socket.on('connect_timeout', function(){
|
||||
console.log("socket.io connect_timeout");
|
||||
});
|
||||
socket.on('error', function(){
|
||||
console.log("socket.io error");
|
||||
});
|
||||
socket.on('reconnect', function(){
|
||||
console.log("socket.io reconnect");
|
||||
});
|
||||
socket.on('reconnect_attempt', function(){
|
||||
console.log("socket.io reconnect_attempt");
|
||||
});
|
||||
socket.on('reconnecting', function(){
|
||||
console.log("socket.io reconnecting");
|
||||
});
|
||||
socket.on('reconnect_error', function(){
|
||||
console.log("socket.io reconnect_error");
|
||||
});
|
||||
socket.on('reconnect_failed', function(){
|
||||
console.log("socket.io reconnect_failed");
|
||||
});
|
||||
socket.on('ping', function(){
|
||||
console.log("socket.io ping");
|
||||
});
|
||||
socket.on('pong', function(){
|
||||
console.log("socket.io pong");
|
||||
});
|
||||
});
|
||||
import Button from './Chat_button.svelte';
|
||||
|
||||
/* global variables
|
||||
*/
|
||||
export let color = "transparent";
|
||||
export let color;
|
||||
let room = "";
|
||||
let admin = false;
|
||||
let layout = "close";
|
||||
@@ -86,11 +43,14 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<ChatBox layout={layout} color={color}>
|
||||
|
||||
{#if layout === "home"}
|
||||
<HomeLayout bind:layout />
|
||||
|
||||
{:else if layout === "close"}
|
||||
<CloseLayout bind:layout />
|
||||
|
||||
{:else if layout === "room"}
|
||||
<RoomLayout bind:layout back={layouts[1]} />
|
||||
|
||||
@@ -115,153 +75,12 @@
|
||||
{:else if layout === "user"}
|
||||
<UserLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else}
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout={layouts[0]} my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</ChatBox>
|
||||
|
||||
<!-- TMP DEBUG -->
|
||||
<Debug bind:layout />
|
||||
<Debug bind:layout bind:layouts />
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* style if chat_box is closed
|
||||
*/
|
||||
.chat {grid-area: chat;}
|
||||
.chat_box.close .grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
.chat_box.close {
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block),
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
|
||||
pointer-events: none;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
|
||||
<script>
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
export let layout;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout="home" my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* layout "close"
|
||||
*/
|
||||
.grid_box :global(.chat) {grid-area: chat;}
|
||||
.grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
:global(.chat_box.close) .grid_box {
|
||||
margin: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block),
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
|
||||
pointer-events: none;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script>
|
||||
export let layout;
|
||||
|
||||
export let layout = "";
|
||||
export let layouts = [];
|
||||
|
||||
</script>
|
||||
|
||||
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
|
||||
|
||||
Reference in New Issue
Block a user