*Added User Templates

*Working on creating different looks for the templates
ShawnClake · Apr 3, 2017 · 7484141 · 7484141 · QuinnBast · Apr 3, 2017
1 parent 6798302
commit 7484141
Show file tree

Hide file tree

Showing 7 changed files with 403 additions and 3 deletions.
diff --git a/components/User.php b/components/User.php
@@ -62,7 +62,13 @@ public function defineProperties()
                 'description' => 'The page to redirect to for user profiles.',
                 'type'        => 'dropdown',
                 'default'     => 'user/profile'
-            ]
+            ],
+			'template' => [
+				'title' 		=> 'Template',
+				'description' 	=> 'The template to use for profile pages',
+				'type'			=> 'dropdown',
+				'default'		=> 'social'
+			]
         ];
     }
 
@@ -88,6 +94,16 @@ public function getTypeOptions()
             'profile' => 'User Profile',
         ];
     }
+
+	public function getTemplateOptions(){
+		return [
+			'social' 		=> 'Social', 
+			'business' 		=> 'Business',
+			'portfolio' 	=> 'Portfolio',
+			'team' 			=> 'Team', 
+			'custom' 		=> 'Custom'
+			];
+	}
 
     /**
      * Returns a list of user groups to the page in a variable called 'groups'
@@ -328,6 +344,8 @@ public function usersGroups()
      */
     public function onVisitProfile($property = null, $userid = null)
     {
+		$template = $this->property('template');
+
         if(!Settings::get('enable_profiles', true))
             return false;
 

diff --git a/components/user/business_profile.htm b/components/user/business_profile.htm
@@ -0,0 +1,85 @@
+{% if ueuser.user %}
+
+<div class="row container" style="margin-top:10px;">
+	<div class="row">
+		<div class="col-sm-6">
+			<div class="center-in-parent" style="height: 240px; background:url({% if ueuser.userAvatar.path %} {{ueuser.userAvatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %}) no-repeat; padding-left: 25%; width: 50%;">
+			</div>
+			<div style="text-align: center;">
+				<span style="font-size:40px;font-style:bold;">{{ueuser.user.name}}</span> <br>
+				{% if ueuser.loggedIn and ueuser.loggedIn.id != ueuser.user.id and not ueuser.isFriend(ueuser.user.id) %}
+					{% if ueuser.isRequested(ueuser.user.id) %}
+						<p>Friend request pending!</p>
+					{% else %}
+						<button data-request-data="id: {{ueuser.user.id}}" data-request="ueuser::onFriendUser">Add Friend</button>
+					{% endif %}
+				{% endif %}
+			</div>
+
+			<div style="width: 100%; background-color: lightblue; padding:5px;">
+                <div class ="row">
+                    <div class="col-sm-4" style="text-align: center;">
+                        Stars: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        ThumbUps: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        Gold: 5
+                    </div>
+                </div>
+            </div>
+		</div>
+		<div class="col-sm-6">
+		{% if ueuser.locked %}
+            <div style="width:100%;text-align:center;">
+                <span style="font-size:15px;font-style:italic;width:100%;text-align:center;">{{ueuser.user.email}}</span>
+            </div>
+		{% endif %}
+		{% if not ueuser.locked and ueuser.loggedIn %}
+            <div>See more of this persons profile by adding them as a friend</div>
+        {% endif %}
+		</div>
+	</div>
+	<div class="row" style="margin-top:9px;">
+            <div class="col-sm-12 col-md-12">
+                <h4>Comments</h4>
+                <div id="comment_section">
+
+                    {% for comment in ueuser.comments %}
+                    <div class="userblock">
+                        <a style="display:inline-block;text-decoration:none;height:50px;width:50px;" href="#" data-request-data="id: {{user.id}}" data-request="ueuser::onVisitProfile">
+                            <div style="display:inline-block;" class="avatar-small center-in-parent"><div class="responsive-circle center-in-parent" style="display:inline-block;background-image:url({% if comment.author.avatar.path %} {{comment.author.avatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %})"></div></div> <br>
+                        </a>{{comment.content}} <br>
+                        <span><a href="#" data-request-data="commentid: {{comment.id}}" data-request="ueuser::onDeleteComment"><span class="glyphicon glyphicon-remove">X</span></a></span> <i style="font-size:11px;">{{ "clake.userextended::lang.components.user.writtenat"|trans }} {{comment.created_at|relative}} by <a href="/users/{{comment.author.id}}">{{comment.author.name}}</a></i>
+                        <hr>
+                    </div>
+                    {% endfor %}
+
+                </div>
+                {% if ueuser.loggedIn %}<h5>Write a comment</h5>{% endif %}
+                {% if ueuser.locked %}
+                <form data-request="ueuser::onComment">
+                    <textarea rows="2" name="comment"></textarea> <br>
+                    <input type="submit" value="Comment" />
+                </form>
+                {% else %}
+                Leave a comment by {% if not user %} signing in and {% endif %} friending them.
+                {% endif %}
+            </div>
+        </div>
+</div>
+
+{% else %}
+
+<div class="row container" style="margin-top:10px;">
+    <div class="col-sm-12 ">
+        <div class="row" style="text-align: center;">
+            <div class="col-sm-12 col-md-12">
+                <h3>It appears this user doesn't exist.</h3>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endif %}
diff --git a/components/user/profile.htm → components/user/custom_profile.htm b/components/user/profile.htm → components/user/custom_profile.htm
diff --git a/components/user/default.htm b/components/user/default.htm
@@ -68,7 +68,7 @@ <h4><div style="width: 100%; text-align: center">Here are some random users:</di
     <div id="userSearchResults"></div>
 
 {% else %}
-
-    {% partial 'ueuser::profile' %}
+	{% set name %}ueuser::{{__SELF__.property('template')}}_profile{% endset %}
+	{% partial name %}
 
 {% endif %}
diff --git a/components/user/portfolio_profile.htm b/components/user/portfolio_profile.htm
@@ -0,0 +1,99 @@
+{% if ueuser.user %}
+
+<div class="row container" style="margin-top:10px;">
+
+    <div class="col-sm-12 ">
+
+        <div class="row" style="text-align: center;">
+
+            <div class="col-sm-12 col-md-3"></div>
+            <div class="col-sm-12 col-md-6" style=" padding:7px;">
+                <div class="avatar-small center-in-parent">
+                    <div class="responsive-circle center-in-parent" style="background-image:url({% if ueuser.userAvatar.path %} {{ueuser.userAvatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %})">
+                    </div>
+                </div>
+
+
+                <div style="width:100%;text-align:center;margin-bottom: 10px;margin-top:10px;">
+                    <span style="font-size:40px;font-style:bold;">{{ueuser.user.name}}</span> <br>
+                    {% if ueuser.loggedIn and ueuser.loggedIn.id != ueuser.user.id and not ueuser.isFriend(ueuser.user.id) %}
+						{% if ueuser.isRequested(ueuser.user.id) %}
+							<p>Friend request pending!</p>
+						{% else %}
+							<button data-request-data="id: {{ueuser.user.id}}" data-request="ueuser::onFriendUser">Add Friend</button>
+						{% endif %}
+					{% endif %}
+                </div>
+
+                {% if ueuser.locked %}
+                    <div style="width:100%;text-align:center;">
+                          <span style="font-size:15px;font-style:italic;width:100%;text-align:center;">{{ueuser.user.email}}</span>
+                    </div>
+			    {% endif %}
+            </div>
+        </div>
+        <div class="row" style="text-align: center;">
+            <div class="col-sm-12 col-md-12" style="width: 100%; background-color: lightblue; padding:5px;">
+                <div class ="row">
+                    <div class="col-sm-4" style="text-align: center;">
+                        Stars: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        ThumbUps: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        Gold: 5
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-12">
+
+                {% if not ueuser.locked and ueuser.loggedIn %}
+                    <div>See more of this persons profile by adding them as a friend</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="row" style="margin-top:9px;">
+            <div class="col-sm-12 col-md-12">
+                <h4>Comments</h4>
+                <div id="comment_section">
+
+                    {% for comment in ueuser.comments %}
+                    <div class="userblock">
+                        <a style="display:inline-block;text-decoration:none;height:50px;width:50px;" href="#" data-request-data="id: {{user.id}}" data-request="ueuser::onVisitProfile">
+                            <div style="display:inline-block;" class="avatar-small center-in-parent"><div class="responsive-circle center-in-parent" style="display:inline-block;background-image:url({% if comment.author.avatar.path %} {{comment.author.avatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %})"></div></div> <br>
+                        </a>{{comment.content}} <br>
+                        <span><a href="#" data-request-data="commentid: {{comment.id}}" data-request="ueuser::onDeleteComment"><span class="glyphicon glyphicon-remove">X</span></a></span> <i style="font-size:11px;">{{ "clake.userextended::lang.components.user.writtenat"|trans }} {{comment.created_at|relative}} by <a href="/users/{{comment.author.id}}">{{comment.author.name}}</a></i>
+                        <hr>
+                    </div>
+                    {% endfor %}
+
+                </div>
+                {% if ueuser.loggedIn %}<h5>Write a comment</h5>{% endif %}
+                {% if ueuser.locked %}
+                <form data-request="ueuser::onComment">
+                    <textarea rows="2" name="comment"></textarea> <br>
+                    <input type="submit" value="Comment" />
+                </form>
+                {% else %}
+                Leave a comment by {% if not user %} signing in and {% endif %} friending them.
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% else %}
+
+<div class="row container" style="margin-top:10px;">
+    <div class="col-sm-12 ">
+        <div class="row" style="text-align: center;">
+            <div class="col-sm-12 col-md-12">
+                <h3>It appears this user doesn't exist.</h3>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endif %}
diff --git a/components/user/social_profile.htm b/components/user/social_profile.htm
@@ -0,0 +1,99 @@
+{% if ueuser.user %}
+
+<div class="row container" style="margin-top:10px;">
+
+    <div class="col-sm-12 ">
+
+        <div class="row" style="text-align: center;">
+
+            <div class="col-sm-12 col-md-3"></div>
+            <div class="col-sm-12 col-md-6" style=" padding:7px;">
+                <div class="avatar-small center-in-parent">
+                    <div class="responsive-circle center-in-parent" style="background-image:url({% if ueuser.userAvatar.path %} {{ueuser.userAvatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %})">
+                    </div>
+                </div>
+
+
+                <div style="width:100%;text-align:center;margin-bottom: 10px;margin-top:10px;">
+                    <span style="font-size:40px;font-style:bold;">{{ueuser.user.name}}</span> <br>
+                    {% if ueuser.loggedIn and ueuser.loggedIn.id != ueuser.user.id and not ueuser.isFriend(ueuser.user.id) %}
+						{% if ueuser.isRequested(ueuser.user.id) %}
+							<p>Friend request pending!</p>
+						{% else %}
+							<button data-request-data="id: {{ueuser.user.id}}" data-request="ueuser::onFriendUser">Add Friend</button>
+						{% endif %}
+					{% endif %}
+                </div>
+
+                {% if ueuser.locked %}
+                    <div style="width:100%;text-align:center;">
+                          <span style="font-size:15px;font-style:italic;width:100%;text-align:center;">{{ueuser.user.email}}</span>
+                    </div>
+			    {% endif %}
+            </div>
+        </div>
+        <div class="row" style="text-align: center;">
+            <div class="col-sm-12 col-md-12" style="width: 100%; background-color: lightblue; padding:5px;">
+                <div class ="row">
+                    <div class="col-sm-4" style="text-align: center;">
+                        Stars: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        ThumbUps: 0
+                    </div>
+                    <div class="col-sm-4" style="text-align: center;">
+                        Gold: 5
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-12">
+
+                {% if not ueuser.locked and ueuser.loggedIn %}
+                    <div>See more of this persons profile by adding them as a friend</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="row" style="margin-top:9px;">
+            <div class="col-sm-12 col-md-12">
+                <h4>Comments</h4>
+                <div id="comment_section">
+
+                    {% for comment in ueuser.comments %}
+                    <div class="userblock">
+                        <a style="display:inline-block;text-decoration:none;height:50px;width:50px;" href="#" data-request-data="id: {{user.id}}" data-request="ueuser::onVisitProfile">
+                            <div style="display:inline-block;" class="avatar-small center-in-parent"><div class="responsive-circle center-in-parent" style="display:inline-block;background-image:url({% if comment.author.avatar.path %} {{comment.author.avatar.path}} {% else %} {{'plugins/clake/userextended/assets/img/default_user.png'|app}} {% endif %})"></div></div> <br>
+                        </a>{{comment.content}} <br>
+                        <span><a href="#" data-request-data="commentid: {{comment.id}}" data-request="ueuser::onDeleteComment"><span class="glyphicon glyphicon-remove">X</span></a></span> <i style="font-size:11px;">{{ "clake.userextended::lang.components.user.writtenat"|trans }} {{comment.created_at|relative}} by <a href="/users/{{comment.author.id}}">{{comment.author.name}}</a></i>
+                        <hr>
+                    </div>
+                    {% endfor %}
+
+                </div>
+                {% if ueuser.loggedIn %}<h5>Write a comment</h5>{% endif %}
+                {% if ueuser.locked %}
+                <form data-request="ueuser::onComment">
+                    <textarea rows="2" name="comment"></textarea> <br>
+                    <input type="submit" value="Comment" />
+                </form>
+                {% else %}
+                Leave a comment by {% if not user %} signing in and {% endif %} friending them.
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% else %}
+
+<div class="row container" style="margin-top:10px;">
+    <div class="col-sm-12 ">
+        <div class="row" style="text-align: center;">
+            <div class="col-sm-12 col-md-12">
+                <h3>It appears this user doesn't exist.</h3>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endif %}