Now message input
This commit is contained in:
xdrm-brackets
parent
7363f6ea1a
commit
47d9dfac0b
|
|
@ -3,7 +3,6 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#CONTAINER.message div{ /* Message item */
|
#CONTAINER.message div{ /* Message item */
|
||||||
|
|
@ -26,6 +25,10 @@
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#CONTAINER.message > div:last-of-type{ /* Margin bottom to last */
|
||||||
|
margin-bottom: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
#CONTAINER.message div.me{ /* Message Item (self) */
|
#CONTAINER.message div.me{ /* Message Item (self) */
|
||||||
background: #13d89d;
|
background: #13d89d;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
@ -56,3 +59,56 @@
|
||||||
#CONTAINER.message div.me span.author{ /* Hide message author if self */
|
#CONTAINER.message div.me span.author{ /* Hide message author if self */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#CONTAINER.message form.msg-input{ /* Message Input */
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: calc( 100% - 3em );
|
||||||
|
left: 15em;
|
||||||
|
width: calc( 100% - 2*1px );
|
||||||
|
height: 3em;
|
||||||
|
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#CONTAINER.message form.msg-input input{ /* form Input */
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: calc( 100vw - 15em - 2em - 3em );
|
||||||
|
height: calc( 100% - 2*.5em );
|
||||||
|
|
||||||
|
padding: .5em 1em;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#CONTAINER.message form.msg-input button{ /* form send button */
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: calc( 100vw - 15em - 3em );
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
|
||||||
|
background: url('/image/container/send-msg.svg@777777') center center no-repeat;
|
||||||
|
background-size: 50%;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#CONTAINER.message form.msg-input button:hover{
|
||||||
|
background-image: url('/image/container/send-msg.svg@000000');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 20.015684 19.959942"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg4190"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="send-msg.svg"
|
||||||
|
width="20.015684"
|
||||||
|
height="19.959942"><metadata
|
||||||
|
id="metadata4199"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs4197" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1056"
|
||||||
|
id="namedview4195"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:zoom="39.666667"
|
||||||
|
inkscape:cx="9.9906835"
|
||||||
|
inkscape:cy="9.9541575"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="24"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4190" /><path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="fill-edit"
|
||||||
|
d="M 19.490683,9.1057851 1.5906835,0.10578512 c -0.90000002,-0.4 -1.90000002,0.4 -1.50000002,1.29999998 l 2.50000002,6.7 11.3999995,1.8999999 -11.3999995,1.9 -2.50000002,6.7 c -0.3,0.9 0.6,1.7 1.50000002,1.2 l 17.8999995,-9 c 0.7,-0.3 0.7,-1.2999999 0,-1.6999999 z" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -58,3 +58,7 @@ window.gstore.add('func', {
|
||||||
window.gstore.data.notif[1].data.push([ window.gstore.data.server.session.name, msg ]);
|
window.gstore.data.notif[1].data.push([ window.gstore.data.server.session.name, msg ]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// new-message container
|
||||||
|
window.gstore.add('new_msg', '');
|
||||||
|
|
@ -7,8 +7,13 @@
|
||||||
<span class='content'>{{ msg[1] }}</span>
|
<span class='content'>{{ msg[1] }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form class='msg-input' @submit.prevent='gstore.func.sendMessage(gstore.new_msg)'>
|
||||||
|
<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg'>
|
||||||
|
<button></button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue