Merge pull request #227 from github/cut-dat-fat

Reusable styles for common UI elements
This commit is contained in:
Justin Palmer
2013-02-04 15:39:22 -08:00
57 changed files with 613 additions and 1187 deletions

View File

@@ -4,7 +4,7 @@ SelectList = require 'select-list'
module.exports =
class GrammarView extends SelectList
@viewClass: -> "#{super} grammar-view"
@viewClass: -> "#{super} grammar-view from-top overlay"
filterKey: 'name'
@@ -12,7 +12,6 @@ class GrammarView extends SelectList
@currentGrammar = @editor.getGrammar()
@path = @editor.getPath()
@autoDetect = name: 'Auto Detect'
requireStylesheet 'grammar-view.css'
@command 'editor:select-grammar', =>
@cancel()
false

View File

@@ -109,7 +109,7 @@ class SelectList extends View
scrollToItem: (item) ->
scrollTop = @list.scrollTop()
desiredTop = item.position().top + scrollTop
desiredBottom = desiredTop + item.height()
desiredBottom = desiredTop + item.outerHeight()
if desiredTop < scrollTop
@list.scrollTop(desiredTop)

View File

@@ -114,6 +114,14 @@ window.startup()
requireStylesheet 'reset.css'
requireStylesheet 'atom.css'
requireStylesheet 'tabs.css'
requireStylesheet 'tree-view.css'
requireStylesheet 'status-bar.css'
requireStylesheet 'command-panel.css'
requireStylesheet 'fuzzy-finder.css'
requireStylesheet 'overlay.css'
requireStylesheet 'popover-list.css'
requireStylesheet 'notification.css'
if nativeStylesheetPath = require.resolve("#{platform}.css")
requireStylesheet(nativeStylesheetPath)

View File

@@ -8,7 +8,7 @@ class AutocompleteView extends SelectList
rootView.eachEditor (editor) ->
new AutocompleteView(editor) if editor.attached and not editor.mini
@viewClass: -> "autocomplete #{super}"
@viewClass: -> "autocomplete #{super} popover-list"
editor: null
currentBuffer: null
@@ -106,7 +106,6 @@ class AutocompleteView extends SelectList
setPosition: ->
{ left, top } = @editor.pixelPositionForScreenPosition(@originalCursorPosition)
height = @outerHeight()
potentialTop = top + @editor.lineHeight
potentialBottom = potentialTop - @editor.scrollTop() + height

View File

@@ -23,8 +23,8 @@ describe "CommandPalette", ->
eventLi = palette.list.children("[data-event-name='#{eventName}']")
if description
expect(eventLi).toExist()
expect(eventLi.find('.event-name')).toHaveText(eventName)
expect(eventLi.find('.event-description')).toHaveText(description)
expect(eventLi.find('.label')).toHaveText(description)
expect(eventLi.find('.label').attr('title')).toBe(eventName)
for binding in keyBindings[eventName] ? []
expect(eventLi.find(".key-binding:contains(#{binding})")).toExist()
else
@@ -39,8 +39,8 @@ describe "CommandPalette", ->
description = editorEvents[eventName] unless description
if description
expect(eventLi).toExist()
expect(eventLi.find('.event-name')).toHaveText(eventName)
expect(eventLi.find('.event-description')).toHaveText(description)
expect(eventLi.find('.label')).toHaveText(description)
expect(eventLi.find('.label').attr('title')).toBe(eventName)
else
expect(eventLi).not.toExist()

View File

@@ -9,7 +9,7 @@ class CommandPaletteView extends SelectList
@instance = new CommandPaletteView(rootView)
@viewClass: ->
"#{super} command-palette"
"#{super} command-palette overlay from-top"
filterKey: 'eventDescription'
@@ -41,12 +41,10 @@ class CommandPaletteView extends SelectList
keyBindings = @keyBindings
$$ ->
@li class: 'event', 'data-event-name': eventName, =>
@div eventDescription, class: 'event-description'
@span eventDescription, class: 'label', title: eventName
@div class: 'right', =>
@div eventName, class: 'event-name'
for binding in keyBindings[eventName] ? []
@div binding, class: 'key-binding'
@div class: 'clear-float'
@kbd binding, class: 'key-binding'
confirmed: ({eventName}) ->
@cancel()

View File

@@ -408,7 +408,7 @@ describe "CommandPanel", ->
expect(previewList.scrollBottom()).toBeCloseTo previewList.prop('scrollHeight'), -1
previewList.trigger 'core:move-down'
_.times previewList.getOperations().length, -> previewList.trigger 'core:move-up'
expect(previewList.scrollTop()).toBe 0
it "doesn't bubble up the event and the command panel text doesn't change", ->

View File

