feat(composer): add popout icon and header styles

This commit is contained in:
Evan Morikawa 2015-03-10 18:14:20 -07:00
parent 6c6e1f2466
commit 0fb7e2c101
5 changed files with 18 additions and 24 deletions

View file

@ -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

View file

@ -76,7 +76,7 @@
} }
.tokenizing-field.to { .tokenizing-field.to {
padding-right: 60px; padding-right: 120px;
} }
input, textarea, div[contenteditable] { input, textarea, div[contenteditable] {

View file

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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);