parent
b64268e71a
commit
4fab6a0211
6 changed files with 167 additions and 17 deletions
@ -1,3 +1,110 @@ |
||||
.App { |
||||
text-align: center; |
||||
*, :after, :before { |
||||
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 domtoimage from 'dom-to-image'; |
||||
import { Form, Input } from 'semantic-ui-react' |
||||
import './App.css'; |
||||
|
||||
|
||||
class App extends Component { |
||||
render() { |
||||
return ( |
||||
<div className="App"> |
||||
</div> |
||||
); |
||||
} |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
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; |
||||
|
Before Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 49 KiB |
Loading…
Reference in new issue