@@ -13,7 +13,7 @@ class FuzzyFinderView extends SelectList
@instance = new FuzzyFinderView(rootView)
@viewClass: ->
[super, 'fuzzy-finder'].join(' ')
[super, 'fuzzy-finder', 'overlay', 'from-top'].join(' ')
allowActiveEditorChange: null
maxItems: 10
@@ -47,9 +47,9 @@ class FuzzyFinderView extends SelectList
typeClass = 'pdf-name'
else
typeClass = 'text-name'
@span fs.base(path), class: "file #{typeClass}"
@span fs.base(path), class: "file label #{typeClass}"
if folder = fs.directory(path)
@span "- #{folder}/", class: 'directory'
@span " - #{folder}/", class: 'directory'
openPath: (path) ->
@rootView.open(path, {@allowActiveEditorChange}) if path

View File

@@ -22,10 +22,10 @@ class Gists
success: (response) =>
pasteboard.write(response.html_url)
notification = $$ ->
@div class: 'gist-notification', =>
@div class: 'message-area', =>
@span "Gist #{response.id} created", class: 'message'
@br()
@span "The url is on your clipboard", class: 'clipboard'
@div class: 'notification', =>
@span class: 'icon icon-gist mega-icon'
@div class: 'content', =>
@h3 "Gist #{response.id} created", class: 'title'
@p "The url is on your clipboard", class: 'message'
@rootView.append(notification.hide())
notification.fadeIn().delay(2000).fadeOut(complete: -> $(this).remove())

View File

@@ -44,8 +44,8 @@ describe "Gists package", ->
expect(pasteboard.read()[0]).toBe 'https://gist.github.com/1'
it "flashes that the Gist was created", ->
expect(rootView.find('.gist-notification')).toExist()
expect(rootView.find('.gist-notification .message').text()).toBe 'Gist 1 created'
expect(rootView.find('.notification')).toExist()
expect(rootView.find('.notification .title').text()).toBe 'Gist 1 created'
advanceClock(2000)
expect(rootView.find('.gist-notification')).not.toExist()

View File

@@ -9,7 +9,7 @@ class GoToLineView extends View
@activate: (rootView) -> new GoToLineView(rootView)
@content: ->
@div class: 'go-to-line', =>
@div class: 'go-to-line overlay from-top mini', =>
@subview 'miniEditor', new Editor(mini: true)
@div class: 'message', outlet: 'message'

View File

@@ -30,9 +30,9 @@ describe "SymbolsView", ->
expect(symbolsView.find('.loading')).toBeEmpty()
expect(rootView.find('.symbols-view')).toExist()
expect(symbolsView.list.children('li').length).toBe 2
expect(symbolsView.list.children('li:first').find('.function-name')).toHaveText 'quicksort'
expect(symbolsView.list.children('li:first').find('.label')).toHaveText 'quicksort'
expect(symbolsView.list.children('li:first').find('.function-details')).toHaveText 'Line 1'
expect(symbolsView.list.children('li:last').find('.function-name')).toHaveText 'quicksort.sort'
expect(symbolsView.list.children('li:last').find('.label')).toHaveText 'quicksort.sort'
expect(symbolsView.list.children('li:last').find('.function-details')).toHaveText 'Line 2'
expect(symbolsView).not.toHaveClass "error"
expect(symbolsView.error).not.toBeVisible()
@@ -165,7 +165,7 @@ describe "SymbolsView", ->
editor.setCursorBufferPosition([8,14])
editor.trigger 'symbols-view:go-to-declaration'
expect(symbolsView.list.children('li').length).toBe 1
expect(symbolsView.list.children('li:first').find('.function-name')).toHaveText 'tagged.js'
expect(symbolsView.list.children('li:first').find('.label')).toHaveText 'tagged.js'
describe "project symbols", ->
it "displays all tags", ->
@@ -181,9 +181,9 @@ describe "SymbolsView", ->
expect(symbolsView.find('.loading')).toBeEmpty()
expect(rootView.find('.symbols-view')).toExist()
expect(symbolsView.list.children('li').length).toBe 4
expect(symbolsView.list.children('li:first').find('.function-name')).toHaveText 'callMeMaybe'
expect(symbolsView.list.children('li:first').find('.label')).toHaveText 'callMeMaybe'
expect(symbolsView.list.children('li:first').find('.function-details')).toHaveText 'tagged.js'
expect(symbolsView.list.children('li:last').find('.function-name')).toHaveText 'thisIsCrazy'
expect(symbolsView.list.children('li:last').find('.label')).toHaveText 'thisIsCrazy'
expect(symbolsView.list.children('li:last').find('.function-details')).toHaveText 'tagged.js'
expect(symbolsView).not.toHaveClass "error"
expect(symbolsView.error).not.toBeVisible()

View File

@@ -12,7 +12,7 @@ class SymbolsView extends SelectList
@activate: (rootView) ->
@instance = new SymbolsView(rootView)
@viewClass: -> "#{super} symbols-view"
@viewClass: -> "#{super} symbols-view overlay from-top"
filterKey: 'name'
@@ -22,14 +22,13 @@ class SymbolsView extends SelectList
itemForElement: ({position, name, file}) ->
$$ ->
@li =>
@div name, class: 'function-name'
@div name, class: 'label'
@div class: 'right', =>
if position
text = "Line #{position.row + 1}"
else
text = fs.base(file)
@div text, class: 'function-details'
@div class: 'clear-float'
toggleFileSymbols: ->
if @hasParent()