[lib.content-controller] textarea auto_grow() [scss.container] textarea layout for auto_grow() [channel.vue] texarea auto_grow()
This commit is contained in:
parent
328473a390
commit
46b2143589
|
@ -75,4 +75,19 @@ export class ContentController{
|
|||
}
|
||||
|
||||
|
||||
/* (6) Textarea auto_grow
|
||||
*
|
||||
* @e<Event> Textarea event
|
||||
*
|
||||
---------------------------------------------------------*/
|
||||
auto_grow(e){
|
||||
|
||||
setTimeout(() => {
|
||||
e.target.style.height = '0';
|
||||
e.target.style.height = `calc( ${e.target.scrollHeight}px )`;
|
||||
}, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -28,7 +28,7 @@ export class RoomController{
|
|||
let room = this.get(type, id);
|
||||
|
||||
/* (2) Manage invalid room */
|
||||
if( room == null )
|
||||
if( Object.keys(room).length == 0 )
|
||||
return false;
|
||||
|
||||
/* (3) Close last room */
|
||||
|
@ -111,7 +111,7 @@ export class RoomController{
|
|||
|
||||
/* (1) Manage invalid @type */
|
||||
if( typeof type !== 'string' || this[type] == null )
|
||||
return null;
|
||||
return {};
|
||||
|
||||
/* (1) Get @current room: if id is null
|
||||
---------------------------------------------------------*/
|
||||
|
@ -142,7 +142,7 @@ export class RoomController{
|
|||
|
||||
/* (2) Return default: if ID not found */
|
||||
this[type].current = null;
|
||||
return null;
|
||||
return {};
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -187,10 +187,10 @@
|
|||
|
||||
section.message-input{
|
||||
|
||||
display: block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: calc( #{$input-height} - 2*1em );
|
||||
// height: 6em;
|
||||
height: auto;
|
||||
|
||||
margin: 1em 1.2em;
|
||||
|
||||
|
@ -198,17 +198,26 @@
|
|||
|
||||
background-color: #484b52;
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
& > textarea{
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 1.5em;
|
||||
width: calc( 100% - 2*1.5em - 2*1.5em - 1em );
|
||||
height: calc( 100% - 2*.4em - 2*1em );
|
||||
min-height: calc( 1em + 1.5em );
|
||||
height: calc( 1em + 1.5em );
|
||||
max-height: calc( 5em + .4em );
|
||||
|
||||
margin: 1em 1.5em;
|
||||
padding: .4em 0;
|
||||
padding-left: 1em;
|
||||
flex: 1 1 0;
|
||||
|
||||
margin: 1.5em 3em;
|
||||
|
||||
padding: .4em 1em;
|
||||
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
|
@ -216,8 +225,6 @@
|
|||
border: none;
|
||||
border-left: 1px solid #666;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
// reset
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</section>
|
||||
|
||||
<section class='message-input'>
|
||||
<textarea :placeholder='`Message #${gs.room.get("text").name}`'></textarea>
|
||||
<textarea :placeholder='`Message #${gs.room.get("text").name}`' @keydown='gs.content.auto_grow'></textarea>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue