Now message input
This commit is contained in:
xdrm-brackets
parent
7363f6ea1a
commit
47d9dfac0b
|
|
@ -3,7 +3,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#CONTAINER.message div{ /* Message item */
|
||||
|
|
@ -26,6 +25,10 @@
|
|||
color: #222;
|
||||
}
|
||||
|
||||
#CONTAINER.message > div:last-of-type{ /* Margin bottom to last */
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
#CONTAINER.message div.me{ /* Message Item (self) */
|
||||
background: #13d89d;
|
||||
align-self: flex-end;
|
||||
|
|
@ -55,4 +58,57 @@
|
|||
|
||||
#CONTAINER.message div.me span.author{ /* Hide message author if self */
|
||||
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 |
|
|
@ -57,4 +57,8 @@ window.gstore.add('func', {
|
|||
/* (2) Add locally */
|
||||
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>
|
||||
</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>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue