git ssb

16+

Dominic / patchbay



Commit 5408d3118894220a8d70afa1754390b36514ba45

compose styling + refactor: use input.click()

mixmix committed on 4/27/2019, 5:49:08 AM
Parent: 19359cb09eea2fe4a47ea7c5a912ed49091828cd

Files changed

message/html/compose.jschanged
message/html/compose.mcsschanged
package-lock.jsonchanged
message/html/compose.jsView
@@ -122,9 +122,9 @@
122122 ])
123123 }))
124124 })
125125
126- var fileInput = h('input', {
126 + var ssbBlobInput = h('input -ssb', {
127127 type: 'file',
128128 // accept,
129129 attributes: { multiple: true, title: 'Add files as blobs' },
130130 'ev-click': () => hasContent.set(true),
@@ -158,9 +158,9 @@
158158
159159 console.log('added:', result)
160160 }
161161
162- var datInput = h('input.dat', {
162 + var datBlobInput = h('input -dat', {
163163 type: 'file',
164164 attributes: { title: 'Add file as dat link' },
165165 'ev-click': () => hasContent.set(true),
166166 'ev-change': (ev) => {
@@ -177,10 +177,25 @@
177177 var isPublishing = Value(false)
178178 var publishBtn = h('button', { 'ev-click': publish, disabled: isPublishing }, isPrivate ? 'Reply' : 'Publish')
179179
180180 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 + ]),
183198 publishBtn
184199 ])
185200
186201 var composer = h('Compose', {
message/html/compose.mcssView
@@ -56,48 +56,75 @@
5656 justify-content: space-between
5757
5858 margin-top: .4rem
5959
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
6763
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 }
7069 }
7170
72- ::before {
73- padding-top: .3rem
71 + i.fa {
72 + color: black
7473
75- content: '\f0c6'
76- font-size: 1rem
77- color: #666;
78- background-color: #fff
74 + width: 30px
75 + height: 30px
7976
80- outline: none
81- white-space: nowrap
82- -webkit-user-select: none
83-
84- display: flex
77 + display: grid
8578 justify-content: center
79 + align-content: center
8680 }
8781
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 + }
92124 }
93125 }
94126
95- input.dat {
96- ::before {
97- content: '\f1e1'
98- }
99- }
100127 }
101128
102129 -expanded {
103130 textarea {
package-lock.jsonView
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