Moved to octicon

This commit is contained in:
Antoine GIRARD
2015-02-20 00:59:54 +01:00
parent 6c8bcfc62e
commit eb3c522122
10 changed files with 141 additions and 100 deletions

View File

@@ -6,11 +6,11 @@
@import gitbucket.core.view.helpers._
<span class="small">
<a class="button-link@if(condition.state == "open"){ selected}" href="@condition.copy(state = "open").toURL">
<img src="@assets/common/images/status-open@(if(condition.state == "open"){"-active"}).png"/>
<i class="octicon octicon-issue-opened @(if(condition.state == "open"){"active"})"></i>
@openCount Open
</a>&nbsp;&nbsp;
<a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">
<img src="@assets/common/images/status-closed@(if(condition.state == "closed"){"-active"}).png"/>
<i class="octicon octicon-check @(if(condition.state == "closed"){"active"})"></i>
@closedCount Closed
</a>
</span>

View File

@@ -19,9 +19,9 @@
<tr>
<td style="padding-top: 15px; padding-bottom: 15px;">
@if(issue.isPullRequest){
<img src="@assets/common/images/pullreq-@(if(issue.closed) "closed" else "open").png"/>
<i class="octicon octicon-git-pull-request @(if(issue.closed) "closed" else "open")"></i>
} else {
<img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png"/>
<i class="octicon octicon-issue-@(if(issue.closed) "closed" else "opened")"></i>
}
<a href="@path/@issue.userName/@issue.repositoryName">@issue.userName/@issue.repositoryName</a>&nbsp;&#xFF65;
@if(issue.isPullRequest){
@@ -38,18 +38,19 @@
}
@if(commentCount > 0){
<a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count">
<img src="@assets/common/images/comment-active.png"> @commentCount
<i class="octicon octicon-comment active"></i> @commentCount
</a>
} else {
<a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count" style="color: silver;">
<img src="@assets/common/images/comment.png"> @commentCount
<i class="octicon octicon-comment"></i> @commentCount
</a>
}
</span>
<div class="small muted" style="margin-left: 20px; margin-top: 5px;">
#@issue.issueId opened by @user(issue.openedUserName, styleClass="username") @datetime(issue.registeredDate)
@milestone.map { milestone =>
<span style="margin: 20px;"><a href="@condition.copy(milestone = Some(Some(milestone))).toURL" class="username"><img src="@assets/common/images/milestone.png"> @milestone</a></span>
<span style="margin: 20px;"><a href="@condition.copy(milestone = Some(Some(milestone))).toURL" class="username"><i class="octicon octicon-milestone"></i>
@milestone</a></span>
}
</div>
</td>

View File

