mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-09-06 04:35:30 +08:00
feat(composer): add popout icon and header styles
This commit is contained in:
parent
6c6e1f2466
commit
0fb7e2c101
5 changed files with 18 additions and 24 deletions
|
@ -118,19 +118,13 @@ ComposerView = React.createClass
|
||||||
<div className="composer-action-bar-content">
|
<div className="composer-action-bar-content">
|
||||||
<button className="btn btn-toolbar pull-right btn-trash"
|
<button className="btn btn-toolbar pull-right btn-trash"
|
||||||
onClick={@_destroyDraft}><RetinaImg name="toolbar-trash.png" /></button>
|
onClick={@_destroyDraft}><RetinaImg name="toolbar-trash.png" /></button>
|
||||||
|
|
||||||
<button className="btn btn-toolbar pull-right btn-attach"
|
<button className="btn btn-toolbar pull-right btn-attach"
|
||||||
onClick={@_attachFile}><RetinaImg name="toolbar-attach.png"/></button>
|
onClick={@_attachFile}><RetinaImg name="toolbar-attach.png"/></button>
|
||||||
|
|
||||||
<div className="text-actions pull-right">
|
<button className="btn btn-toolbar pull-right btn-popout"
|
||||||
<span className="header-action"
|
|
||||||
style={display: (@props.mode is "fullwindow") and 'none' or 'initial'}
|
style={display: (@props.mode is "fullwindow") and 'none' or 'initial'}
|
||||||
onClick={@_popoutComposer}>Popout</span>
|
onClick={@_popoutComposer}><RetinaImg name="toolbar-popout.png"/></button>
|
||||||
<br/>
|
|
||||||
<span className="header-action"
|
|
||||||
style={display: @state.showsubject and 'none' or 'initial'}
|
|
||||||
onClick={=> @setState {showsubject: true}}>Change Subject</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button className="btn btn-toolbar btn-send"
|
<button className="btn btn-toolbar btn-send"
|
||||||
tabIndex="110"
|
tabIndex="110"
|
||||||
|
@ -149,6 +143,10 @@ ComposerView = React.createClass
|
||||||
<span className="header-action"
|
<span className="header-action"
|
||||||
style={display: @state.showbcc and 'none' or 'inline'}
|
style={display: @state.showbcc and 'none' or 'inline'}
|
||||||
onClick={=> @setState {showbcc: true}}>Bcc</span>
|
onClick={=> @setState {showbcc: true}}>Bcc</span>
|
||||||
|
|
||||||
|
<span className="header-action"
|
||||||
|
style={display: @state.showsubject and 'none' or 'initial'}
|
||||||
|
onClick={=> @setState {showsubject: true}}>Subject</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ParticipantsTextField
|
<ParticipantsTextField
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tokenizing-field.to {
|
.tokenizing-field.to {
|
||||||
padding-right: 60px;
|
padding-right: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, textarea, div[contenteditable] {
|
input, textarea, div[contenteditable] {
|
||||||
|
|
|
@ -38,6 +38,7 @@ FileUploadStore = Reflux.createStore
|
||||||
|
|
||||||
# When the dialog closes, it triggers `Actions.pathsToOpen`
|
# When the dialog closes, it triggers `Actions.pathsToOpen`
|
||||||
atom.showOpenDialog {properties: ['openFile', 'multiSelections']}, (pathsToOpen) ->
|
atom.showOpenDialog {properties: ['openFile', 'multiSelections']}, (pathsToOpen) ->
|
||||||
|
return if not pathsToOpen?
|
||||||
pathsToOpen = [pathsToOpen] if _.isString(pathsToOpen)
|
pathsToOpen = [pathsToOpen] if _.isString(pathsToOpen)
|
||||||
for path in pathsToOpen
|
for path in pathsToOpen
|
||||||
# When this task runs, we expect to hear `uploadStateChanged` actions.
|
# When this task runs, we expect to hear `uploadStateChanged` actions.
|
||||||
|
|
BIN
static/images/toolbar/toolbar-popout@2x.png
Normal file
BIN
static/images/toolbar/toolbar-popout@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
|
@ -9,8 +9,7 @@
|
||||||
// Headings
|
// Headings
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6 {
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
||||||
font-family: @font-family-heading;
|
font-family: @font-family-heading;
|
||||||
line-height: @line-height-heading;
|
line-height: @line-height-heading;
|
||||||
color: @text-color-heading;
|
color: @text-color-heading;
|
||||||
|
@ -21,22 +20,20 @@ h1, h2, h3, h4, h5, h6,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, .h1 {
|
h1 {
|
||||||
font-size: @font-size-h1;
|
font-size: @font-size-h1;
|
||||||
font-weight: @font-weight-semi-bold;
|
font-weight: @font-weight-semi-bold;
|
||||||
}
|
}
|
||||||
h2, .h2 {
|
h2 {
|
||||||
font-size: @font-size-h2;
|
font-size: @font-size-h2;
|
||||||
font-weight: @font-weight-blond;
|
font-weight: @font-weight-blond;
|
||||||
}
|
}
|
||||||
h3, .h3 { font-size: @font-size-h3; }
|
h3 { font-size: @font-size-h3; }
|
||||||
h4, .h4 { font-size: @font-size-h4; }
|
h4 { font-size: @font-size-h4; }
|
||||||
h5, .h5 { font-size: @font-size-h5; }
|
h5 { font-size: @font-size-h5; }
|
||||||
h6, .h6 { font-size: @font-size-h6; }
|
h6 { font-size: @font-size-h6; }
|
||||||
|
|
||||||
h1, .h1,
|
h1, h2, h3{
|
||||||
h2, .h2,
|
|
||||||
h3, .h3 {
|
|
||||||
margin-top: @line-height-computed;
|
margin-top: @line-height-computed;
|
||||||
margin-bottom: (@line-height-computed / 2);
|
margin-bottom: (@line-height-computed / 2);
|
||||||
|
|
||||||
|
@ -45,9 +42,7 @@ h3, .h3 {
|
||||||
font-size: 65%;
|
font-size: 65%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h4, .h4,
|
h4, h5, h6 {
|
||||||
h5, .h5,
|
|
||||||
h6, .h6 {
|
|
||||||
margin-top: (@line-height-computed / 2);
|
margin-top: (@line-height-computed / 2);
|
||||||
margin-bottom: (@line-height-computed / 2);
|
margin-bottom: (@line-height-computed / 2);
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue