Commit ddf533c74d989b38d8a15ce293a021f67153b2cc
smooth textarea transition, sweet paperclip
mix irving committed on 1/8/2017, 1:15:16 AMParent: 2445f7f6c568d24593d20f150be2fa3a18c84c58
Files changed
| modules_basic/compose.js | changed |
| modules_basic/compose.mcss | changed |
| style.css | changed |
| modules_basic/compose.js | ||
|---|---|---|
| @@ -56,17 +56,17 @@ | ||
| 56 | 56 … | if(!meta.type) throw new Error('message must have type') |
| 57 | 57 … | |
| 58 | 58 … | var textArea = h('textarea', { |
| 59 | 59 … | placeholder: opts.placeholder || 'Write a message', |
| 60 | - style: {height: opts.shrink === false ? '200px' : ''} | |
| 60 … | + className: opts.shrink === false ? '-expanded' : '-contracted' | |
| 61 | 61 … | }) |
| 62 | 62 … | |
| 63 | 63 … | if(opts.shrink !== false) { |
| 64 | 64 … | var blur |
| 65 | 65 … | textArea.addEventListener('focus', () => { |
| 66 | 66 … | clearTimeout(blur) |
| 67 | 67 … | if(!textArea.value) { |
| 68 | - textArea.style.height = '200px' | |
| 68 … | + textArea.className = '-expanded' | |
| 69 | 69 … | } |
| 70 | 70 … | actions.style.display = 'flex' |
| 71 | 71 … | }) |
| 72 | 72 … | textArea.addEventListener('blur', () => { |
| @@ -74,11 +74,11 @@ | ||
| 74 | 74 … | //to click the publish button. |
| 75 | 75 … | clearTimeout(blur) |
| 76 | 76 … | blur = setTimeout(() => { |
| 77 | 77 … | if(textArea.value) return |
| 78 | - textArea.style.height = '50px' | |
| 78 … | + textArea.className = '-contracted' | |
| 79 | 79 … | actions.style.display = 'none' |
| 80 | - }, 200) | |
| 80 … | + }, 300) | |
| 81 | 81 … | }) |
| 82 | 82 … | } |
| 83 | 83 … | |
| 84 | 84 … | textArea.addEventListener('keydown', ev => { |
| @@ -129,17 +129,15 @@ | ||
| 129 | 129 … | files.push(file) |
| 130 | 130 … | filesById[file.link] = file |
| 131 | 131 … | |
| 132 | 132 … | var embed = file.type.indexOf('image/') === 0 ? '!' : '' |
| 133 | - textArea.value += embed + '['+file.name+']('+file.link+')' | |
| 133 … | + textArea.value += '\n' + embed + '['+file.name+']('+file.link+')' | |
| 134 | 134 … | console.log('added:', file) |
| 135 | 135 … | }) |
| 136 | 136 … | var publishBtn = h('button', {'ev-click': publish}, 'Publish' ) |
| 137 | 137 … | var actions = h('section.actions', |
| 138 | 138 … | //hidden until you focus the textarea |
| 139 | - { style: {display: opts.shrink === false ? '' : ''} }, | |
| 140 | - // revert | |
| 141 | - // { style: {display: opts.shrink === false ? '' : 'none'} }, | |
| 139 … | + { style: {display: opts.shrink === false ? '' : 'none'} }, | |
| 142 | 140 … | [ fileInput, publishBtn ] |
| 143 | 141 … | ) |
| 144 | 142 … | |
| 145 | 143 … | var composer = h('Compose', [ |
| modules_basic/compose.mcss | ||
|---|---|---|
| @@ -5,35 +5,45 @@ | ||
| 5 | 5 … | padding: 1rem .5rem |
| 6 | 6 … | |
| 7 | 7 … | textarea { |
| 8 | 8 … | border: 1px solid gainsboro |
| 9 … | + | |
| 10 … | + -expanded { | |
| 11 … | + height: 200px | |
| 12 … | + transition: height .15s ease-out | |
| 13 … | + } | |
| 14 … | + | |
| 15 … | + -contracted { | |
| 16 … | + height: 50px | |
| 17 … | + transition: height .15s ease-in | |
| 18 … | + } | |
| 9 | 19 … | } |
| 10 | 20 … | |
| 11 | 21 … | section.actions { |
| 12 | 22 … | display: flex |
| 13 | 23 … | flex-direction: row |
| 14 | 24 … | align-items: baseline |
| 15 | 25 … | |
| 26 … | + margin-top: .4rem | |
| 27 … | + | |
| 16 | 28 … | input[type="file"] { |
| 17 | 29 … | flex-grow: 1 |
| 18 | 30 … | |
| 31 … | + padding: .5rem 0 | |
| 32 … | + | |
| 19 | 33 … | width: 5.5rem |
| 20 | 34 … | color: transparent |
| 21 | 35 … | |
| 22 | 36 … | ::-webkit-file-upload-button { |
| 23 | 37 … | visibility: hidden |
| 24 | 38 … | } |
| 25 | 39 … | |
| 26 | 40 … | ::before { |
| 27 | - content: 'attach file' | |
| 41 … | + $composeButton | |
| 42 … | + padding-top: .3rem | |
| 28 | 43 … | |
| 29 | - background: #fff | |
| 30 | - color: #666 | |
| 31 | - padding: .5rem | |
| 32 | - margin: .5rem 0 | |
| 33 | - cursor: pointer | |
| 34 | - text-transform: uppercase | |
| 35 | - font-size: .7rem | |
| 44 … | + content: '📎' | |
| 45 … | + font-size: 1rem | |
| 36 | 46 … | |
| 37 | 47 … | outline: none |
| 38 | 48 … | white-space: nowrap |
| 39 | 49 … | -webkit-user-select: none |
| @@ -45,19 +55,23 @@ | ||
| 45 | 55 … | } |
| 46 | 56 … | } |
| 47 | 57 … | |
| 48 | 58 … | button { |
| 49 | - background: #fff | |
| 50 | - color: #666 | |
| 51 | - border: 1px solid #bbb | |
| 52 | - border-radius: .5rem | |
| 53 | - padding: .5rem | |
| 54 | - margin: .5rem 0 | |
| 55 | - cursor: pointer | |
| 59 … | + $composeButton | |
| 60 … | + | |
| 56 | 61 … | text-transform: uppercase |
| 57 | 62 … | font-weight: bold |
| 58 | 63 … | font-size: .7rem |
| 59 | 64 … | } |
| 60 | 65 … | } |
| 61 | 66 … | } |
| 62 | 67 … | |
| 68 … | +$composeButton { | |
| 69 … | + background: #fff | |
| 70 … | + color: #666 | |
| 71 … | + border: 1px solid #bbb | |
| 72 … | + border-radius: .5rem | |
| 73 … | + padding: .5rem | |
| 74 … | + margin: 0 | |
| 75 … | + cursor: pointer | |
| 76 … | +} | |
| 63 | 77 … | |
| style.css | ||
|---|---|---|
| @@ -162,21 +162,8 @@ | ||
| 162 | 162 … | margin-left: auto; |
| 163 | 163 … | margin-right: auto; |
| 164 | 164 … | } |
| 165 | 165 … | |
| 166 | -/* compose */ | |
| 167 | - | |
| 168 | -.compose { | |
| 169 | - width: 100%; | |
| 170 | - margin-top: .5em; | |
| 171 | - margin-bottom: .5em; | |
| 172 | - border: 1px solid #f5f5f5; | |
| 173 | -} | |
| 174 | - | |
| 175 | -.compose button { | |
| 176 | - float: right; | |
| 177 | -} | |
| 178 | - | |
| 179 | 166 … | /* messages */ |
| 180 | 167 … | /* is .title used any more? */ |
| 181 | 168 … | |
| 182 | 169 … | .title { |
Built with git-ssb-web