Commit @71c0caa4cf417fb88647dcad834febc98afae543

[Notice] Announcing the End of Demo Server [Read me]

Jihan Kim 2013-05-10

change overview history UI

@71c0caa4cf417fb88647dcad834febc98afae543

8859bcd

71c0caa

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


                                 .user-thumb-wrap {
                                     width: 18px;
                                     height: 18px;
-                                    .border-radius(2px);
                                     margin-right: 10px;
                                     display: block;
                                     float: left;
+                                    .border-radius(2px);
                                     img {
                                         vertical-align: top;
                                     }

                 width:260px; height:188px;
                 background-repeat:no-repeat;
                 background-size:cover;
+                background-position:center;
                 .border-radius(10px);
                 .inline-block;
             }

8859bcd

71c0caa

app/models/History.java

--- app/models/History.java

+++ app/models/History.java


 
     private String who;
     private String userPageUrl;
+    private String userAvatarUrl;
     private Date when;
     private String where;
     private String what;

         this.userPageUrl = userPageUrl;
     }
 
+    public void setUserAvatarUrl(String userAvatarUrl){
+    	this.userAvatarUrl = userAvatarUrl;
+    }
+    
+    public String getUserAvatarUrl(){
+    	return userAvatarUrl;
+    }
+    
     public static List<History> makeHistory(String userName, Project project, List<Commit> commits, List<Issue> issues, List<Posting> postings) {
         List<History> histories = new ArrayList<History>();
         if(commits != null) {

             issueHistory.setWhen(issue.createdDate);
             issueHistory.setWhere(project.name);
             issueHistory.setWhat("issue");
-            issueHistory.setHow(issue.title);
+            issueHistory.setHow("#" + issue.id + " " + issue.title);
             issueHistory.setUrl("/" + userName + "/" + project.name + "/issue/" + issue.id);
             histories.add(issueHistory);
         }

     private static void setUserPageUrl(History history, User user) {
         history.setWho(user.name);
         history.setUserPageUrl("/" + user.loginId);
+        history.setUserAvatarUrl(user.avatarUrl);
     }
 }

8859bcd

71c0caa

app/views/project/overview.scala.html

--- app/views/project/overview.scala.html

+++ app/views/project/overview.scala.html


-
 @(message: String, project: Project, histories: List[models.History] )
 
 @import utils.JodaDateUtil._

 		}
 	}
 }
