Skip to content

emberjs.com styles #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gaurav0 merged 6 commits into from
Aug 4, 2015
Merged

emberjs.com styles #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89e0e6a
style topbar
miguelcobain Jul 29, 2015
350ea12
use local background image
miguelcobain Jul 29, 2015
3c1a655
update styles
miguelcobain Aug 4, 2015
01d2a1a
merge upstream
miguelcobain Aug 4, 2015
b966409
code header background-color
miguelcobain Aug 4, 2015
27dcba6
allow topbar shadow to be seen
miguelcobain Aug 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions app/components/title-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Ember from 'ember';
Copy link
Copy Markdown
Member

@joostdevries joostdevries Aug 4, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one last question: cant't the behaviour this provides also be done with CSS :focus?


export default Ember.Component.extend({
classNames: ['input-edit'],
classNameBindings: ['active'],

//proxy clicks to input focus
click() {
this.$('input').focus();
},

actions: {
inputFocusIn() {
this.set('active', true);
},

inputFocusOut() {
this.set('active', false);
}
}
Copy link
Copy Markdown
Contributor

@Gaurav0 Gaurav0 Aug 4, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of setting your own class with these actions, you could have used the :focus pseudo-class in CSS.

Copy link
Copy Markdown
Contributor Author

@miguelcobain miguelcobain Aug 4, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Gaurav0 @joostdevries

I tried to.
We want to style a parent element depending on a child state. I don't think we can we do that with css. Can we?

The focus "proxying" part I'm pretty sure that can't be done with css. Remember we now have a container that holds both the input and the pencil icon.

Copy link
Copy Markdown
Contributor Author

@miguelcobain miguelcobain Aug 4, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe possible with some tabindex trickery? Dunno.

Copy link
Copy Markdown
Contributor

@Gaurav0 Gaurav0 Aug 4, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the old issue; CSS does not have a :parent selector


});
52 changes: 27 additions & 25 deletions app/gist/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,38 +42,40 @@

<div class="title">
{{!-- {{#if isEditingDescription}} --}}
{{input value=model.description autoresize=true}}
{{title-input value=model.description}}
{{!-- {{model.description}} --}}
{{#if unsaved}}
<span class="test-unsaved-indicator">Unsaved</span>
{{else}}
<span>{{model.files.length}} files</span>
<a class="gist-link" href="{{model.htmlUrl}}" target="_blank">saved to Gist, rev {{model.currentRevision}}</a>
{{/if}}
<span class="indicator">
{{#if unsaved}}
<span class="test-unsaved-indicator">Unsaved</span>
{{else}}
<span>{{model.files.length}} files</span>
<a class="gist-link" href="{{model.htmlUrl}}" target="_blank">saved to Gist, rev {{model.currentRevision}}</a>
{{/if}}
</span>
</div>

<ul class="nav nav-pills user-menu">
{{#if session.isOpening}}
<li><a href='#'>Signing in...</a></li>
<li class="dropdown disabled signing-in">Signing in...</li>
{{else if session.isAuthenticated}}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{session.currentUser.login}} <b class="caret"></b>
<span class="user-avatar"><img src="{{session.currentUser.avatarUrl32}}" /></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a {{action 'signOut'}}>Sign out</a></li>
</ul>
</li>
<span class="user-avatar"><img src="{{session.currentUser.avatarUrl32}}" /></span>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{session.currentUser.login}} <b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a {{action 'signOut'}}>Sign out</a></li>
</ul>
</li>
{{else}}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Anonymous <b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a {{action 'signInViaGithub'}}>Sign in</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Anonymous <b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a {{action 'signInViaGithub'}}>Sign in</a></li>
</ul>
</li>
{{/if}}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Expand Down
Loading