back btn ok

This commit is contained in:
simplonco
2022-12-25 17:13:29 +01:00
parent f43bfbac46
commit d95d8a4ae5
6 changed files with 39 additions and 37 deletions

View File

@@ -10,7 +10,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1njtw54.svelte-1njtw54{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1njtw54 .grid_box.svelte-1njtw54{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1njtw54.svelte-1njtw54{padding:0px;width:auto;height:auto}#chat_box.svelte-1njtw54 .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1njtw54 .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1njtw54 .chat_panel{overflow-y:scroll}#chat_box.svelte-1njtw54 .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1njtw54 .__show_if_only_child{display:none}#chat_box.svelte-1njtw54 .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-16qwzsm .settings {grid-area:settings}.grid_box.svelte-16qwzsm .close {grid-area:close}.grid_box.svelte-16qwzsm .new {grid-area:new}.grid_box.svelte-16qwzsm .panel_home{grid-area:panel_home}.grid_box.svelte-16qwzsm.svelte-16qwzsm{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}.grid_box.svelte-1d2ekny .back {grid-area:back}.grid_box.svelte-1d2ekny .room_name {grid-area:room_name}.grid_box.svelte-1d2ekny .close {grid-area:close}.grid_box.svelte-1d2ekny .panel_msg {grid-area:panel_msg}.grid_box.svelte-1d2ekny .send {grid-area:send}.grid_box.svelte-1d2ekny .panel_write {grid-area:panel_write}.grid_box.svelte-1d2ekny{grid:' back room_name room_name close ' auto
/ auto 1fr auto }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}.grid_box.svelte-10u2nsg .back {grid-area:back}.grid_box.svelte-10u2nsg .room_name {grid-area:room_name}.grid_box.svelte-10u2nsg .close {grid-area:close}.grid_box.svelte-10u2nsg .panel_msg {grid-area:panel_msg}.grid_box.svelte-10u2nsg .send {grid-area:send}.grid_box.svelte-10u2nsg .panel_write {grid-area:panel_write}.grid_box.svelte-10u2nsg{grid:' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto }button.svelte-1xlp56i.svelte-1xlp56i{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1xlp56i p.svelte-1xlp56i{width:100%;margin:auto;text-align:center}button.svelte-1xlp56i.svelte-1xlp56i:hover{background-color:rgb(200, 200, 200)}button.svelte-1xlp56i.svelte-1xlp56i:active{background-color:rgb(190, 190, 190)}button.list.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-1xlp56i p.svelte-1xlp56i{text-align:left}button.transparent.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.deactivate.svelte-1xlp56i.svelte-1xlp56i{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-1xlp56i p.svelte-1xlp56i{display:none}button.icon.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.icon.svelte-1xlp56i.svelte-1xlp56i{width:30px;height:100%;padding:0px}button.dots.svelte-1xlp56i.svelte-1xlp56i::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.close.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}

View File

@@ -975,7 +975,7 @@ var app = (function () {
/* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
const { Error: Error_1, Object: Object_1, console: console_1$7 } = globals;
const { Error: Error_1, Object: Object_1, console: console_1$8 } = globals;
// (267:0) {:else}
function create_else_block$5(ctx) {
@@ -1755,7 +1755,7 @@ var app = (function () {
const writable_props = ['routes', 'prefix', 'restoreScrollState'];
Object_1.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Router> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Router> was created with unknown prop '${key}'`);
});
function routeEvent_handler(event) {
@@ -2039,7 +2039,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */
const { console: console_1$6 } = globals;
const { console: console_1$7 } = globals;
const file$h = "src/pieces/Header.svelte";
// (24:39)
@@ -2268,7 +2268,7 @@ var app = (function () {
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Header> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Header> was created with unknown prop '${key}'`);
});
const click_handler = () => push('/');
@@ -2768,7 +2768,7 @@ var app = (function () {
/* src/pieces/chat/Button.svelte generated by Svelte v3.53.1 */
const { console: console_1$5 } = globals;
const { console: console_1$6 } = globals;
const file$f = "src/pieces/chat/Button.svelte";
function create_fragment$g(ctx) {
@@ -2878,7 +2878,7 @@ var app = (function () {
const writable_props = ['my_class', 'my_title', 'layout', 'new_layout'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<Button> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Button> was created with unknown prop '${key}'`);
});
$$self.$$set = $$props => {
@@ -3592,7 +3592,7 @@ var app = (function () {
create_component(button2.$$.fragment);
t2 = space();
create_component(button3.$$.fragment);
attr_dev(div, "class", "grid_box svelte-1d2ekny");
attr_dev(div, "class", "grid_box svelte-10u2nsg");
add_location(div, file$d, 8, 0, 109);
},
l: function claim(nodes) {
@@ -3776,9 +3776,11 @@ var app = (function () {
}
/* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */
const { console: console_1$5 } = globals;
const file$c = "src/pieces/chat/Chat.svelte";
// (37:1) {:else}
// (42:1) {:else}
function create_else_block$4(ctx) {
let div;
let button;
@@ -3790,7 +3792,7 @@ var app = (function () {
}
let button_props = {
new_layout: "home",
new_layout: /*layouts*/ ctx[2][0],
my_class: "chat",
$$slots: { default: [create_default_slot$2] },
$$scope: { ctx }
@@ -3808,7 +3810,7 @@ var app = (function () {
div = element("div");
create_component(button.$$.fragment);
attr_dev(div, "class", "grid_box svelte-1njtw54");
add_location(div, file$c, 37, 2, 817);
add_location(div, file$c, 42, 2, 938);
},
m: function mount(target, anchor) {
insert_dev(target, div, anchor);
@@ -3817,6 +3819,7 @@ var app = (function () {
},
p: function update(ctx, dirty) {
const button_changes = {};
if (dirty & /*layouts*/ 4) button_changes.new_layout = /*layouts*/ ctx[2][0];
if (dirty & /*$$scope*/ 512) {
button_changes.$$scope = { dirty, ctx };
@@ -3849,14 +3852,14 @@ var app = (function () {
block,
id: create_else_block$4.name,
type: "else",
source: "(37:1) {:else}",
source: "(42:1) {:else}",
ctx
});
return block;
}
// (34:29)
// (39:29)
function create_if_block_1$1(ctx) {
let roomlayout;
let updating_layout;
@@ -3913,14 +3916,14 @@ var app = (function () {
block,
id: create_if_block_1$1.name,
type: "if",
source: "(34:29) ",
source: "(39:29) ",
ctx
});
return block;
}
// (31:1) {#if layout === "home"}
// (36:1) {#if layout === "home"}
function create_if_block$6(ctx) {
let homelayout;
let updating_layout;
@@ -3976,14 +3979,14 @@ var app = (function () {
block,
id: create_if_block$6.name,
type: "if",
source: "(31:1) {#if layout === \\\"home\\\"}",
source: "(36:1) {#if layout === \\\"home\\\"}",
ctx
});
return block;
}
// (39:3) <Button bind:layout new_layout="home" my_class="chat">
// (44:3) <Button bind:layout new_layout={layouts[0]} my_class="chat">
function create_default_slot$2(ctx) {
let t;
@@ -4003,7 +4006,7 @@ var app = (function () {
block,
id: create_default_slot$2.name,
type: "slot",
source: "(39:3) <Button bind:layout new_layout=\\\"home\\\" my_class=\\\"chat\\\">",
source: "(44:3) <Button bind:layout new_layout={layouts[0]} my_class=\\\"chat\\\">",
ctx
});
@@ -4035,7 +4038,7 @@ var app = (function () {
attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1njtw54"));
attr_dev(div, "id", "chat_box");
set_style(div, "background-color", /*color*/ ctx[0]);
add_location(div, file$c, 28, 0, 602);
add_location(div, file$c, 33, 0, 723);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -4113,18 +4116,20 @@ var app = (function () {
let room = "";
let admin = false;
let layout = "close";
let layouts = ["home"];
// hold previous versions of layout, to go back
let layouts = [""];
function set_layouts(layout) {
if (layout === "close") return;
if (layout === layouts[0]) return;
$$invalidate(2, layouts = [layout, ...layouts]);
console.log(layouts);
}
const writable_props = ['color'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<Chat> was created with unknown prop '${key}'`);
});
function homelayout_layout_binding(value) {

File diff suppressed because one or more lines are too long

View File

@@ -25,14 +25,6 @@
<p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p>
<div class="chat_item chat_back" id="chat_back"></button>
<button class="btn back_room" onclick="chat_layout('room')" title="go back room"></button>
<button class="btn back_new" onclick="chat_layout('new')" title="go back new"></button>
<button class="btn back_user" onclick="chat_layout('user')" title="go back user"></button>
<button class="btn back_settings" onclick="chat_layout('settings')" title="go back settings"></button>
<button class="btn back_room_set" onclick="chat_layout('room_set')" title="go back room settings"></button>
</div>
<!-- --------------------------------
PANELS

View File

@@ -9,12 +9,17 @@
let room = "";
let admin = false;
let layout = "close";
let layouts = ["home"];
// hold previous versions of layout, to go back
let layouts = [""];
function set_layouts(layout)
{
if (layout === "close")
return;
if (layout === layouts[0])
return;
layouts = [layout, ...layouts];
console.log(layouts);
}
$: set_layouts(layout);
@@ -43,7 +48,7 @@
{:else}
<div class="grid_box">
<Button bind:layout new_layout="home" my_class="chat">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
chat
</Button>
</div>

View File

@@ -29,11 +29,11 @@
/* grid layout "home"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_msg ) {grid-area: panel_msg;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.panel_write ) {grid-area: panel_write;}
.grid_box {
grid: