new top menu

This commit is contained in:
Fernando San Julián 2015-08-10 16:38:21 +02:00
parent 8a3ee795d2
commit 4cc198179c
6 changed files with 204 additions and 84 deletions

View File

@ -32,6 +32,8 @@ manage_org = Manage Organizations
admin_panel = Admin Panel
account_settings = Account Settings
settings = Settings
your_profile = Your Profile
your_settings = Your Settings
news_feed = News Feed
pull_requests = Pull Requests

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -109,7 +109,10 @@ $(document).ready(function () {
// Semantic UI modules.
$('.dropdown').dropdown();
$('.jump.dropdown').dropdown({
action: 'hide'
action: 'hide',
onShow: function() {
$('.poping.up').popup('hide');
}
});
$('.slide.up.dropdown').dropdown({
transition: 'slide up'
@ -120,6 +123,13 @@ $(document).ready(function () {
showActivity: false
});
$('.poping.up').popup();
$('.top.menu .poping.up').popup({
onShow: function() {
if ( $('.top.menu .menu.transition').hasClass('visible') ) {
return false;
}
}
});
// Helpers.
$('.delete-button').click(function () {

View File

@ -25,10 +25,19 @@ img {
.column .menu {
margin-top: 0;
}
.brand {
float: left;
margin-top: 5px;
margin-right: 5px;
.top.menu a.item.brand {
padding-left: 0;
}
.brand .ui.mini.image {
width: 30px;
}
.top.menu a.item:hover,
.top.menu .dropdown.item:hover,
.top.menu .dropdown.item.active {
background-color: transparent;
}
.top.menu a.item:hover {
color: rgba(0,0,0,.45);
}
.head.link.item {
padding-right: 0!important;
@ -37,8 +46,8 @@ img {
margin-right: 5px;
}
}
.user.avatar {
padding: 0;
.avatar > .ui.image {
margin-right: 0;
}
.searchbox {
background-color: rgb(244, 244, 244)!important;
@ -114,6 +123,10 @@ footer {
.generate-img(@n, (@i + 1));
}
.octicon.icon {
font-family: octicons;
}
// Accessibility
.sr-only {
position: absolute;

View File

@ -43,16 +43,34 @@
</head>
<body>
<div class="full height">
<noscript>Please enable JavaScript in your browser!</noscript>
{{if not .PageIsInstall}}
<div class="following bar light">
<div class="ui container">
<div class="column">
<div class="ui secondary menu">
<img class="img-15 ui image brand" src="{{AppSubUrl}}/img/favicon.png">
<a class="view-ui item {{if .PageIsHome}}active{{end}}" href="{{AppSubUrl}}/">{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}</a>
<a class="view-ui item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore">{{.i18n.Tr "explore"}}</a>
<a class="view-ui item" target="_blank" href="http://gogs.io/docs">{{.i18n.Tr "help"}}</a>
<div class="ui top secondary menu">
<a class="item brand" href="{{AppSubUrl}}/">
<img class="ui mini image" src="{{AppSubUrl}}/img/favicon.png">
</a>
{{if .IsSigned}}
<a class="item{{if .PageIsDashboard}} active{{end}}" href="{{AppSubUrl}}/">{{.i18n.Tr "dashboard"}}</a>
{{else}}
<a class="item{{if .PageIsHome}} active{{end}}" href="{{AppSubUrl}}/">{{.i18n.Tr "home"}}</a>
{{end}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore">{{.i18n.Tr "explore"}}</a>
<!-- <div class="item">
<div class="ui icon input">
<input class="searchbox" type="text" placeholder="{{.i18n.Tr "search_project"}}">
@ -61,38 +79,115 @@
</div> -->
{{if .IsSigned}}
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.i18n.Tr "issues"}}</a>
<div class="right menu">
<a class="view-ui item user avatar poping up" href="{{AppSubUrl}}/{{.SignedUser.Name}}" data-content="{{.SignedUser.Name}}" data-variation="inverted">
<img class="img-15" src="{{.SignedUser.AvatarLink}}"/>
<span class="sr-only">{{.SignedUser.Name}}</span>
</a>
<div class="ui dropdown head link jump item">
<div class="ui dropdown head link jump item poping up" data-content="Create new..." data-variation="tiny inverted">
<span class="text">
<i class="octicon octicon-plus"></i>
<i class="dropdown icon"></i>
<i class="octicon octicon-triangle-down"></i>
</span>
<div class="menu">
<a class="item" href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
<a class="item" href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}</a>
<a class="item" href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}</a>
</div>
</div>
{{if .IsAdmin}}
<a class="view-ui item poping up {{if .PageIsAdmin}}active{{end}}" href="{{AppSubUrl}}/admin" data-content="{{.i18n.Tr "admin_panel"}}" data-variation="inverted"><i class="octicon icon settings"></i><span class="sr-only">{{.i18n.Tr "admin_panel"}}</span></a>
{{end}}
<a class="view-ui item poping up {{if .PageIsSettings}}active{{end}}" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "account_settings"}}" data-variation="inverted"><i class="octicon octicon-settings"></i><span class="sr-only">{{.i18n.Tr "account_settings"}}</span></a>
<a class="view-ui item poping up" href="{{AppSubUrl}}/user/logout" data-content="{{.i18n.Tr "sign_out"}}" data-variation="inverted"><i class="octicon octicon-sign-out"></i><span class="sr-only">{{.i18n.Tr "sign_out"}}</span></a>
</div>
<a class="item" href="{{AppSubUrl}}/repo/create">
<i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}
</a>
<a class="item" href="{{AppSubUrl}}/repo/migrate">
<i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}
</a>
<a class="item" href="{{AppSubUrl}}/org/create">
<i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}
</a>
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->
<div class="ui dropdown head link jump item poping up" tabindex="-1" data-content="User profile and more" data-variation="tiny inverted">
<span class="text avatar">
<img class="ui small rounded image" src="{{.SignedUser.AvatarLink}}">
<i class="octicon octicon-triangle-down" tabindex="-1"></i>
</span>
<div class="menu" tabindex="-1">
<div class="ui header">
Signed in as <strong>{{.SignedUser.Name}}</strong>
</div>
<div class="divider"></div>
<a class="item" href="{{AppSubUrl}}/{{.SignedUser.Name}}">
<i class="octicon icon octicon-person"></i>
{{.i18n.Tr "your_profile"}}<!-- Your profile -->
</a>
<a class="item" href="{{AppSubUrl}}/user/settings">
<i class="octicon icon octicon-settings"></i>
{{.i18n.Tr "your_settings"}}<!-- Your settings -->
</a>
<a class="item" target="_blank" href="http://gogs.io/docs" rel="noreferrer">
<i class="octicon icon octicon-question"></i>
{{.i18n.Tr "help"}}<!-- Help -->
</a>
{{if .IsAdmin}}
<div class="divider"></div>
<a class="item" href="{{AppSubUrl}}/admin">
<i class="icon settings"></i>
{{.i18n.Tr "admin_panel"}}<!-- Admin Panel -->
</a>
{{end}}
<div class="divider"></div>
<a class="item" href="{{AppSubUrl}}/user/logout">
<i class="octicon icon octicon-sign-out"></i>
{{.i18n.Tr "sign_out"}}<!-- Sign Out -->
</a>
</div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu -->
</div><!-- end signed user right menu -->
{{else}}
<div class="ui right floated secondary menu">
<a class="item" target="_blank" href="http://gogs.io/docs" rel="noreferrer">{{.i18n.Tr "help"}}</a>
<div class="right menu">
{{if .ShowRegistrationButton}}
<a class="view-ui item {{if .PageIsSignUp}}active{{end}}" href="{{AppSubUrl}}/user/sign_up"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
<i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}
</a>
{{end}}
<a class="view-ui item {{if .PageIsSignIn}}active{{end}}" href="{{AppSubUrl}}/user/login"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
</div>
<a class="item{{if .PageIsSignIn}} active{{end}}" href="{{AppSubUrl}}/user/login">
<i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}
</a>
</div><!-- end anonymous right menu -->
{{end}}
</div>
</div>
</div>
</div>
</div><!-- end top menu -->
</div><!-- end column -->
</div><!-- end container -->
</div><!-- end bar -->
{{end}}