From 7e15a343f36ce1af5591d581db69aeb7ddc2665c Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Wed, 1 May 2013 17:03:20 -0700 Subject: [PATCH] Add primary/secondary line classes to select list This will be a style that can be used by extending classes to provide two lines that don't wrap with color and padding. This is initially used by symbols view and fuzzy finder. --- .../fuzzy-finder/lib/fuzzy-finder-view.coffee | 6 +++--- .../fuzzy-finder/stylesheets/fuzzy-finder.less | 7 ------- .../symbols-view/lib/symbols-view.coffee | 6 +++--- .../symbols-view/spec/symbols-view-spec.coffee | 18 +++++++++--------- static/select-list.less | 10 ++++++++++ themes/atom-dark-ui/select-list.less | 4 ++-- 6 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee b/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee index 56d6074d8..72b8d03b2 100644 --- a/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee +++ b/src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee @@ -37,7 +37,7 @@ class FuzzyFinderView extends SelectList itemForElement: (path) -> $$ -> - @li => + @li class: 'two-lines', => if git? status = git.statuses[path] if git.isStatusNew(status) @@ -59,8 +59,8 @@ class FuzzyFinderView extends SelectList else typeClass = 'text-name' - @div fsUtils.base(path), class: "file #{typeClass}" - @div project.relativize(path), class: 'path' + @div fsUtils.base(path), class: "primary-line file #{typeClass}" + @div project.relativize(path), class: 'secondary-line path' openPath: (path) -> rootView.open(path, {@allowActiveEditorChange}) if path diff --git a/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less b/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less index c72afa89a..3371e6fcd 100644 --- a/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less +++ b/src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less @@ -5,9 +5,6 @@ } .path { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; color: rgba(0, 0, 0, 0.5); margin-left: 26px; font-size: .9em; @@ -37,10 +34,6 @@ } .file { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - &:before { font-family: 'Octicons Regular'; font-size: 16px; diff --git a/src/packages/symbols-view/lib/symbols-view.coffee b/src/packages/symbols-view/lib/symbols-view.coffee index b5ff72e57..9881d6a5f 100644 --- a/src/packages/symbols-view/lib/symbols-view.coffee +++ b/src/packages/symbols-view/lib/symbols-view.coffee @@ -25,13 +25,13 @@ class SymbolsView extends SelectList itemForElement: ({position, name, file}) -> $$ -> - @li => - @span name + @li class: 'two-lines', => + @div name, class: 'primary-line' if position text = "Line #{position.row + 1}" else text = fsUtils.base(file) - @div text, class: 'right function-details' + @div text, class: 'secondary-line' toggleFileSymbols: -> if @hasParent() diff --git a/src/packages/symbols-view/spec/symbols-view-spec.coffee b/src/packages/symbols-view/spec/symbols-view-spec.coffee index 8c43ecf8b..f8f87cdb5 100644 --- a/src/packages/symbols-view/spec/symbols-view-spec.coffee +++ b/src/packages/symbols-view/spec/symbols-view-spec.coffee @@ -30,10 +30,10 @@ 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('span')).toHaveText 'quicksort' - expect(symbolsView.list.children('li:first').find('.function-details')).toHaveText 'Line 1' - expect(symbolsView.list.children('li:last').find('span')).toHaveText 'quicksort.sort' - expect(symbolsView.list.children('li:last').find('.function-details')).toHaveText 'Line 2' + expect(symbolsView.list.children('li:first').find('.primary-line')).toHaveText 'quicksort' + expect(symbolsView.list.children('li:first').find('.secondary-line')).toHaveText 'Line 1' + expect(symbolsView.list.children('li:last').find('.primary-line')).toHaveText 'quicksort.sort' + expect(symbolsView.list.children('li:last').find('.secondary-line')).toHaveText 'Line 2' expect(symbolsView).not.toHaveClass "error" expect(symbolsView.error).not.toBeVisible() @@ -175,7 +175,7 @@ describe "SymbolsView", -> editor.trigger 'symbols-view:go-to-declaration' symbolsView = rootView.find('.symbols-view').view() expect(symbolsView.list.children('li').length).toBe 1 - expect(symbolsView.list.children('li:first').find('span')).toHaveText 'tagged.js' + expect(symbolsView.list.children('li:first').find('.primary-line')).toHaveText 'tagged.js' describe "project symbols", -> it "displays all tags", -> @@ -192,10 +192,10 @@ 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('span')).toHaveText 'callMeMaybe' - expect(symbolsView.list.children('li:first').find('.function-details')).toHaveText 'tagged.js' - expect(symbolsView.list.children('li:last').find('span')).toHaveText 'thisIsCrazy' - expect(symbolsView.list.children('li:last').find('.function-details')).toHaveText 'tagged.js' + expect(symbolsView.list.children('li:first').find('.primary-line')).toHaveText 'callMeMaybe' + expect(symbolsView.list.children('li:first').find('.secondary-line')).toHaveText 'tagged.js' + expect(symbolsView.list.children('li:last').find('.primary-line')).toHaveText 'thisIsCrazy' + expect(symbolsView.list.children('li:last').find('.secondary-line')).toHaveText 'tagged.js' expect(symbolsView).not.toHaveClass "error" expect(symbolsView.error).not.toBeVisible() diff --git a/static/select-list.less b/static/select-list.less index affeec33c..32ac015bf 100644 --- a/static/select-list.less +++ b/static/select-list.less @@ -19,6 +19,16 @@ li { padding: 10px; display: block; + + &.two-lines { + padding: 5px 10px 5px 10px; + } + + .primary-line, .secondary-line { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } } li:last-child { diff --git a/themes/atom-dark-ui/select-list.less b/themes/atom-dark-ui/select-list.less index 4af644466..8b854025e 100644 --- a/themes/atom-dark-ui/select-list.less +++ b/themes/atom-dark-ui/select-list.less @@ -36,7 +36,7 @@ } .right, - .path { + .secondary-line { color: #777; } @@ -45,7 +45,7 @@ } .selected .right, - .selected .path { + .selected .secondary-line { color: #ccc; }