[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);
|
let room = this.get(type, id);
|
||||||
|
|
||||||
/* (2) Manage invalid room */
|
/* (2) Manage invalid room */
|
||||||
if( room == null )
|
if( Object.keys(room).length == 0 )
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
/* (3) Close last room */
|
/* (3) Close last room */
|
||||||
|
@ -111,7 +111,7 @@ export class RoomController{
|
||||||
|
|
||||||
/* (1) Manage invalid @type */
|
/* (1) Manage invalid @type */
|
||||||
if( typeof type !== 'string' || this[type] == null )
|
if( typeof type !== 'string' || this[type] == null )
|
||||||
return null;
|
return {};
|
||||||
|
|
||||||
/* (1) Get @current room: if id is null
|
/* (1) Get @current room: if id is null
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
|
@ -142,7 +142,7 @@ export class RoomController{
|
||||||
|
|
||||||
/* (2) Return default: if ID not found */
|
/* (2) Return default: if ID not found */
|
||||||
this[type].current = null;
|
this[type].current = null;
|
||||||
return null;
|
return {};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -187,10 +187,10 @@
|
||||||
|
|
||||||
section.message-input{
|
section.message-input{
|
||||||
|
|
||||||
display: block;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: calc( #{$input-height} - 2*1em );
|
min-height: calc( #{$input-height} - 2*1em );
|
||||||
// height: 6em;
|
height: auto;
|
||||||
|
|
||||||
margin: 1em 1.2em;
|
margin: 1em 1.2em;
|
||||||
|
|
||||||
|
@ -198,17 +198,26 @@
|
||||||
|
|
||||||
background-color: #484b52;
|
background-color: #484b52;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
& > textarea{
|
& > textarea{
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 1.5em;
|
min-height: calc( 1em + 1.5em );
|
||||||
width: calc( 100% - 2*1.5em - 2*1.5em - 1em );
|
height: calc( 1em + 1.5em );
|
||||||
height: calc( 100% - 2*.4em - 2*1em );
|
max-height: calc( 5em + .4em );
|
||||||
|
|
||||||
margin: 1em 1.5em;
|
flex: 1 1 0;
|
||||||
padding: .4em 0;
|
|
||||||
padding-left: 1em;
|
margin: 1.5em 3em;
|
||||||
|
|
||||||
|
padding: .4em 1em;
|
||||||
|
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
@ -216,8 +225,6 @@
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 1px solid #666;
|
border-left: 1px solid #666;
|
||||||
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
// reset
|
// reset
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='message-input'>
|
<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>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue