mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-64099 message: Align the icons and avatar at the top of the header

Browse Source
This commit is contained in:
Ryan Wyllie 2018-11-21 11:29:58 +08:00
parent c483a8eee7
commit 2809ab7b52
3 changed files with 119 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
message/templates/message_drawer_view_conversation_header.mustache
View File

@ -35,7 +35,7 @@
}}
<div
class="hidden bg-white position-relative border-bottom px-2 py-3"
class="hidden bg-white position-relative border-bottom px-2 py-2"
aria-hidden="true"
data-region="view-conversation"
>

102
message/templates/message_drawer_view_conversation_header_content_type_public.mustache
View File

@ -35,53 +35,63 @@
}}
<div class="d-flex align-items-center">
<div class="align-self-stretch" >
<a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
{{> core_message/message_drawer_icon_back }}
</a>
</div>
<div class="d-flex text-truncate">
<a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info">
{{#imageurl}}
<div class="d-flex align-items-center">
<img
class="rounded-circle"
src="{{{.}}}"
alt="{{name}}"
aria-hidden="true"
style="height: 38px"
>
</div>
{{/imageurl}}
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container">
{{#pix}} i/star-rating, core {{/pix}}
</span>
</div>
<p class="m-0 text-truncate">{{subname}}</p>
<small class="m-0 text-muted text-truncate">
{{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
</small>
</div>
</a>
</div>
<div class="ml-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">
<a class="dropdown-item" href="#" data-action="view-group-info">
{{#str}} groupinfo, core_message {{/str}}
</a>
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-favourite">
{{#str}} addtofavourites, core_message {{/str}}
</a>
<a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" href="#" data-action="confirm-unfavourite">
{{#str}} removefromfavourites, core_message {{/str}}
<div class="d-flex flex-column">
<div class="d-flex align-items-center">
<div class="align-self-stretch" >
<a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
{{> core_message/message_drawer_icon_back }}
</a>
</div>
<div class="d-flex text-truncate">
<a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info">
{{#imageurl}}
<div class="d-flex align-items-center">
<img
class="rounded-circle"
src="{{{.}}}"
alt="{{name}}"
aria-hidden="true"
style="height: 38px"
>
</div>
{{/imageurl}}
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container">
{{#pix}} i/star-rating, core {{/pix}}
</span>
</div>
<p class="m-0 text-truncate">{{subname}}</p>
</div>
</a>
</div>
<div class="ml-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">
<a class="dropdown-item" href="#" data-action="view-group-info">
{{#str}} groupinfo, core_message {{/str}}
</a>
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-favourite">
{{#str}} addtofavourites, core_message {{/str}}
</a>
<a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#" data-action="confirm-unfavourite">
{{#str}} removefromfavourites, core_message {{/str}}
</a>
</div>
</div>
</div>
<div class="d-flex">
<!-- These are just placeholder elements to align the text below correctly with the name text above -->
<div class="mr-2 icon" aria-hidden="true"></div>
{{#imageurl}}<div style="width: 38px" aria-hidden="true"></div>{{/imageurl}}
<!-- End placeholders -->
<a class="text-decoration-none line-height-3 ml-2" href="#" data-action="view-group-info">
<small class="m-0 text-muted text-truncate">
{{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
</small>
</a>
</div>
</div>

114
theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_header_content_type_public.mustache
View File

@ -39,59 +39,69 @@
}}
<div class="d-flex align-items-center">
<div class="align-self-stretch" >
<a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
{{> core_message/message_drawer_icon_back }}
</a>
</div>
<div class="d-flex text-truncate">
<a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info">
{{#imageurl}}
<div class="d-flex align-items-center">
<img
class="rounded-circle"
src="{{{.}}}"
alt="{{name}}"
aria-hidden="true"
style="height: 38px"
>
<div class="d-flex flex-column">
<div class="d-flex align-items-center">
<div class="align-self-stretch" >
<a class="h-100 mr-2 d-flex align-items-center" href="#" data-route-back>
{{> core_message/message_drawer_icon_back }}
</a>
</div>
<div class="d-flex text-truncate">
<a class="d-flex text-truncate text-decoration-none" href="#" data-action="view-group-info">
{{#imageurl}}
<div class="d-flex align-items-center">
<img
class="rounded-circle"
src="{{{.}}}"
alt="{{name}}"
aria-hidden="true"
style="height: 38px"
>
</div>
{{/imageurl}}
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container">
{{#pix}} i/star, core {{/pix}}
</span>
</div>
<p class="m-0 text-truncate">{{subname}}</p>
</div>
{{/imageurl}}
<div class="w-100 text-truncate ml-2">
<div class="d-flex">
<strong class="m-0 text-truncate">{{name}}</strong>
<span class="{{^isfavourite}}hidden{{/isfavourite}} ml-1 text-primary" data-region="favourite-icon-container">
{{#pix}} i/star, core {{/pix}}
</span>
</div>
<p class="m-0 text-truncate">{{subname}}</p>
<small class="m-0 muted text-truncate">
{{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
</small>
</a>
</div>
<div class="ml-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">
<li data-action="view-group-info">
<a class="dropdown-item" href="#">
{{#str}} groupinfo, core_message {{/str}}
</a>
</li>
<li class="{{#isfavourite}}hidden{{/isfavourite}}" data-action="confirm-favourite">
<a class="dropdown-item" href="#">
{{#str}} addtofavourites, core_message {{/str}}
</a>
</li>
<li class="{{^isfavourite}}hidden{{/isfavourite}}" data-action="confirm-unfavourite">
<a class="dropdown-item" href="#">
{{#str}} removefromfavourites, core_message {{/str}}
</a>
</li>
</div>
</a>
</div>
<div class="ml-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">
<li data-action="view-group-info">
<a class="dropdown-item" href="#">
{{#str}} groupinfo, core_message {{/str}}
</a>
</li>
<li class="{{#isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" data-action="confirm-favourite">
<a class="dropdown-item" href="#">
{{#str}} addtofavourites, core_message {{/str}}
</a>
</li>
<li class="{{^isfavourite}}hidden{{/isfavourite}} {{^showfavourite}}hidden{{/showfavourite}}" data-action="confirm-unfavourite">
<a class="dropdown-item" href="#">
{{#str}} removefromfavourites, core_message {{/str}}
</a>
</li>
</div>
</div>
</div>
<div class="d-flex">
<!-- These are just placeholder elements to align the text below correctly with the name text above -->
<div class="mr-2" style="opacity: 0; visibility: hidden" aria-hidden="true">{{> core_message/message_drawer_icon_back }}</div>
{{#imageurl}}<div aria-hidden="true" style="width: 38px"></div>{{/imageurl}}
<!-- End placeholders -->
<a class="text-decoration-none line-height-3 ml-2" href="#" data-action="view-group-info">
<small class="m-0 muted text-truncate">
{{#str}} numparticipants, core_message, {{totalmembercount}} {{/str}}
</small>
</a>
</div>
</div>