wip chat integration in svelte
This commit is contained in:
hugogogo
3
package-lock.json
generated
Normal file
3
package-lock.json
generated
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"lockfileVersion": 1
|
||||
}
|
||||
@@ -7,7 +7,7 @@ POSTGRES_DATABASE=transcendance_db
|
||||
|
||||
# OAUTH2 42 API
|
||||
FORTYTWO_CLIENT_ID=u-s4t2ud-49dc7b539bcfe1acb48b928b2b281671c99fc5bfab1faca57a536ab7e0075500
|
||||
FORTYTWO_CLIENT_SECRET=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
|
||||
FORTYTWO_CLIENT_SECRET=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
|
||||
FORTYTWO_CALLBACK_URL=http://transcendance:8080/api/v2/auth/redirect
|
||||
COOKIE_SECRET=248cdc831110eec8796d7c1edbf79835
|
||||
# JWT
|
||||
|
||||
1598
srcs/requirements/svelte/api_front/package-lock.json
generated
1598
srcs/requirements/svelte/api_front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,10 @@
|
||||
.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
|
||||
header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4byu.svelte-7t4byu{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;margin:0px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-7t4byu h1.svelte-7t4byu{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-7t4byu nav.svelte-7t4byu{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-7t4byu h2.svelte-7t4byu{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-7t4byu h2 div.svelte-7t4byu{font-size:2em}nav.svelte-7t4byu div.svelte-7t4byu{display:inline;color:bisque;font-weight:bold}nav.svelte-7t4byu>div.svelte-7t4byu{padding-left:1em}nav.svelte-7t4byu div.svelte-7t4byu:hover{text-decoration:underline;cursor:pointer}main.svelte-1cznfcz.svelte-1cznfcz{text-align:center;padding-top:40px;padding-bottom:40px}form.svelte-1cznfcz.svelte-1cznfcz{padding-top:15px}form.svelte-1cznfcz input.svelte-1cznfcz{max-width:330px}.error.svelte-1cznfcz.svelte-1cznfcz{font-weight:bold;font-size:0.8em;color:red}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
|
||||
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
|
||||
url('/fonts/Bondi.ttf.eot'),
|
||||
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}
|
||||
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1gjmpio.svelte-1gjmpio{background:#618174;margin:0}header.svelte-1gjmpio.svelte-1gjmpio{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1gjmpio.svelte-1gjmpio{font-family:'Bondi'}h1.svelte-1gjmpio.svelte-1gjmpio{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1gjmpio.svelte-1gjmpio{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1gjmpio.svelte-1gjmpio{display:flex;justify-content:right}nav.svelte-1gjmpio button.svelte-1gjmpio{margin:7px 20px;border-radius:4px}div.outer.svelte-16aefqu{max-width:960px;margin:40px auto}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}main.svelte-qtbld7{text-align:center}div.cards.svelte-qtbld7{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px}img.svelte-qtbld7{width:60px}form.svelte-qtbld7{text-align:center}.form-field.svelte-qtbld7{padding:10px}.label.svelte-qtbld7{font-weight:bold}.inline-check.svelte-qtbld7{display:inline}.error.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:red}.success.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:green}div.top-grid.svelte-55f7si{display:grid;grid-template-columns:repeat(12, 1fr);height:85vh}div.all-users-sidebar.svelte-55f7si{grid-column:1 / span 2;background:white}div.a-user.svelte-55f7si{display:inline-block}div.status.svelte-55f7si{font-size:0.6em;font-weight:bold}div[class^="a-user"].svelte-55f7si:hover{text-decoration:underline;font-weight:bold;cursor:pointer}div.main-display.svelte-55f7si{grid-column:3 / span 10}.error.svelte-55f7si{font-size:0.8em;font-weight:bold;color:red}div.outer.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto}main.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto;text-align:center}.avatar.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:150px}section.main-stats.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-16aefqu h4.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{grid-column:1 / span 3}div.username.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.5em;font-weight:bold;padding-bottom:5px}div.rank.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.2em;font-weight:bold}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}div.svelte-16aefqu>.glitter.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{display:inline-block;position:relative}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{--size:clamp(20px, 1.5vw, 30px);animation:svelte-16aefqu-scale 700ms ease forwards;display:block;height:var(--size);left:var(--star-left);position:absolute;top:var(--star-top);width:var(--size)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-rotate 1000ms linear infinite;display:block;opacity:0.7}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu>path.svelte-16aefqu{fill:var(--violet)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-text.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-background-pan 3s linear infinite;background:linear-gradient(
|
||||
to right,
|
||||
var(--purple),
|
||||
var(--violet),
|
||||
var(--pink),
|
||||
var(--purple)
|
||||
);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-eugl5j .svelte-eugl5j{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box.svelte-eugl5j .chat_item.svelte-eugl5j{display:none;width:100%;height:100%}.chat_item#chat_chat.svelte-eugl5j.svelte-eugl5j{grid-area:chat}#chat_box.svelte-eugl5j.svelte-eugl5j{display:grid;position:fixed;bottom:20px;right:20px;gap:5px;padding:5px;width:300px;height:400px;border:1px solid black}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,3 +1,4 @@
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
479
srcs/requirements/svelte/api_front/src/chat/Chat.svelte
Normal file
479
srcs/requirements/svelte/api_front/src/chat/Chat.svelte
Normal file
@@ -0,0 +1,479 @@
|
||||
<script lang="ts">
|
||||
function chat_layout(layout_class) {
|
||||
document.getElementById('chat_box').className = layout_class;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="close" id="chat_box">
|
||||
<!--
|
||||
classes:
|
||||
1. close -> layout close
|
||||
2. home -> layout home
|
||||
3. room -> layout room
|
||||
4. new -> layout new
|
||||
5. settings -> layout settings
|
||||
6. room_set -> layout room_set
|
||||
7. protected -> layout protected
|
||||
8. create -> layout create
|
||||
9. mute -> layout mute
|
||||
10. user -> layout user
|
||||
11. _blocked -> for user layout : user is blocked
|
||||
12. _muted -> for user layout : user is muted
|
||||
13. _admin -> for user layout : you are admin
|
||||
14. _room_set -> for user layout : comes from room_set
|
||||
15. _settings -> for user layout : comes from settings
|
||||
|
||||
classes for layout must replace the entire previous class
|
||||
but classes starting with "_" must be added to existing class
|
||||
-->
|
||||
|
||||
<button class="chat_item chat_chat btn" id="chat_chat" onclick="chat_layout('home')" ><p>chat</p></button>
|
||||
<button class="chat_item chat_close btn" id="chat_close" onclick="chat_layout('close')" title="close" ></button>
|
||||
<button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button>
|
||||
<button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
|
||||
<button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p><room_name></p></button>
|
||||
<p class="chat_item chat_create" id="chat_create" >create</p>
|
||||
<p class="chat_item chat_user" id="chat_user" ><user_name></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_home" onclick="chat_layout('home')" title="go back home"></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
|
||||
|
||||
- HOME
|
||||
- MSG
|
||||
- NEW
|
||||
- SETTINGS
|
||||
- ROOM SET
|
||||
- PROTECTED
|
||||
- CREATE
|
||||
- USER
|
||||
- MUTE
|
||||
- WRITE
|
||||
--------------------------------- -->
|
||||
|
||||
<!-- HOME -->
|
||||
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
|
||||
<p class="__center">list of your rooms :</p>
|
||||
<div id="chat_api_room_list" class="chat_api list_btn">
|
||||
<div class="chat_room_name __show_if_only_child">
|
||||
<p class="__center">/ you have no chat room yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">a room</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">another room</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">placeholder</p>
|
||||
</button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEW -->
|
||||
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
|
||||
<button class="chat_create_btn btn"><p>create</p></button>
|
||||
<p>join room :</p>
|
||||
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
|
||||
<div class="__show_if_only_child">
|
||||
<p class="__center">/ there are no public rooms yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">join room</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">one room</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">another room</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('room')">
|
||||
<p class="__left">one more room</p>
|
||||
</button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SETTINGS -->
|
||||
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
|
||||
<p>blocked users :</p>
|
||||
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<button class="chat_user btn" onclick="chat_layout('user _settings')">
|
||||
<p class="__left blocked">user 1</p>
|
||||
</button>
|
||||
<button class="chat_user btn" onclick="chat_layout('user _settings')">
|
||||
<p class="__left blocked">user 2</p>
|
||||
</button>
|
||||
<button class="chat_user btn" onclick="chat_layout('user _settings')">
|
||||
<p class="__left blocked">user 3</p>
|
||||
</button>
|
||||
<button class="chat_user btn" onclick="chat_layout('user _settings')">
|
||||
<p class="__left blocked">user 4</p>
|
||||
</button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROOM SET -->
|
||||
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
|
||||
<button class="chat_leave_btn btn"><p>leave</p></button>
|
||||
<p>room users :</p>
|
||||
<div id="chat_api_room_users" class="chat_api chat_room_users list_btn">
|
||||
<div class="chat_public_rooms __show_if_only_child">
|
||||
<p class="__center">/ there are no public rooms yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left">user 1</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left blocked">user 2</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left">user 3</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left">user 4</p>
|
||||
</button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROTECTED -->
|
||||
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
||||
<p class="__center" id="chat_protected_title">this room is protected</p>
|
||||
<form>
|
||||
<label for="chat_pswd"><p>password :</p></label>
|
||||
<input id="chat_pswd" type="password" required>
|
||||
<input type="submit" value="⮡">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- CREATE -->
|
||||
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
|
||||
<form>
|
||||
<!-- name: -->
|
||||
<label for="chat_name"><p>name :</p></label>
|
||||
<input id="chat_name" required>
|
||||
<!-- [ ] pubic -->
|
||||
<input id="chat_public" type="radio" name="chat_create_type" checked>
|
||||
<label for="chat_public" class="_radio"><p>public</p></label>
|
||||
<!-- [ ] private -->
|
||||
<input id="chat_private" type="radio" name="chat_create_type">
|
||||
<label for="chat_private" class="_radio"><p>private</p></label>
|
||||
<!-- [ ] protected -->
|
||||
<input id="chat_protected" class="_check_change_next" type="radio" name="chat_create_type">
|
||||
<label for="chat_protected" class="_radio"><p>protected</p></label>
|
||||
<!-- [x] protected -->
|
||||
<div class="__content _is_hidden">
|
||||
<label for="chat_pswd"><p>choose a password :</p></label>
|
||||
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
|
||||
<p>confirm password :</p>
|
||||
<input type="password">
|
||||
</div>
|
||||
<input type="submit" value="⮡">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- USER -->
|
||||
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
|
||||
<p class="__center">user options :</p>
|
||||
<div class="chat_user_btn_wrapper">
|
||||
<button class="chat_profile_btn btn"><p>view profile</p></button>
|
||||
<button class="chat_game_btn btn"><p>game invitation</p></button>
|
||||
<button class="chat_block_btn btn">
|
||||
<p id="chat_user_block">block</p>
|
||||
<p id="chat_user_unblock">unblock</p>
|
||||
</button>
|
||||
<div id="chat_user_admin">
|
||||
<button class="chat_admin_btn btn"><p>make admin</p></button>
|
||||
<button class="chat_mute_btn btn" id="chat_mute_btn">
|
||||
<p id="chat_user_mute">mute</p>
|
||||
<p id="chat_user_unmute">unmute</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MUTE -->
|
||||
<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
|
||||
<p class="__center">mute this user for a time :</p>
|
||||
<form>
|
||||
<!-- forever -->
|
||||
<input id="chat_mute_forever" type="checkbox" class="_check_change_next"></input>
|
||||
<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
|
||||
<div class="__content _is_not_gray">
|
||||
<!-- minutes -->
|
||||
<label for="chat_mute_minutes" class="_select">
|
||||
<p>minutes :</p>
|
||||
<select id="chat_mute_minutes">
|
||||
<option value="01">00</option>
|
||||
<option value="01">01</option>
|
||||
<option value="02">02</option>
|
||||
<option value="03">03</option>
|
||||
<option value="04">04</option>
|
||||
<option value="05">05</option>
|
||||
<option value="06">06</option>
|
||||
<option value="07">07</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="60">60</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- hours -->
|
||||
<label for="chat_mute_hours" class="_select">
|
||||
<p>hours :</p>
|
||||
<select id="chat_mute_hours">
|
||||
<option value="01">00</option>
|
||||
<option value="01">01</option>
|
||||
<option value="02">02</option>
|
||||
<option value="03">03</option>
|
||||
<option value="04">04</option>
|
||||
<option value="05">05</option>
|
||||
<option value="06">06</option>
|
||||
<option value="07">07</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
<option value="32">32</option>
|
||||
<option value="33">33</option>
|
||||
<option value="34">34</option>
|
||||
<option value="35">35</option>
|
||||
<option value="36">36</option>
|
||||
<option value="37">37</option>
|
||||
<option value="40">40</option>
|
||||
<option value="41">41</option>
|
||||
<option value="42">42</option>
|
||||
<option value="43">43</option>
|
||||
<option value="44">44</option>
|
||||
<option value="45">45</option>
|
||||
<option value="46">46</option>
|
||||
<option value="47">47</option>
|
||||
<option value="50">50</option>
|
||||
<option value="51">51</option>
|
||||
<option value="52">52</option>
|
||||
<option value="53">53</option>
|
||||
<option value="54">54</option>
|
||||
<option value="55">55</option>
|
||||
<option value="56">56</option>
|
||||
<option value="57">57</option>
|
||||
<option value="60">60</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- days -->
|
||||
<label for="chat_mute_days" class="_select">
|
||||
<p>days :</p>
|
||||
<select id="chat_mute_days">
|
||||
<option value="00">00</option>
|
||||
<option value="01">01</option>
|
||||
<option value="02">02</option>
|
||||
<option value="03">03</option>
|
||||
<option value="04">04</option>
|
||||
<option value="05">05</option>
|
||||
<option value="06">06</option>
|
||||
<option value="07">07</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" value="⮡">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- MSG -->
|
||||
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
|
||||
<div id="chat_api_msg_thread" class="chat_api">
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<div class="chat_msg bob">
|
||||
<p class="name">bob</p>
|
||||
<p class="msg">hello</p>
|
||||
</div>
|
||||
<div class="chat_msg me">
|
||||
<p class="name">me</p>
|
||||
<p class="msg">hello</p>
|
||||
</div>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WRITE -->
|
||||
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
|
||||
<!--
|
||||
<textarea class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" placeholder="type here"></textarea>
|
||||
-->
|
||||
<div class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true" ></div>
|
||||
</div>
|
||||
<!-- send -->
|
||||
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import './chat_style/chat__global.css';
|
||||
|
||||
@import './chat_style/layout_close.css';
|
||||
@import './chat_style/layout_home.css';
|
||||
@import './chat_style/layout_room.css';
|
||||
@import './chat_style/layout_new.css';
|
||||
@import './chat_style/layout_settings.css';
|
||||
@import './chat_style/layout_room_set.css';
|
||||
@import './chat_style/layout_protected.css';
|
||||
@import './chat_style/layout_create.css';
|
||||
@import './chat_style/layout_user.css';
|
||||
@import './chat_style/layout_mute.css';
|
||||
|
||||
@import './chat_style/chat_panels.css';
|
||||
@import './chat_style/chat_buttons.css';
|
||||
@import './chat_style/chat_back.css';
|
||||
@import './chat_style/chat_close.css';
|
||||
@import './chat_style/chat_write.css';
|
||||
@import './chat_style/chat_msg.css';
|
||||
@import './chat_style/chat_blocked.css';
|
||||
@import './chat_style/chat_form.css';
|
||||
|
||||
|
||||
/*
|
||||
GRID
|
||||
*/
|
||||
|
||||
#chat_box * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
#chat_box .chat_item {
|
||||
display: none;
|
||||
/*
|
||||
border: 1px solid black;
|
||||
*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat_item#chat_chat { grid-area: chat;}
|
||||
.chat_item#chat_close { grid-area: close;}
|
||||
.chat_item#chat_new { grid-area: new;}
|
||||
.chat_item#chat_settings { grid-area: settings;}
|
||||
.chat_item#chat_room_name { grid-area: room_name;}
|
||||
.chat_item#chat_send { grid-area: send;}
|
||||
.chat_item#chat_create { grid-area: create;}
|
||||
.chat_item#chat_user { grid-area: user;}
|
||||
.chat_item#chat_back { grid-area: back;}
|
||||
.chat_item#chat_panel_home { grid-area: panel_home;}
|
||||
.chat_item#chat_panel_new { grid-area: panel_new;}
|
||||
.chat_item#chat_panel_msg { grid-area: panel_msg;}
|
||||
.chat_item#chat_panel_write { grid-area: panel_write;}
|
||||
.chat_item#chat_panel_settings { grid-area: panel_settings;}
|
||||
.chat_item#chat_panel_room_set { grid-area: panel_room_set;}
|
||||
.chat_item#chat_panel_protected { grid-area: panel_protected;}
|
||||
.chat_item#chat_panel_create { grid-area: panel_create;}
|
||||
.chat_item#chat_panel_user { grid-area: panel_user;}
|
||||
.chat_item#chat_panel_mute { grid-area: panel_mute;}
|
||||
|
||||
#chat_box {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
12
srcs/requirements/svelte/api_front/src/chat/Chat2.css
Normal file
12
srcs/requirements/svelte/api_front/src/chat/Chat2.css
Normal file
@@ -0,0 +1,12 @@
|
||||
#chat_box.close {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
#chat_box.close .chat_item#chat_chat {
|
||||
display: flex;
|
||||
}
|
||||
42
srcs/requirements/svelte/api_front/src/chat/Chat2.svelte
Normal file
42
srcs/requirements/svelte/api_front/src/chat/Chat2.svelte
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="close" id="chat_box">
|
||||
<button class="chat_item chat_chat btn" id="chat_chat"><p>chat</p></button>
|
||||
</div>
|
||||
|
||||
<style src="./Chat2.css">
|
||||
|
||||
#chat_box * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
#chat_box .chat_item {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_item#chat_chat {
|
||||
grid-area: chat;
|
||||
}
|
||||
#chat_box {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
#chat_box * {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
#chat_box *::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* p in chat_box
|
||||
*/
|
||||
#chat_box p {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
font-family: Cantarell;
|
||||
}
|
||||
|
||||
|
||||
/* show child only if it's alone
|
||||
*/
|
||||
#chat_box .__show_if_only_child {
|
||||
display: none;
|
||||
}
|
||||
#chat_box .__show_if_only_child:only-child {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* separation line under controls
|
||||
*/
|
||||
#chat_box .chat_item.chat_panel {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* text align
|
||||
*/
|
||||
#chat_box p.__center {
|
||||
text-align: center;
|
||||
}
|
||||
#chat_box p.__left {
|
||||
text-align: left;
|
||||
}
|
||||
#chat_box p.__right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/* default align items
|
||||
*/
|
||||
#chat_box .chat_item > * {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* display content
|
||||
*/
|
||||
#chat_box .__content{
|
||||
display: content;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
/*
|
||||
https://www.fileformat.info/info/unicode/category/So/list.htm
|
||||
U+1F512 LOCK 🔒
|
||||
U+1F513 OPEN LOCK 🔓
|
||||
*/
|
||||
|
||||
#chat_box .blocked {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#chat_box .blocked::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 2px);
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
width: 13px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
/*
|
||||
*/
|
||||
background-color: rgb(110, 110, 110);
|
||||
}
|
||||
#chat_box .blocked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 9px);
|
||||
left: 12px;
|
||||
cursor: pointer;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
/*
|
||||
background-color: red;
|
||||
*/
|
||||
border: 3px solid rgb(110, 110, 110);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
#chat_box button {
|
||||
display: flex;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
#chat_box button p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#chat_box button.chat_item:hover,
|
||||
#chat_box .chat_item button:hover {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
#chat_box button.chat_item:active,
|
||||
#chat_box .chat_item button:active {
|
||||
background-color: rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
|
||||
/* BTN LIST
|
||||
add or remove '.btn' to toggle the hover effect
|
||||
*/
|
||||
#chat_box .list_btn button {
|
||||
margin: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
#chat_box .list_btn {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
|
||||
/* BACK
|
||||
*/
|
||||
#chat_box .chat_item.chat_back button {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
#chat_box .chat_item.chat_back button::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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
#chat_box .chat_item#chat_close {
|
||||
width: 30px;
|
||||
}
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box button.chat_item.chat_close {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
#chat_close::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 5px;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
120
srcs/requirements/svelte/api_front/src/chat/style/chat_form.css
Normal file
120
srcs/requirements/svelte/api_front/src/chat/style/chat_form.css
Normal file
@@ -0,0 +1,120 @@
|
||||
|
||||
/* default element take all space on each line
|
||||
*/
|
||||
#chat_box .chat_item form {
|
||||
margin: 0px auto;
|
||||
}
|
||||
#chat_box .chat_item form * {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* radio elements style check
|
||||
*/
|
||||
#chat_box .chat_item form input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
#chat_box .chat_item form label._radio {
|
||||
margin: 0px 0px 0px auto;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#chat_box .chat_item form label._radio::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
right: 0px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid rgb(150, 150, 150);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
#chat_box .chat_item form input[type=radio]:checked
|
||||
+ label._radio::after {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
|
||||
/* change next element on check
|
||||
*/
|
||||
#chat_box form ._check_change_next:checked ~ ._is_hidden {
|
||||
display: flex;
|
||||
}
|
||||
#chat_box form ._check_change_next:checked ~ ._is_not_gray {
|
||||
pointer-events: none;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
#chat_box form ._is_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* submit button
|
||||
https://www.fileformat.info/info/unicode/category/So/list.htm
|
||||
U+21AA RIGHTWARDS ARROW WITH HOOK ↪
|
||||
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
|
||||
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
|
||||
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
|
||||
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
|
||||
*/
|
||||
#chat_box .chat_item form input[type=submit] {
|
||||
padding: 0px 10px;
|
||||
border: none;
|
||||
margin: 10px 0px 0px auto;
|
||||
cursor: pointer;
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
#chat_box .chat_item form input[type=submit]:hover {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
|
||||
/* select
|
||||
*/
|
||||
#chat_box .chat_item form label._select {
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
}
|
||||
#chat_box .chat_item form select {
|
||||
margin: auto 0px;
|
||||
background-color: rgb(220, 220, 220);
|
||||
border: none;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#chat_box .chat_item form select:hover {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
|
||||
/* checkbox
|
||||
<input id="chat_mute_forever" type="checkbox" class="_checkbox"></input>
|
||||
<label for="chat_mute_forever">forever</label>
|
||||
*/
|
||||
#chat_box .chat_item form input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
#chat_box .chat_item form label._checkbox {
|
||||
margin: 0px 0px 0px auto;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#chat_box .chat_item form label._checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
right: 0px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid rgb(150, 150, 150);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
#chat_box .chat_item form input[type=checkbox]:checked
|
||||
+ label._checkbox::after {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
|
||||
#chat_box #chat_panel_msg {
|
||||
flex-direction: column-reverse;
|
||||
overflow: scroll;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0px 5px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
|
||||
white-space: pre-wrap;
|
||||
margin: 5px auto;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * *
|
||||
ALL MSG
|
||||
*/
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
|
||||
margin-left: 0px;
|
||||
background-color: rgb(210, 210, 210);
|
||||
max-width: 80%;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p {
|
||||
padding: 0px;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
|
||||
/*
|
||||
margin: 5px 0px;
|
||||
line-height: 8px;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * *
|
||||
MSG PERSO
|
||||
*/
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
|
||||
margin-right: 0px;
|
||||
margin-left: auto;
|
||||
background-color: rgb(210, 110, 10);
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * *
|
||||
MSG SERVER
|
||||
*/
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
|
||||
margin-left: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
|
||||
display: none;
|
||||
}
|
||||
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
|
||||
margin: 0px auto;
|
||||
font-size: 12px;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
#chat_box .chat_panel {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
#chat_box .chat_item#chat_panel_write {
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
#chat_box .chat_item#chat_panel_write .text_area {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#chat_box .chat_item#chat_panel_write .text_area * {
|
||||
display: block ruby;
|
||||
}
|
||||
/* if .text_area is a contenteditable div
|
||||
*/
|
||||
#chat_box .chat_item#chat_panel_write .text_area {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
/* if .text_area is a textarea
|
||||
*/
|
||||
#chat_box .chat_item#chat_panel_write textarea.text_area {
|
||||
resize: none;
|
||||
height: 100px;
|
||||
}
|
||||
#chat_box .chat_item#chat_panel_write textarea.text_area:placeholder-shown {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
|
||||
#chat_box.close {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
#chat_box.close .chat_item#chat_chat {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* COLLAPSE
|
||||
|
||||
.chat._item:not(.open_close) {
|
||||
display: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
#chat_box {
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
#chat_box .chat._item {
|
||||
display: flex;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
#chat_box .chat._item.open_close p {
|
||||
display: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
#chat_box .chat._item.open_close {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
padding: 0px;
|
||||
justify-self: end;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
#chat_input:checked ~
|
||||
#chat_box .chat._item.open_close::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 4px;
|
||||
width: 15px;
|
||||
background-color: black;
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
|
||||
#chat_box.create {
|
||||
grid:
|
||||
' back create close ' auto
|
||||
' panel_create panel_create panel_create ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.create .chat_item#chat_back,
|
||||
#chat_box.create .chat_item#chat_create,
|
||||
#chat_box.create .chat_item#chat_close,
|
||||
#chat_box.create .chat_item#chat_panel_create {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.create .chat_item.chat_back button.back_new {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* title "create" appearance
|
||||
*/
|
||||
#chat_box.create .chat_item.chat_create {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
|
||||
#chat_box.home {
|
||||
grid:
|
||||
' settings new close ' auto
|
||||
' panel_home panel_home panel_home ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.home .chat_item#chat_settings,
|
||||
#chat_box.home .chat_item#chat_new,
|
||||
#chat_box.home .chat_item#chat_close,
|
||||
#chat_box.home .chat_item#chat_panel_home {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "new" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.home button.chat_new {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* button "settings" as 3 dots
|
||||
*/
|
||||
#chat_box.home .chat_item#chat_settings p {
|
||||
display: none;
|
||||
}
|
||||
#chat_box.home button.chat_item#chat_settings {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.home button.chat_item#chat_settings {
|
||||
background-color: transparent;
|
||||
}
|
||||
#chat_box.home .chat_item#chat_settings::after {
|
||||
content: '\2807';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
/*
|
||||
background-color: black;
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
#chat_box.mute {
|
||||
grid:
|
||||
' back user close ' auto
|
||||
' panel_mute panel_mute panel_mute ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.mute .chat_item#chat_back,
|
||||
#chat_box.mute .chat_item#chat_user,
|
||||
#chat_box.mute .chat_item#chat_close,
|
||||
#chat_box.mute .chat_item#chat_panel_mute {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.mute .chat_item.chat_back button.back_user {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* title "mute" appearance
|
||||
*/
|
||||
#chat_box.mute .chat_item.chat_user {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
#chat_box.new {
|
||||
grid:
|
||||
' back new close ' auto
|
||||
' panel_new panel_new panel_new ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.new .chat_item#chat_back,
|
||||
#chat_box.new .chat_item#chat_new,
|
||||
#chat_box.new .chat_item#chat_close,
|
||||
#chat_box.new .chat_item#chat_panel_new {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.new .chat_item.chat_back button.back_home {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "new" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.new button.chat_item.chat_new {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* button "create" appearance
|
||||
*/
|
||||
#chat_box.new .chat_item button.chat_create_btn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
#chat_box.protected {
|
||||
grid:
|
||||
' back room_name close ' auto
|
||||
' panel_protected panel_protected panel_protected ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.protected .chat_item#chat_back,
|
||||
#chat_box.protected .chat_item#chat_room_name,
|
||||
#chat_box.protected .chat_item#chat_close,
|
||||
#chat_box.protected .chat_item#chat_panel_protected {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.protected .chat_item.chat_back button.back_new {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "<room_name>" appearance
|
||||
add or remove '.chat_item' to toggle the hover effect
|
||||
*/
|
||||
#chat_box.protected button.chat_item.chat_room_name {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#chat_box #chat_protected_title {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
#chat_box.room {
|
||||
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 ;
|
||||
}
|
||||
#chat_box.room .chat_item#chat_back,
|
||||
#chat_box.room .chat_item#chat_room_name,
|
||||
#chat_box.room .chat_item#chat_close,
|
||||
#chat_box.room .chat_item#chat_panel_msg,
|
||||
#chat_box.room .chat_item#chat_send,
|
||||
#chat_box.room .chat_item#chat_panel_write {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.room .chat_item.chat_back button.back_home {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "<room_name>" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.room button.chat_room_name {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
|
||||
#chat_box.room_set {
|
||||
grid:
|
||||
' back room_name close ' auto
|
||||
' panel_room_set panel_room_set panel_room_set ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.room_set .chat_item#chat_back,
|
||||
#chat_box.room_set .chat_item#chat_room_name,
|
||||
#chat_box.room_set .chat_item#chat_close,
|
||||
#chat_box.room_set .chat_item#chat_panel_room_set {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.room_set .chat_item.chat_back button.back_room {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "<room_name>" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.room_set button.chat_item.chat_room_name {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* button "leave" appearance
|
||||
*/
|
||||
#chat_box.room_set .chat_item button.chat_leave_btn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
#chat_box.settings {
|
||||
grid:
|
||||
' back settings close ' auto
|
||||
' panel_settings panel_settings panel_settings ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.settings .chat_item#chat_back,
|
||||
#chat_box.settings .chat_item#chat_settings,
|
||||
#chat_box.settings .chat_item#chat_close,
|
||||
#chat_box.settings .chat_item#chat_panel_settings {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.settings .chat_item.chat_back button.back_home {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "settings" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.settings button.chat_item.chat_settings {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
|
||||
#chat_box.user {
|
||||
grid:
|
||||
' back user close ' auto
|
||||
' room_name room_name room_name ' auto
|
||||
' panel_user panel_user panel_user ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.user .chat_item#chat_back,
|
||||
#chat_box.user .chat_item#chat_user,
|
||||
#chat_box.user .chat_item#chat_close,
|
||||
#chat_box.user .chat_item#chat_panel_user {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* title "user" appearance
|
||||
*/
|
||||
#chat_box.user .chat_item.chat_user {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* for line height
|
||||
*/
|
||||
#chat_box.user .chat_item.chat_panel_user {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
|
||||
/* room_name appearance
|
||||
*/
|
||||
#chat_box.user button.chat_item#chat_room_name {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.user .chat_item.chat_back button.back_home {display: flex;}
|
||||
/* from settings */
|
||||
#chat_box._settings .chat_item.chat_back button.btn {display: none;}
|
||||
#chat_box._settings .chat_item.chat_back button.back_settings {display: flex;}
|
||||
/* from room settings */
|
||||
#chat_box._room_set .chat_item.chat_back button.btn {display: none;}
|
||||
#chat_box._room_set .chat_item.chat_back button.back_room_set {display: flex;}
|
||||
|
||||
|
||||
/* buttons appearance
|
||||
*/
|
||||
#chat_box.user .chat_item.chat_panel_user .chat_user_btn_wrapper {
|
||||
margin: 0px auto;
|
||||
}
|
||||
#chat_box.user .chat_item.chat_panel_user button {
|
||||
margin: 10px;
|
||||
}
|
||||
#chat_box.user #chat_user_admin {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* toggle buttons according to chat_box class
|
||||
*/
|
||||
/* block/unblock */
|
||||
#chat_box.user #chat_user_unblock {display: none;}
|
||||
#chat_box.user._blocked #chat_user_block {display: none;}
|
||||
#chat_box.user._blocked #chat_user_unblock {display: flex;}
|
||||
/* admin if from room */
|
||||
#chat_box.user #chat_user_admin {display: none;}
|
||||
#chat_box.user._room_set._admin #chat_user_admin {display: flex;}
|
||||
/* room_name if from room */
|
||||
#chat_box.user #chat_room_name {display: none;}
|
||||
#chat_box.user._room_set #chat_room_name {display: flex;}
|
||||
/* mute/unmute */
|
||||
#chat_box.user #chat_user_unmute {display: none;}
|
||||
#chat_box.user._muted #chat_user_mute {display: none;}
|
||||
#chat_box.user._muted #chat_user_unmute {display: flex;}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
|
||||
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
|
||||
|
||||
import Chat from "../../chat/Chat2.svelte";
|
||||
|
||||
let user;
|
||||
|
||||
@@ -9,13 +11,13 @@
|
||||
// console.log('mounting profile display')
|
||||
user = await fetch('http://transcendance:8080/api/v2/user')
|
||||
.then( (x) => x.json() );
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<Chat />
|
||||
|
||||
<!-- is this if excessive? -->
|
||||
<div class="outer">
|
||||
<!-- OHHHH i could use #await instead of if and have an nice loading page! -->
|
||||
@@ -203,4 +205,4 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -55,4 +55,4 @@
|
||||
background-image: url('/img/wave-haikei.svg');
|
||||
} */
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -116,4 +116,4 @@
|
||||
/* .none{
|
||||
|
||||
} */
|
||||
</style>
|
||||
</style>
|
||||
|
||||
59
tests_hugo/chat_node/chat_client/chat2.html
Normal file
59
tests_hugo/chat_node/chat_client/chat2.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
#chat_box * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
#chat_box .chat_item {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_item#chat_chat {
|
||||
grid-area: chat;
|
||||
}
|
||||
#chat_box {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
|
||||
border: 1px solid black;
|
||||
}
|
||||
#chat_box.close {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
#chat_box.close .chat_item#chat_chat {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="close" id="chat_box">
|
||||
<button class="chat_item chat_chat btn" id="chat_chat"><p>chat</p></button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user