+@userPageUrlOnHistory(history:History) = @{
+	if(history.getUserPageUrl() != null) {
+		history.getUserPageUrl()
+	} else {
+		"#"
+	}
+}
+@userAvatarUrlOnHistory(history:History) = @{
+	if(history.getUserAvatarUrl() != null){
+		history.getUserAvatarUrl()
+	} else {
+		routes.Assets.at("images/default-avatar-64.png")
+	}
+}
+@makeHistoryWho(history:History)  = {<a href="@userPageUrlOnHistory(history)" class="actor">@history.getWho()</a>}
+@makeHistoryHow(history:History)  = {<a href="@history.getUrl()"><strong class="whereis">@history.getHow()</strong></a> }
+@makeHistoryWhat(history:History) = {@Messages("project.history.type." + history.getWhat())}
 
 @main(message, project, utils.MenuType.PROJECT_HOME) {
 <div class="page">

             <header>
                 <h3>@Messages("project.info")</h3>
                 @if(isAllowed(UserApp.currentUser(), project.tagsAsResource(), Operation.UPDATE)){
-                <button type="button" class="btn btn-small" data-toggle="button" id="tag-editor-toggle">@Messages("button.edit")</button>
+                <button type="button" class="nbtn small" data-toggle="button" id="tag-editor-toggle">@Messages("button.edit")</button>
                 }
             </header>
             <ul class="infos" id="tags">

             </ul>
             <ul>
                 <input name="newTag" type="text" class="text hidden" style="margin-bottom:0px;" data-provider="typeahead" autocomplete="off"/>
-                <button id="addTag" type="button" class="btn-transparent n-btn med gray hidden">@Messages("button.add")</button>
+                <button id="addTag" type="button" class="nbtn medium hidden">@Messages("button.add")</button>
             </ul>
         </div>
         <div class="inner member-info">

         </div>
     </div>
 
-    @if(histories.size > 0) {
-        <table class="table table-hover">
-            <tbody>
-                @for(history <- histories.iterator()) {
-                    <tr>
-                        <td>@agoString(ago(history.getWhen()))</td>
-                        <td>
-                            @if(history.getUserPageUrl() != null) {
-                                <a href="@history.getUserPageUrl()">@history.getWho()</a>
-                            } else {
-                                @history.getWho()
-                            }
-                        </td>
-                        <td>@history.getWhat()</td>
-                        <td><a href="@history.getUrl()">@history.getHow()</a></td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    }
+	@if(histories.size > 0) {
+	<div class="content-container">
+		<div class="main-stream" style="width:100%;">
+			<ul class="activity-streams unstyled">
+				@for(history <- histories.iterator()) {
+				<li class="activity-stream" style="padding:10px 0;">
+					<a href="@userPageUrlOnHistory(history)" class="avatar-wrap pull-left" style="margin-right:15px;">
+						<img src="@userAvatarUrlOnHistory(history)" width="32" height="32">
+					</a>
 
+					<div class="activity-desc">
+						<p class="header-text" style="margin-bottom:5px;">
+							@Html(Messages("project.history.item",
+								makeHistoryWho(history),
+								makeHistoryWhat(history), 
+								makeHistoryHow(history)
+							))
+						</p>
+						<p class="others" style="padding-left:0;">
+							<span class="date" style="margin-left:0;">@agoString(ago(history.getWhen()))</span>
+						</p>
+					</div>
+				</li>
+				}
+			</ul>
+		</div>
+	</div>
+	}
+	
     <div class="bubble-wrap dark-gray readme">
         @if(project.readme == null) {
             <p class="default">

8859bcd

71c0caa

conf/messages.ko

--- conf/messages.ko

+++ conf/messages.ko


 project.license = 라이센스
 project.codeLanguage = 프로그래밍 언어
 
+# project.history.item: {0}=누가,{1}=무엇을,{2}=어떻게
+project.history.item = {0}님이 {1} {2}  
+project.history.type.commit = 코드를 커밋했습니다
+project.history.type.issue = 새 이슈를 등록했습니다
+project.history.type.post = 새 글을 작성했습니다
+
 #Site
 site.sidebar = 사이트 관리
 site.sidebar.setting = 설정

8859bcd

71c0caa

public/javascripts/common/hive.ui.Typeahead.js

--- public/javascripts/common/hive.ui.Typeahead.js

+++ public/javascripts/common/hive.ui.Typeahead.js


 		function _initVar(htOptions){
 			htVar.sActionURL = htOptions.sActionURL || "/users";
 			htVar.rxContentRange = /items\s+([0-9]+)\/([0-9]+)/;
-            htVar.htData = htOptions.htData;
+            htVar.htData = htOptions.htData || {};
 		}
 		
 		/**

 		function _initElement(sQuery){
 			htElement.welInput = $(sQuery);
 			htElement.welInput.typeahead({
-                source: _onTypeAhead,
-                minLength: 0,
-                items: htVar.htData.limit || 8
+                "source": _onTypeAhead,
+                "minLength": 0,
+                "items": htVar.htData.limit || 8
             });
 		}
 		

             	$hive.sendForm({
             		"sURL"		: htVar.sActionURL,
             		"htOptForm"	: {"method":"get"},
-			"htData"	: htVar.htData,
+            		"htData"	: htVar.htData,
                     "sDataType" : "json",
             		"fOnLoad"	: function(oData, oStatus, oXHR){
             			var sContentRange = oXHR.getResponseHeader('Content-Range');

8859bcd

71c0caa

public/javascripts/service/hive.project.Home.js

--- public/javascripts/service/hive.project.Home.js

+++ public/javascripts/service/hive.project.Home.js


                     _showTagEditor();
                 }
             });
+            
             new hive.ui.Typeahead(htElement.welInputAddTag, {
-		"sActionURL": htVar.sURLTags,
+            	"sActionURL": htVar.sURLTags,
                 "htData": {
                     "context": "PROJECT_TAGGING_TYPEAHEAD",
                     "project_id": htVar.nProjectId,

 		});
             };
 
-            var welDeleteButton = $('<a>')
-                .attr('href', 'javascript:void(0)')
-                .text(' x')
-                .click(fOnClickDelete);
-
-            var welTag = $('<span>')
-                .text(sName)
-                .addClass('label')
-		.append(welDeleteButton);
+            var welDeleteButton = $('<a href="javascript:void(0)">&times;</a>').click(fOnClickDelete);
+            var welTag = $('<span class="label">' + sName + '</span>').append(welDeleteButton);
 
             welTag.setRemovability = function(bFlag) {
                 if (bFlag === true) {

                 if (waChildren.length > 0) {
                     waChildren.append(_createTag(sInstanceId, htTag.name));
                 } else {
-                    newCategory = $('<li>')
-                        .addClass('info')
+                    newCategory = $('<li class="info">')
                         .attr('category', htTag.category)
                         .append($('<strong>').text(htTag.category + ' : '))
                         .append(_createTag(sInstanceId, htTag.name));

Add a comment

Open 0
Closed 0

List

...	...	@@ -603,10 +603,10 @@
603	603	.user-thumb-wrap {
604	604	width: 18px;
605	605	height: 18px;
606		- .border-radius(2px);
607	606	margin-right: 10px;
608	607	display: block;
609	608	float: left;
	609	+ .border-radius(2px);
610	610	img {
611	611	vertical-align: top;
612	612	}
...	...	@@ -1450,6 +1450,7 @@
1450	1450	width:260px; height:188px;
1451	1451	background-repeat:no-repeat;
1452	1452	background-size:cover;
	1453	+ background-position:center;
1453	1454	.border-radius(10px);
1454	1455	.inline-block;
1455	1456	}

...	...	@@ -11,6 +11,7 @@
11	11
12	12	private String who;
13	13	private String userPageUrl;
	14	+ private String userAvatarUrl;
14	15	private Date when;
15	16	private String where;
16	17	private String what;
...	...	@@ -73,6 +74,14 @@
73	74	this.userPageUrl = userPageUrl;
74	75	}
75	76
	77	+ public void setUserAvatarUrl(String userAvatarUrl){
	78	+ this.userAvatarUrl = userAvatarUrl;
	79	+ }
	80	+
	81	+ public String getUserAvatarUrl(){
	82	+ return userAvatarUrl;
	83	+ }
	84	+
76	85	public static List<History> makeHistory(String userName, Project project, List<Commit> commits, List<Issue> issues, List<Posting> postings) {
77	86	List<History> histories = new ArrayList<History>();
78	87	if(commits != null) {
...	...	@@ -101,7 +110,7 @@
101	110	issueHistory.setWhen(issue.createdDate);
102	111	issueHistory.setWhere(project.name);
103	112	issueHistory.setWhat("issue");
104		- issueHistory.setHow(issue.title);
	113	+ issueHistory.setHow("#" + issue.id + " " + issue.title);
105	114	issueHistory.setUrl("/" + userName + "/" + project.name + "/issue/" + issue.id);
106	115	histories.add(issueHistory);
107	116	}
...	...	@@ -132,5 +141,6 @@
132	141	private static void setUserPageUrl(History history, User user) {
133	142	history.setWho(user.name);
134	143	history.setUserPageUrl("/" + user.loginId);
	144	+ history.setUserAvatarUrl(user.avatarUrl);
135	145	}
136	146	}

...	...	@@ -289,6 +289,12 @@
289	289	project.license = 라이센스
290	290	project.codeLanguage = 프로그래밍 언어
291	291
	292	+# project.history.item: {0}=누가,{1}=무엇을,{2}=어떻게
	293	+project.history.item = {0}님이 {1} {2}
	294	+project.history.type.commit = 코드를 커밋했습니다
	295	+project.history.type.issue = 새 이슈를 등록했습니다
	296	+project.history.type.post = 새 글을 작성했습니다
	297	+
292	298	#Site
293	299	site.sidebar = 사이트 관리
294	300	site.sidebar.setting = 설정

...	...	@@ -30,7 +30,7 @@
30	30	function _initVar(htOptions){
31	31	htVar.sActionURL = htOptions.sActionURL \|\| "/users";
32	32	htVar.rxContentRange = /items\s+([0-9]+)\/([0-9]+)/;
33		- htVar.htData = htOptions.htData;
	33	+ htVar.htData = htOptions.htData \|\| {};
34	34	}
35	35
36	36	/**
...	...	@@ -41,9 +41,9 @@
41	41	function _initElement(sQuery){
42	42	htElement.welInput = $(sQuery);
43	43	htElement.welInput.typeahead({
44		- source: _onTypeAhead,
45		- minLength: 0,
46		- items: htVar.htData.limit \|\| 8
	44	+ "source": _onTypeAhead,
	45	+ "minLength": 0,
	46	+ "items": htVar.htData.limit \|\| 8
47	47	});
48	48	}
49	49
...	...	@@ -64,7 +64,7 @@
64	64	$hive.sendForm({
65	65	"sURL" : htVar.sActionURL,
66	66	"htOptForm" : {"method":"get"},
67		- "htData" : htVar.htData,
	67	+ "htData" : htVar.htData,
68	68	"sDataType" : "json",
69	69	"fOnLoad" : function(oData, oStatus, oXHR){
70	70	var sContentRange = oXHR.getResponseHeader('Content-Range');

...	...	@@ -59,8 +59,9 @@
59	59	_showTagEditor();
60	60	}
61	61	});
	62	+
62	63	new hive.ui.Typeahead(htElement.welInputAddTag, {
63		- "sActionURL": htVar.sURLTags,
	64	+ "sActionURL": htVar.sURLTags,
64	65	"htData": {
65	66	"context": "PROJECT_TAGGING_TYPEAHEAD",
66	67	"project_id": htVar.nProjectId,
...	...	@@ -162,15 +163,8 @@
162	163	});
163	164	};
164	165
165		- var welDeleteButton = $('<a>')
166		- .attr('href', 'javascript:void(0)')
167		- .text(' x')
168		- .click(fOnClickDelete);
169		-
170		- var welTag = $('<span>')
171		- .text(sName)
172		- .addClass('label')
173		- .append(welDeleteButton);
	166	+ var welDeleteButton = $('<a href="javascript:void(0)">×</a>').click(fOnClickDelete);
	167	+ var welTag = $('<span class="label">' + sName + '</span>').append(welDeleteButton);
174	168
175	169	welTag.setRemovability = function(bFlag) {
176	170	if (bFlag === true) {
...	...	@@ -203,8 +197,7 @@
203	197	if (waChildren.length > 0) {
204	198	waChildren.append(_createTag(sInstanceId, htTag.name));
205	199	} else {
206		- newCategory = $('<li>')
207		- .addClass('info')
	200	+ newCategory = $('<li class="info">')
208	201	.attr('category', htTag.category)
209	202	.append($('<strong>').text(htTag.category + ' : '))
210	203	.append(_createTag(sInstanceId, htTag.name));

...	...	@@ -1,4 +1,3 @@
1		-
2	1	@(message: String, project: Project, histories: List[models.History] )
3	2
4	3	@import utils.JodaDateUtil._
...	...	@@ -15,6 +14,23 @@
15	14	}
16	15	}
17	16	}
	17	+@userPageUrlOnHistory(history:History) = @{
	18	+ if(history.getUserPageUrl() != null) {
	19	+ history.getUserPageUrl()
	20	+ } else {
	21	+ "#"
	22	+ }
	23	+}
	24	+@userAvatarUrlOnHistory(history:History) = @{
	25	+ if(history.getUserAvatarUrl() != null){
	26	+ history.getUserAvatarUrl()
	27	+ } else {
	28	+ routes.Assets.at("images/default-avatar-64.png")
	29	+ }
	30	+}
	31	+@makeHistoryWho(history:History) = {<a href="@userPageUrlOnHistory(history)" class="actor">@history.getWho()</a>}
	32	+@makeHistoryHow(history:History) = {<a href="@history.getUrl()"><strong class="whereis">@history.getHow()</strong></a> }
	33	+@makeHistoryWhat(history:History) = {@Messages("project.history.type." + history.getWhat())}
18	34
19	35	@main(message, project, utils.MenuType.PROJECT_HOME) {
20	36	<div class="page">
...	...	@@ -42,7 +58,7 @@
42	58	<header>
43	59	<h3>@Messages("project.info")</h3>
44	60	@if(isAllowed(UserApp.currentUser(), project.tagsAsResource(), Operation.UPDATE)){
45		- <button type="button" class="btn btn-small" data-toggle="button" id="tag-editor-toggle">@Messages("button.edit")</button>
	61	+ <button type="button" class="nbtn small" data-toggle="button" id="tag-editor-toggle">@Messages("button.edit")</button>
46	62	}
47	63	</header>
48	64	<ul class="infos" id="tags">
...	...	@@ -50,7 +66,7 @@
50	66	</ul>
51	67	<ul>
52	68	<input name="newTag" type="text" class="text hidden" style="margin-bottom:0px;" data-provider="typeahead" autocomplete="off"/>
53		- <button id="addTag" type="button" class="btn-transparent n-btn med gray hidden">@Messages("button.add")</button>
	69	+ <button id="addTag" type="button" class="nbtn medium hidden">@Messages("button.add")</button>
54	70	</ul>
55	71	</div>
56	72	<div class="inner member-info">
...	...	@@ -74,27 +90,35 @@
74	90	</div>
75	91	</div>
76	92
77		- @if(histories.size > 0) {
78		- <table class="table table-hover">
79		- <tbody>
80		- @for(history <- histories.iterator()) {
81		- <tr>
82		- <td>@agoString(ago(history.getWhen()))</td>
83		- <td>
84		- @if(history.getUserPageUrl() != null) {
85		- <a href="@history.getUserPageUrl()">@history.getWho()</a>
86		- } else {
87		- @history.getWho()
88		- }
89		- </td>
90		- <td>@history.getWhat()</td>
91		- <td><a href="@history.getUrl()">@history.getHow()</a></td>
92		- </tr>
93		- }
94		- </tbody>
95		- </table>
96		- }
	93	+ @if(histories.size > 0) {
	94	+ <div class="content-container">
	95	+ <div class="main-stream" style="width:100%;">
	96	+ <ul class="activity-streams unstyled">
	97	+ @for(history <- histories.iterator()) {
	98	+ <li class="activity-stream" style="padding:10px 0;">
	99	+ <a href="@userPageUrlOnHistory(history)" class="avatar-wrap pull-left" style="margin-right:15px;">
	100	+ <img src="@userAvatarUrlOnHistory(history)" width="32" height="32">
	101	+ </a>
97	102
	103	+ <div class="activity-desc">
	104	+ <p class="header-text" style="margin-bottom:5px;">
	105	+ @Html(Messages("project.history.item",
	106	+ makeHistoryWho(history),
	107	+ makeHistoryWhat(history),
	108	+ makeHistoryHow(history)
	109	+ ))
	110	+ </p>
	111	+ <p class="others" style="padding-left:0;">
	112	+ <span class="date" style="margin-left:0;">@agoString(ago(history.getWhen()))</span>
	113	+ </p>
	114	+ </div>
	115	+ </li>
	116	+ }
	117	+ </ul>
	118	+ </div>
	119	+ </div>
	120	+ }
	121	+
98	122	<div class="bubble-wrap dark-gray readme">
99	123	@if(project.readme == null) {
100	124	<p class="default">

Delete comment