Commit 5408d3118894220a8d70afa1754390b36514ba45
compose styling + refactor: use input.click()
mixmix committed on 4/27/2019, 5:49:08 AMParent: 19359cb09eea2fe4a47ea7c5a912ed49091828cd
Files changed
| message/html/compose.js | changed |
| message/html/compose.mcss | changed |
| package-lock.json | changed |
| message/html/compose.js | |||
|---|---|---|---|
| @@ -122,9 +122,9 @@ | |||
| 122 | 122 … | ]) | |
| 123 | 123 … | })) | |
| 124 | 124 … | }) | |
| 125 | 125 … | ||
| 126 | - var fileInput = h('input', { | ||
| 126 … | + var ssbBlobInput = h('input -ssb', { | ||
| 127 | 127 … | type: 'file', | |
| 128 | 128 … | // accept, | |
| 129 | 129 … | attributes: { multiple: true, title: 'Add files as blobs' }, | |
| 130 | 130 … | 'ev-click': () => hasContent.set(true), | |
| @@ -158,9 +158,9 @@ | |||
| 158 | 158 … | ||
| 159 | 159 … | console.log('added:', result) | |
| 160 | 160 … | } | |
| 161 | 161 … | ||
| 162 | - var datInput = h('input.dat', { | ||
| 162 … | + var datBlobInput = h('input -dat', { | ||
| 163 | 163 … | type: 'file', | |
| 164 | 164 … | attributes: { title: 'Add file as dat link' }, | |
| 165 | 165 … | 'ev-click': () => hasContent.set(true), | |
| 166 | 166 … | 'ev-change': (ev) => { | |
| @@ -177,10 +177,25 @@ | |||
| 177 | 177 … | var isPublishing = Value(false) | |
| 178 | 178 … | var publishBtn = h('button', { 'ev-click': publish, disabled: isPublishing }, isPrivate ? 'Reply' : 'Publish') | |
| 179 | 179 … | ||
| 180 | 180 … | var actions = h('section.actions', [ | |
| 181 | - fileInput, | ||
| 182 | - datInput, | ||
| 181 … | + h('div.attach', [ | ||
| 182 … | + h('i.fa.fa-paperclip'), | ||
| 183 … | + h('div.attachers', [ | ||
| 184 … | + h('div.attacher', { 'ev-click': () => ssbBlobInput.click() }, [ | ||
| 185 … | + h('i.fa.fa-file-o'), | ||
| 186 … | + h('div.label', 'small file(s)'), | ||
| 187 … | + h('div.subtext', '< 5MB') | ||
| 188 … | + ]), | ||
| 189 … | + h('div.attacher', { 'ev-click': () => datBlobInput.click() }, [ | ||
| 190 … | + h('i.fa.fa-file-archive-o'), | ||
| 191 … | + h('div.label', 'large file'), | ||
| 192 … | + h('div.subtext', 'DAT archive, (BETA)') | ||
| 193 … | + ]), | ||
| 194 … | + ssbBlobInput, | ||
| 195 … | + datBlobInput | ||
| 196 … | + ]) | ||
| 197 … | + ]), | ||
| 183 | 198 … | publishBtn | |
| 184 | 199 … | ]) | |
| 185 | 200 … | ||
| 186 | 201 … | var composer = h('Compose', { | |
| message/html/compose.mcss | ||
|---|---|---|
| @@ -56,48 +56,75 @@ | ||
| 56 | 56 … | justify-content: space-between |
| 57 | 57 … | |
| 58 | 58 … | margin-top: .4rem |
| 59 | 59 … | |
| 60 | - input[type="file"] { | |
| 61 | - width: 1.8rem | |
| 62 | - height: 1.8rem | |
| 63 | - cursor: pointer | |
| 64 | - color: transparent | |
| 65 | - font-family: FontAwesome | |
| 66 | - border: 1px rgba(0,0,0,0) solid | |
| 60 … | + div.attach { | |
| 61 … | + position: relative | |
| 62 … | + transition: opacity ease-in 1s | |
| 67 | 63 … | |
| 68 | - ::-webkit-file-upload-button { | |
| 69 | - visibility: hidden | |
| 64 … | + :hover { | |
| 65 … | + background-color: black | |
| 66 … | + i.fa { color: white } | |
| 67 … | + | |
| 68 … | + div.attachers { display: grid } | |
| 70 | 69 … | } |
| 71 | 70 … | |
| 72 | - ::before { | |
| 73 | - padding-top: .3rem | |
| 71 … | + i.fa { | |
| 72 … | + color: black | |
| 74 | 73 … | |
| 75 | - content: '\f0c6' | |
| 76 | - font-size: 1rem | |
| 77 | - color: #666; | |
| 78 | - background-color: #fff | |
| 74 … | + width: 30px | |
| 75 … | + height: 30px | |
| 79 | 76 … | |
| 80 | - outline: none | |
| 81 | - white-space: nowrap | |
| 82 | - -webkit-user-select: none | |
| 83 | - | |
| 84 | - display: flex | |
| 77 … | + display: grid | |
| 85 | 78 … | justify-content: center |
| 79 … | + align-content: center | |
| 86 | 80 … | } |
| 87 | 81 … | |
| 88 | - :hover, :focus { | |
| 89 | - border: 1px gainsboro solid | |
| 90 | - outline: none | |
| 91 | - box-shadow: none | |
| 82 … | + div.attachers { | |
| 83 … | + position: absolute | |
| 84 … | + top: 0 | |
| 85 … | + left: 30px | |
| 86 … | + | |
| 87 … | + width: 250px | |
| 88 … | + | |
| 89 … | + color: black | |
| 90 … | + background: white | |
| 91 … | + border: 1px solid black | |
| 92 … | + | |
| 93 … | + display: none | |
| 94 … | + justify-items: stretch | |
| 95 … | + align-items: center | |
| 96 … | + grid-gap: 2px | |
| 97 … | + padding: 8px | |
| 98 … | + | |
| 99 … | + div.attacher { | |
| 100 … | + i.fa {} | |
| 101 … | + div.label {} | |
| 102 … | + div.subtext { | |
| 103 … | + color: grey | |
| 104 … | + font-size: 12px | |
| 105 … | + } | |
| 106 … | + | |
| 107 … | + display: grid | |
| 108 … | + grid-template-columns: auto 1fr auto | |
| 109 … | + grid-gap: 10px | |
| 110 … | + | |
| 111 … | + padding: 3px 5px | |
| 112 … | + cursor: pointer | |
| 113 … | + :hover { | |
| 114 … | + color: white | |
| 115 … | + background: black | |
| 116 … | + | |
| 117 … | + div.subtext { color: gainsboro } | |
| 118 … | + } | |
| 119 … | + } | |
| 120 … | + | |
| 121 … | + input[type="file"] { | |
| 122 … | + display: none | |
| 123 … | + } | |
| 92 | 124 … | } |
| 93 | 125 … | } |
| 94 | 126 … | |
| 95 | - input.dat { | |
| 96 | - ::before { | |
| 97 | - content: '\f1e1' | |
| 98 | - } | |
| 99 | - } | |
| 100 | 127 … | } |
| 101 | 128 … | |
| 102 | 129 … | -expanded { |
| 103 | 130 … | textarea { |
| package-lock.json | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 710175 bytes New file size: 710176 bytes |
Built with git-ssb-web