#212 Project pages

djangoproject/statfiles/static/css2/fs_style.css

@@ -156,6 +156,9 @@ textarea[rows="3"]{
 	box-sizing: border-box!important;
 }
 
+.word-break{
+	word-break: break-all;
+}
 
 .disabled{
 	cursor:default;
@@ -317,6 +320,7 @@ body.loading .modal_ajax {
 a{
 	color: #27AAE1;
 	text-decoration:none;
+	cursor:pointer;
 }
 
 
@@ -643,6 +647,14 @@ div.divider.small:before{
 	background:transparent url(../img2/fs_delete_icon.png) left center no-repeat;
 }
 
+.iconized.tag{
+	background:transparent url(../img2/fs_tag_icon.png) left center no-repeat;
+}
+
+.iconized.done{
+	background:transparent url(../img2/fs_done_icon.png) left center no-repeat;
+}
+
 
 
 /* Footer
@@ -1113,16 +1125,55 @@ div.project-logo > img{
 	border:1px solid #85BA2E;
 }
 
+/* FS TagList
+----------------------------------------------- */
 
-
-.tag-list .tag{
+.tag-list .tag:not(.iconized){
 	display:inline-block;
 	padding:5px 10px;
-	margin:4px 0;
+	margin:3px;
 	background-color:#F2F2F2;
 	border-bottom:1px solid #E6E6E6;
 }
 
+div.fakeinput{
+	width:100%;
+
+	color: #B9B9B9;
+	background-color:#FFF!important;
+	line-height: 10px;
+
+	border: 1px solid #E6E7E8;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-goog-ms-border-radius: 3px;
+	border-radius: 3px;
+
+	-webkit-box-shadow: inset 0 4px 15px -5px #eee;
+	-moz-box-shadow: inset 0 4px 15px -5px #eee;
+	box-shadow: inset 0 4px 15px -5px #eee;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	padding:0;
+	margin: 0;
+}
+
+.fakeinput span[contenteditable='true']{
+	min-width:80px;
+	display:inline-block;
+}
+
+.padding5{
+	padding:5px 0;
+}
+
+/* Others
+----------------------------------------------- */
+
+
 [class^="icon-"],
 [class*=" icon-"] {
   display: inline-block;

djangoproject/statfiles/static/js/activitylist/activitylist.html

@@ -288,11 +288,11 @@
 							<div ng-repeat="part in activity.payment.parts">
 								<div class="column-wrapper vcenter-content" style="height:40px;">
 									<div style="width:50px;" class="text-align-right">
-										<div class="user-picture thumb40"><img style="max-height: 40px; max-width: 40px;" ng-src="{[{part.programmer_image}]}"></div>
+										<div><img class="user-picture thumb40" ng-src="{[{part.programmer_image}]}"></div>
 									</div>
 									<div class="hgap-15"><!-- Horizontal Gap 15px --></div>
 									<div class="column fit">
-										<h4 class="arial no-margin font-size-12">{[{ part.programmer_screenname }]}</h4>
+										<h4 class="arial no-margin font-size-12"><a href="{[{ part.programmer_link }]}">{[{ part.programmer_screenname }]}<>/a</h4>
 										<div class="vgap-5"><!-- Vertical Gap 5px --></div>
 										<span>received<span class="green-text"> {[{ activity.payment.currency }]} {[{ part.price }]}</span></span>
 									</div>

djangoproject/statfiles/static/js/contenteditable/contenteditable.js

@@ -0,0 +1,34 @@
+angular.module('contenteditable', []).
+	directive('contenteditable', function () {
+	return {
+		restrict: 'A', // only activate on element attribute
+		require: '?ngModel', // get a hold of NgModelController
+		link: function (scope, element, attrs, ngModel) {
+			if (!ngModel) return; // do nothing if no ng-model
+
+			// Specify how UI should be updated
+			ngModel.$render = function () {
+				element.html(ngModel.$viewValue || '');
+			};
+
+			// Listen for change events to enable binding
+			element.on('blur keyup change', function () {
+				scope.$apply(readViewText);
+			});
+
+			// No need to initialize, AngularJS will initialize the text based on ng-model attribute
+
+			// Write data to the model
+			function readViewText() {
+				var html = element[0].innerHTML;
+				// When we clear the content editable the browser leaves a <br> behind
+				// If strip-br attribute is provided then we strip this out
+				if (attrs.stripBr) {
+					html = html.replace(/<br>/g,"");
+					element[0].innerHTML = html;
+				}
+				ngModel.$setViewValue(html);
+			}
+		}
+	};
+});

djangoproject/statfiles/static/js/tags/taglist.html

@@ -1,15 +1,15 @@
 <div>
-    <span href class="tag" ng-repeat="tag in tags" style="margin-right: 10px;">
-        {[{tag}]}
-        <a href ng-show="editable" ng-click="remove($index)">x</a>
-    </span>
-    <div>
-        <input type="text" ng-model="newtag" ng-show="editable" ng-keypress="keypress()">
-        <div ng-show="poptags">
-            <ul>
-                <li ng-repeat="poptag in poptags" ng-click="addTag(poptag)">{{ poptag.name }}</li>
-            </ul>
-        </div>
-        <img src="/static/img2/ajax-loader.gif" ng-show="loading">
-    </div>
+	<a class="iconized tag right" ng-hide="editingTags" ng-click="editingTags=true" style="margin:2px">edit tags</a>
+	<a class="iconized done right" ng-show="editingTags" ng-click="editingTags=false" style="margin:2px">done</a>
+	<div class="clearfix"></div>
+	<div ng-class="{fakeinput:editingTags}" ng-click="focus()">
+		<span href class="tag" ng-repeat="tag in tags">{[{tag}]} <a href ng-show="editingTags" ng-click="remove($index)">x</a></span>
+		<span style="position:relative" ng-show="editingTags">
+			<span class="newtag" contenteditable='true' strip-br="true" ng-model="newtag" ng-keypress="tagChanged()" ng-change="tagChanged()" ng-class="{padding5:(newtag.length>0)}"></span>
+			<div class="fs-box" ng-show="poptags" style="position:absolute;z-index:1000;">
+				<ul><li ng-repeat="poptag in poptags" ng-click="addTag(poptag)">{{ poptag.name }}</li></ul>
+			</div>
+			<img src="/static/img2/ajax-loader.gif" ng-show="loading">
+		</span>
+	</div>
 </div>

djangoproject/statfiles/static/js/tags/taglist.js

@@ -34,6 +34,7 @@ mod.directive('taglist', function() {
         templateUrl: '/static/js/tags/taglist.html',
         controller: function ($scope, $timeout, SOApi, TagApi) {
             $scope.poptags = [];
+			$scope.editingTags = false;
 
             var timer = undefined;
 
@@ -45,16 +46,24 @@ mod.directive('taglist', function() {
             }
 
             function getTags(){
-                $scope.loading = true;
-                SOApi.getTags($scope.newtag).success(function(result){
-                    $scope.loading = false;
-                    $scope.poptags = result.items;
-                })
+				if($scope.newtag.length>0){
+					$scope.loading = true;
+					SOApi.getTags($scope.newtag).success(function(result){
+						$scope.loading = false;
+						$scope.poptags = result.items;
+					})
+				}else{
+					$scope.poptags = [];
+				}
             }
 
-            $scope.keypress = function(){
+            $scope.tagChanged = function(){
                 restartTimer();
             };
+
+			$scope.focus = function(){
+                event.currentTarget.getElementsByClassName('newtag')[0].focus();
+            };
 
             $scope.addTag = function(t){
                 $scope.tags.push(t.name);

djangoproject/templates/core2/project.html

@@ -11,6 +11,7 @@
     <script src="/static/js/tags/taglist.js"></script>
     <script src="/static/js/issuecards/issuecards.js"></script>
     <script src="/static/js/activitylist/activitylist.js"></script>
+	 <script src="/static/js/contenteditable/contenteditable.js"></script>
     <script src="/static/js/fsutil.js"></script>
     <script src="/static/js/angularutils/watch.js"></script>
     {% if sandbox %}
@@ -25,7 +26,7 @@
     <script src="/static/bootstrap/js/showdown.js"></script>
     <script>
 
-        var dependencies = ['issuecards', 'angularutils', 'taglist', 'activitylist', 'fswatch'];
+        var dependencies = ['issuecards', 'angularutils', 'taglist', 'activitylist', 'fswatch', 'contenteditable'];
 
         var mod = angular.module('project', dependencies);
         mod.config(
@@ -123,10 +124,14 @@ <h3 class="arial green-text">{{ project.name }}</h3>
                         <watch-entity entity="PROJECT" objid="{{ project.id }}" watching="watching" watch-link="watchLink"></watch-entity>
                     </div>
                 </div>
-                <!-- Project Description: Please limit to  characters -->
-{#                <p class="text-align-justify" style="min-height:52px;">{{ project.description|markdown|safe }}</p>#}
+				<span class="word-break" ng-if="project.homeURL">Official site: <a class="external-link" href="{{ project.homeURL }}">{{ project.homeURL }}</a></span>
+				<div class="vgap-5" ng-if="(project.homeURL) && (project.trackerURL)"><!-- Vertical Gap 5px --></div>
+				<span class="word-break" ng-if="project.trackerURL">Issue tracker: <a class="external-link" href="{{ project.trackerURL }}">{{ project.trackerURL }}</a></span>
+				<div class="vgap-15" ng-if="(project.homeURL) || (project.trackerURL)"><!-- Vertical Gap 15px --></div>
+{#              <p class="text-align-justify" style="min-height:52px;">{{ project.description|markdown|safe }}</p>#}
                 <div id="bootstrap-content">{{ project.description|markdown|safe }}</div>
                 <!-- Tags -->
+				<div class="vgap-30"><!-- Vertical Gap 30px --></div>
                 <div class="tag-list" ng-show="false"> <!-- SEO -->
                     {% for tag in project.get_tags %}
                     <a href="" class="tag">{{ tag }}</a>