[lib.content-controller] textarea auto_grow() [scss.container] textarea layout for auto_grow() [channel.vue] texarea auto_grow()

This commit is contained in:
xdrm-brackets 2018-03-23 08:41:17 +01:00
parent 328473a390
commit 46b2143589
4 changed files with 36 additions and 14 deletions

View File

@ -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);
}
}

View File

@ -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 {};
}

View File

@ -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;

View File

@ -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>