parent
b64268e71a
commit
4fab6a0211
6 changed files with 167 additions and 17 deletions
@ -1,3 +1,110 @@ |
|||||||
.App { |
*, :after, :before { |
||||||
text-align: center; |
box-sizing: border-box; |
||||||
|
} |
||||||
|
html, body { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.chat__body { |
||||||
|
font-family: sans; |
||||||
|
font-size: 26px; |
||||||
|
line-height: initial; |
||||||
|
color: initial; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
//background-image: url("https://raw.githubusercontent.com/telegramdesktop/tdesktop/dev/Telegram/Resources/art/bg_initial.jpg"); |
||||||
|
//background-position-y: -54px; |
||||||
|
//background-attachment: fixed; |
||||||
|
} |
||||||
|
|
||||||
|
.sticker { |
||||||
|
width: 500px; |
||||||
|
position: relative; |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.chathead { |
||||||
|
position: absolute; |
||||||
|
bottom: 12px; |
||||||
|
width: 64px; |
||||||
|
height: 64px; |
||||||
|
//float: left; |
||||||
|
background-image: url("./photomair.jpg"); |
||||||
|
background-size: contain; |
||||||
|
clip-path: circle(50% at 50% 50%); |
||||||
|
} |
||||||
|
|
||||||
|
.messages { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
flex-grow: 1; |
||||||
|
justify-content: flex-end; |
||||||
|
padding-left: 90px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.message { |
||||||
|
align-self: flex-start; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
min-height: 60px; |
||||||
|
max-width: 840px; |
||||||
|
|
||||||
|
background-color: #FFF; |
||||||
|
margin-bottom: 16px; |
||||||
|
border-radius: 12px; |
||||||
|
|
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
box-shadow: 0 4px 0px 0 rgba(160,172,182,.5); |
||||||
|
} |
||||||
|
|
||||||
|
.message.droplet:before { |
||||||
|
position: absolute; |
||||||
|
content: ''; |
||||||
|
bottom: 0; |
||||||
|
left: -16px; |
||||||
|
width: 24px; |
||||||
|
height: 2px; |
||||||
|
background-color: inherit; |
||||||
|
z-index: 1; |
||||||
|
box-shadow: 0px 2px 2px 2px rgba(160,172,182,.5); |
||||||
|
} |
||||||
|
.message.droplet:after { |
||||||
|
position: absolute; |
||||||
|
content: ''; |
||||||
|
bottom: 0; |
||||||
|
left: -20px; |
||||||
|
width: 32px; |
||||||
|
height: 20px; |
||||||
|
//clip-path: url(#left-droplet); |
||||||
|
clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%, 23% 85%, 40% 65%, 54% 33%); |
||||||
|
background-color: inherit; |
||||||
|
z-index: 1; |
||||||
|
box-shadow: 0 4px 2px 0 rgba(160,172,182,.5); |
||||||
|
} |
||||||
|
|
||||||
|
.message__text, |
||||||
|
.message__image__text .message__text__content { |
||||||
|
padding-top: 20px; |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
.message__time { |
||||||
|
display: inline-block; |
||||||
|
float: right; |
||||||
|
padding-top: 8px; |
||||||
|
padding-bottom: 8px; |
||||||
|
padding-left: 28px; |
||||||
|
text-align: right; |
||||||
|
font-size: 24px; |
||||||
|
color: #a0acb6; |
||||||
} |
} |
||||||
|
@ -1,13 +1,59 @@ |
|||||||
import React, { Component } from 'react'; |
import React, { Component } from 'react'; |
||||||
|
import domtoimage from 'dom-to-image'; |
||||||
|
import { Form, Input } from 'semantic-ui-react' |
||||||
import './App.css'; |
import './App.css'; |
||||||
|
|
||||||
|
|
||||||
class App extends Component { |
class App extends Component { |
||||||
render() { |
constructor(props) { |
||||||
return ( |
super(props); |
||||||
<div className="App"> |
|
||||||
</div> |
this.sticker = React.createRef(); |
||||||
); |
this.appBody = React.createRef(); |
||||||
} |
|
||||||
|
this.state = { |
||||||
|
messageText: 'What should I say?', |
||||||
|
messageTime: '12:34 PM', |
||||||
|
canvas: [] |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
domtoimage.toPng(this.sticker.current).then(dataUrl => { |
||||||
|
let img = new Image(); |
||||||
|
img.src = dataUrl; |
||||||
|
this.appBody.current.appendChild(img); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className='App' ref={this.appBody}> |
||||||
|
<section className='chat__body'> |
||||||
|
<div className='sticker' ref={this.sticker}> |
||||||
|
<div className='chathead' /> |
||||||
|
<div className='messages'> |
||||||
|
|
||||||
|
<div className='message droplet'> |
||||||
|
<div className='message__text'> |
||||||
|
<div className='message__text__content'>{this.state.messageText} |
||||||
|
<div className='message__time'>{this.state.messageTime}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<Form> |
||||||
|
<Form.Group widths='equal'> |
||||||
|
<Form.Field control={Input} label='First name' placeholder='First name' /> |
||||||
|
<Form.Field control={Input} label='Last name' placeholder='Last name' /> |
||||||
|
</Form.Group> |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
export default App; |
export default App; |
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 49 KiB |
Loading…
Reference in new issue