@@ -4,16 +4,16 @@
<div class="dashboard-nav">
<div class="container">
<a href="@path/" @if(active == ""){ class="active"}>
<img src="@assets/common/images/menu-feed.png">
<i class="octicon octicon-rss"></i>
News Feed
</a>
@if(loginAccount.isDefined){
<a href="@path/dashboard/pulls" @if(active == "pulls" ){ class="active"}>
<img src="@assets/common/images/menu-pulls.png">
<i class="octicon octicon-git-pull-request"></i>
Pull Requests
</a>
<a href="@path/dashboard/issues" @if(active == "issues"){ class="active"}>
<img src="@assets/common/images/menu-issues.png">
<i class="octicon octicon-issue-opened"></i>
Issues
</a>
}
@@ -27,6 +27,8 @@ div.dashboard-nav {
margin-bottom: 20px;
}
div.dashboard-nav a {
line-height: 10px;
margin-left: 20px;
@@ -36,8 +38,17 @@ div.dashboard-nav a {
color: #888;
}
div.dashboard-nav a:hover {
div.dashboard-nav .octicon{
width: 16px;
height: 16px;
font-size: 16px;
color: #888;
}
div.dashboard-nav a:hover,div.dashboard-nav a:hover .octicon {
text-decoration: none;
color: #333;
}
div.dashboard-nav a.active {

View File

@@ -8,20 +8,20 @@
@activities.map { activity =>
<div class="block">
@(activity.activityType match {
case "open_issue" => detailActivity(activity, "activity-issue.png")
case "comment_issue" => detailActivity(activity, "activity-comment.png")
case "comment_commit" => detailActivity(activity, "activity-comment.png")
case "close_issue" => detailActivity(activity, "activity-issue-close.png")
case "reopen_issue" => detailActivity(activity, "activity-issue-reopen.png")
case "open_pullreq" => detailActivity(activity, "activity-merge.png")
case "merge_pullreq" => detailActivity(activity, "activity-merge.png")
case "create_repository" => simpleActivity(activity, "activity-create-repository.png")
case "create_branch" => simpleActivity(activity, "activity-branch.png")
case "delete_branch" => simpleActivity(activity, "activity-delete.png")
case "create_tag" => simpleActivity(activity, "activity-tag.png")
case "delete_tag" => simpleActivity(activity, "activity-delete.png")
case "fork" => simpleActivity(activity, "activity-fork.png")
case "push" => customActivity(activity, "activity-commit.png"){
case "open_issue" => detailActivity(activity, "issue-opened")
case "comment_issue" => detailActivity(activity, "comment-discussion")
case "comment_commit" => detailActivity(activity, "comment-discussion")
case "close_issue" => detailActivity(activity, "issue-closed")
case "reopen_issue" => detailActivity(activity, "issue-reopened")
case "open_pullreq" => detailActivity(activity, "git-pull-request")
case "merge_pullreq" => detailActivity(activity, "git-merge")
case "create_repository" => simpleActivity(activity, "repo")
case "create_branch" => simpleActivity(activity, "git-branch")
case "delete_branch" => simpleActivity(activity, "circle-slash")
case "create_tag" => simpleActivity(activity, "tag")
case "delete_tag" => simpleActivity(activity, "circle-slash")
case "fork" => simpleActivity(activity, "repo-forked")
case "push" => customActivity(activity, "commit"){
<div class="small activity-message">
{activity.additionalInfo.get.split("\n").reverse.take(4).zipWithIndex.map{ case (commit, i) =>
if(i == 3){
@@ -61,7 +61,7 @@
}
@detailActivity(activity: gitbucket.core.model.Activity, image: String) = {
<div class="activity-icon-large"><img src="@assets/common/images/@image"/></div>
<div class="activity-icon-large"><i class="mega-octicon octicon-@image"></i></div>
<div class="activity-content">
<div class="muted small">@helper.html.datetimeago(activity.activityDate)</div>
<div class="strong">
@@ -74,8 +74,9 @@
</div>
}
@customActivity(activity: gitbucket.core.model.Activity, image: String)(additionalInfo: Any) = {
<div class="activity-icon-large"><img src="@assets/common/images/@image"/></div>
<div class="activity-icon-large"><i class="mega-octicon octicon-@image"></i></div>
<div class="activity-content">
<div class="muted small">@helper.html.datetimeago(activity.activityDate)</div>
<div class="strong">
@@ -87,7 +88,7 @@
}
@simpleActivity(activity: gitbucket.core.model.Activity, image: String) = {
<div class="activity-icon-small"><img src="@assets/common/images/@image"/></div>
<div class="activity-icon-small"><i class="octicon octicon-@image"></i></div>
<div class="activity-content">
<div>
@avatar(activity.activityUserName, 16)

View File

@@ -1,6 +1,6 @@
@(condition: => Boolean)
@if(condition){
<i class="icon-ok"></i>
<i class="octicon octicon-check active"></i>
} else {
<i class="icon-white"></i>
<i class="octicon"></i>
}

View File

@@ -3,11 +3,11 @@
@import context._
@import gitbucket.core.view.helpers._
@if(repository.repository.isPrivate){
<img src="@assets/common/images/repo_private@{if(large){"_lg"}}.png"/>
<i class="@{if(large){"mega-"}}octicon octicon-lock"></i>
} else {
@if(repository.repository.originUserName.isDefined){
<img src="@assets/common/images/repo_fork@{if(large){"_lg"}}.png"/>
<i class="@{if(large){"mega-"}}octicon octicon-repo-forked"></i>
} else {
<img src="@assets/common/images/repo_public@{if(large){"_lg"}}.png"/>
<i class="@{if(large){"mega-"}}octicon octicon-repo"></i>
}
}

View File

@@ -17,8 +17,7 @@
@if(condition.nonEmpty){
<div>
<a href="@IssuesService.IssueSearchCondition().toURL" class="header-link">
<img src="@assets/common/images/clear.png" class="header-icon"/>
<img src="@assets/common/images/clear_hover.png" class="header-icon-hover" style="display: none;"/>
<i class="octicon octicon-x" ></i>
<span class="strong">Clear current search query, filters, and sorts</span>
</a>
</div>
@@ -31,11 +30,11 @@
}
<span class="small" id="table-issues-control">
<a class="button-link@if(condition.state == "open"){ selected}" href="@condition.copy(state = "open").toURL">
<img src="@assets/common/images/status-open@(if(condition.state == "open"){"-active"}).png"/>
<i class="octicon octicon-issue-opened @(if(condition.state == "open"){"active"})"></i>
@openCount Open
</a>&nbsp;&nbsp;
<a class="button-link@if(condition.state == "closed"){ selected}" href="@condition.copy(state = "closed").toURL">
<img src="@assets/common/images/status-closed@(if(condition.state == "closed"){"-active"}).png"/>
<i class="octicon octicon-check @(if(condition.state == "closed"){"active"})"></i>
@closedCount Closed
</a>
<div class="pull-right">
@@ -182,7 +181,7 @@
@if(hasWritePermission){
<input type="checkbox" value="@issue.issueId"/>
}
<img src="@assets/common/images/issue-@(if(issue.closed) "closed" else "open").png" style="margin-right: 20px;"/>
<i class="octicon octicon-issue-@(if(issue.closed) "closed" else "opened")" style="margin-right: 3px;"></i>
@if(repository.isEmpty){
<a href="@path/@issue.userName/@issue.repositoryName">@issue.repositoryName</a>&nbsp;&#xFF65;
}
@@ -200,18 +199,19 @@
}
@if(commentCount > 0){
<a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count">
<img src="@assets/common/images/comment-active.png"> @commentCount
<i class="octicon octicon-comment active"></i> @commentCount
</a>
} else {
<a href="@path/@issue.userName/@issue.repositoryName/issues/@issue.issueId" class="issue-comment-count" style="color: silver;">
<img src="@assets/common/images/comment.png"> @commentCount
<i class="octicon octicon-comment"></i> @commentCount
</a>
}
</span>
<div class="small muted" style="margin-left: 40px; margin-top: 5px;">
#@issue.issueId opened @helper.html.datetimeago(issue.registeredDate) by @user(issue.openedUserName, styleClass="username")
@milestone.map { milestone =>
<span style="margin: 20px;"><a href="@condition.copy(milestone = Some(Some(milestone))).toURL" class="username"><img src="@assets/common/images/milestone.png"> @milestone</a></span>
<span style="margin: 20px;"><a href="@condition.copy(milestone = Some(Some(milestone))).toURL" class="username"><i class="octicon octicon-milestone"></i>
@milestone</a></span>
}
</div>
</td>

View File

@@ -17,6 +17,7 @@
<!--[if lt IE 9]>
<script src="@assets/vendors/bootstrap/js/html5shiv.js"></script>
<![endif]-->
<link href="@assets/vendors/octicons/octicons.css" rel="stylesheet">
<link href="@assets/vendors/datepicker/css/datepicker.css" rel="stylesheet">
<link href="@assets/vendors/colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
<link href="@assets/vendors/google-code-prettify/prettify.css" type="text/css" rel="stylesheet"/>
@@ -58,16 +59,16 @@
}
@if(loginAccount.isDefined){
<a href="@url(loginAccount.get.userName)" class="username menu">@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</a>
<a class="dropdown-toggle menu" data-toggle="dropdown" href="#"><i class="icon-plus"></i><span class="caret" style="vertical-align: middle;"></span></a>
<a class="dropdown-toggle menu" data-toggle="dropdown" href="#"><i class="octicon octicon-plus"></i><span class="caret" style="vertical-align: middle;"></span></a>
<ul class="dropdown-menu">
<li><a href="@path/new">New repository</a></li>
<li><a href="@path/groups/new">New group</a></li>
</ul>
<a href="@url(loginAccount.get.userName)/_edit" class="menu" data-toggle="tooltip" data-placement="bottom" title="Account settings"><i class="icon-user"></i></a>
<a href="@url(loginAccount.get.userName)/_edit" class="menu" data-toggle="tooltip" data-placement="bottom" title="Account settings"><i class="octicon octicon-gear"></i></a>
@if(loginAccount.get.isAdmin){
<a href="@path/admin/users" class="menu" data-toggle="tooltip" data-placement="bottom" title="Administration"><i class="icon-wrench"></i></a>
<a href="@path/admin/users" class="menu" data-toggle="tooltip" data-placement="bottom" title="Administration"><i class="octicon octicon-settings"></i></a>
}
<a href="@path/signout" class="menu-last" data-toggle="tooltip" data-placement="bottom" title="Sign out"><i class="icon-share-alt"></i></a>
<a href="@path/signout" class="menu-last" data-toggle="tooltip" data-placement="bottom" title="Sign out"><i class="octicon octicon-sign-out"></i></a>
} else {
<a href="@path/signin?redirect=@urlEncode(currentPath)" class="btn btn-last" id="signin">Sign in</a>
}

View File

@@ -9,16 +9,11 @@
@import context._
@import gitbucket.core.view.helpers._
@sidemenu(path: String, name: String, label: String, count: Int = 0) = {
@sidemenu(path: String, name: String, icon: String, label: String, count: Int = 0) = {
<li @if(active == name){class="active"} @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="@label"}>
<div class="@if(active == name){margin} else {gradient} pull-left"></div>
<a href="@url(repository)@path">
@if(active == name){
<img src="@assets/common/images/menu-@{name}-active.png">
} else {
<img src="@assets/common/images/menu-@{name}-active.png" class="menu-icon-active" style="display:none;">
<img src="@assets/common/images/menu-@{name}.png" class="menu-icon">
}
<i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i>
@if(expand){ @label}
@if(expand && count > 0){
<div class="pull-right"><span class="label">@count</span></div>
@@ -71,12 +66,12 @@
<div style="width: @if(expand){170px} else {40px};" class="pull-right">
<ul class="sidemenu">
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
@sidemenu("" , "code" , "Code")
@sidemenu("/issues", "issues", "Issues", repository.issueCount)
@sidemenu("/pulls" , "pulls" , "Pull Requests", repository.pullCount)
@sidemenu("/wiki" , "wiki" , "Wiki")
@sidemenu("" , "code" , "code" , "Code")
@sidemenu("/issues", "issues" , "issue-opened" , "Issues", repository.issueCount)
@sidemenu("/pulls" , "pulls" , "git-pull-request" , "Pull Requests", repository.pullCount)
@sidemenu("/wiki" , "wiki" , "book" , "Wiki")
@if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
@sidemenu("/settings", "settings", "Settings")
@sidemenu("/settings" , "settings" , "tools", "Settings")
}
<li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
</ul>
@@ -94,10 +89,10 @@
}
@id.map { id =>
<div style="margin-top: 10px;">
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-small" style="width: 147px;"><i class="icon-download-alt"></i>Download ZIP</a>
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-small" style="width: 147px;font-weight: bold;"><i class="octicon octicon-cloud-download"></i>Download ZIP</a>
</div>
<div style="margin-top: 10px;">
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-small" style="width: 147px;"><i class="icon-download-alt"></i>Download TAR.GZ</a>
<a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-small" style="width: 147px;font-weight: bold;"><i class="octicon octicon-cloud-download"></i>Download TAR.GZ</a>
</div>
}
}
@@ -112,22 +107,19 @@
<tr>
<td style="width: 33%; text-align: center;">
<a href="@url(repository)/commits/@encodeRefName(id.getOrElse(""))" class="header-link">
<img src="@assets/common/images/header-commits-hover.png" class="header-icon-hover" style="display: none;"/>
<img src="@assets/common/images/header-commits.png" class="header-icon"/>
<i class="octicon octicon-history"></i>
<strong>@repository.commitCount</strong> commits
</a>
</td>
<td style="width: 33%; text-align: center;">
<a href="@url(repository)/branches" class="header-link" class="header-link">
<img src="@assets/common/images/header-branches-hover.png" class="header-icon-hover" style="display: none;"/>
<img src="@assets/common/images/header-branches.png" class="header-icon"/>
<i class="octicon octicon-git-branch"></i>
<strong>@repository.branchList.length</strong> branches
</a>
</td>
<td style="width: 33%; text-align: center;">
<a href="@url(repository)/tags" class="header-link" class="header-link">
<img src="@assets/common/images/header-tags-hover.png" class="header-icon-hover" style="display: none;"/>
<img src="@assets/common/images/header-tags.png" class="header-icon"/>
<i class="octicon octicon-tag"></i>
<strong>@repository.tags.length</strong> releases
</a>
</td>
@@ -140,44 +132,21 @@
</div>
<script>
$(function(){
$('a.header-link').mouseover(function(e){
var target = e.target;
if(e.target.tagName != 'A'){
target = e.target.parentElement;
}
$(target).children('strong' ).css('color', '#0088cc');
$(target).children('img.header-icon-hover').css('display', 'inline');
$(target).children('img.header-icon' ).css('display', 'none');
});
$('a.header-link').mouseout(function(e){
var target = e.target;
if(e.target.tagName != 'A'){
target = e.target.parentElement;
}
$(target).children('strong' ).css('color', 'black');
$(target).children('img.header-icon-hover').css('display', 'none');
$(target).children('img.header-icon' ).css('display', 'inline');
});
$('ul.sidemenu a').mouseover(function(e){
var target = e.target;
if(e.target.tagName == "IMG"){
if(e.target.tagName == "I"){
target = e.target.parentElement;
}
$(target).prev ('div.gradient' ).css('border-left', '1px solid silver');
$(target).children('img.menu-icon-active').css('display', 'inline');
$(target).children('img.menu-icon' ).css('display', 'none');
});
$('ul.sidemenu a').mouseout(function(e){
var target = e.target;
if(e.target.tagName == "IMG"){
if(e.target.tagName == "I"){
target = e.target.parentElement;
}
$(target).prev ('div.gradient' ).css('border-left', '1px solid #eee');
$(target).children('img.menu-icon-active').css('display', 'none');
$(target).children('img.menu-icon' ).css('display', 'inline');
});
$('a[rel*=facebox]').facebox({

View File

@@ -36,7 +36,30 @@ h6 {
font-size: 18px;
}
.octicon,.mega-octicon{
color : #999;
width: 14px;
height: 14px;
/*font-size: 14px;*/
text-align: center;
}
.mega-octicon{
width: 32px;
height: 32px;
}
.octicon.active,.mega-octicon.active{
color : #333;
}
.octicon-cloud-download{
color: #333;
margin-right: 5px;
}
.head .octicon,.head .mega-octicon{
color : #BBB;
}
/* ======================================================================== */
/* Global Header */
/* ======================================================================== */
@@ -55,6 +78,10 @@ div.header-menu {
line-height: 40px;
}
div.header-menu .octicon{
color: #333;
}
div.header-menu input,
div.header-menu a.btn {
margin-top: 0px;
@@ -333,12 +360,6 @@ ul.sidemenu {
margin-left: 0px;
}
ul.sidemenu img {
width: 14px;
height: 14px;
}
ul.sidemenu a:hover{
text-decoration: none;
}
@@ -379,6 +400,9 @@ ul.sidemenu span.badge {
padding-right: 4px;
}
ul.sidemenu a:hover i.menu-icon, ul.sidemenu i.menu-icon-active {
color: #333;
}
/****************************************************************************/
/* Create Repository */
/****************************************************************************/
@@ -545,6 +569,10 @@ div.activity-content {
margin-left: 40px;
}
div[class^="activity-icon"] i{
color: #BBB;
}
/****************************************************************************/
/* Repository Viewer */
/****************************************************************************/
@@ -557,9 +585,8 @@ a.header-link {
font-size: 90%;
}
a.header-link img {
width: 14px;
height: 14px;
a.header-link i.octicon {
opacity: 0.5;
}
a.header-link strong {
@@ -568,10 +595,30 @@ a.header-link strong {
}
a.header-link:hover {
color: #0088cc;
color: #4183c4;
text-decoration: none;
}
a.header-link:hover i.octicon, a.header-link:hover strong{
color: inherit;
}
a.header-link i.octicon-x{
opacity: 1;
width: 20px;
height: 20px;
margin-right: 3px;
color: #FFF;
line-height: 20px;
background-color: #777;
border-radius: 3px;
}
a.header-link:hover i.octicon-x{
background-color: #4183c4;
color: #FFF;
}
table.blobview {
table-layout: fixed;
}
@@ -770,6 +817,9 @@ a.button-link {
color: gray;
}
a.button-link i {
color: inherit;
}
a.selected {
font-weight: bold;
color: black;
@@ -785,6 +835,14 @@ table.table-issues {
margin-top: 12px;
}
table.table-issues td .octicon-issue-opened,table.table-issues td .octicon-git-pull-request .open {
color: #6CC644;
}
table.table-issues td .octicon-issue-closed,table.table-issues td .octicon-git-pull-request .closed{
color : #BD2C00;;
}
a.issue-title {
color: #333;
font-weight: bold;