Skip to content

GitLab

Commit 8ec2d041 authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells
Browse files

Notification styles (bootstrap) 

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I3ec5e98ff17c9889dd095b6692030f75d3a69b18
parent 704788e6
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 299 deletions
htdocs/artefact/internal/socialprofile.php
View file @ 8ec2d041
......@@ -103,7 +103,7 @@ else {
),
'profiletype' => array(
'type' => 'select',
'class' => 'select-socialprofile',
'class' => 'select-with-input',
'title' => get_string('profiletype', 'artefact.internal'),
'options' => $socialnetworkoptions,
'allowother' => true,
......
htdocs/lib/pieforms/pieform.php
View file @ 8ec2d041
......@@ -1755,10 +1755,6 @@ function pieform_get_headdata() {/*{{{*/
}
}
}
// Fieldsets don't appear in $form->get_elements(), so get their headdata
if (!empty($GLOBALS['_PIEFORM_FIELDSETS'])) {
$htmlelements = array_merge($htmlelements, pieform_element_fieldset_get_headdata());
}
// TODO: jsdirectory should be independent of ANY form
if ($GLOBALS['_PIEFORM_REGISTRY']) {
......
htdocs/lib/pieforms/pieform/elements/fieldset.php
View file @ 8ec2d041
......@@ -257,16 +257,6 @@ function pieform_is_collapsible($element) {
}
function pieform_element_fieldset_get_headdata() {
global $_PIEFORM_FIELDSETS;
// Used below to try to work out whether pieform_update_legends is defined
$_PIEFORM_FIELDSETS['head'] = true;
return array($result);
}
/**
* Extension by Mahara. This api function returns the javascript required to
* set up the element, assuming the element has been placed in the page using
......
htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/activitylistin.tpl
View file @ 8ec2d041
{foreach from=$data item=item}
<div class="notification-item panel {if !$item->read}unread panel-warning {else} panel-default{/if}">
<div class="notification-header panel-heading clearfix" data-toggle="collapse" data-target="#notification-{$item->id}" aria-expanded="false" aria-controls="#notification-{$item->id}">
<div class="notification-icon pull-left">
{foreach from=$data item=item name='notification'}
<div class="notification panel {if !$item->read}unread panel-warning {else} panel-default{/if} {if $dwoo.foreach.notification.last}last{/if}">
<a class="header collapsed panel-heading" href="#notification-{$item->id}" data-toggle="collapse" aria-expanded="1" aria-controls="notification-{$item->id}">
<div class="icon pull-left">
{if $item->read && $item->type == 'usermessage'}
<span class="fa fa-envelope"></span><span class="sr-only">{$item->strtype} - {str tag='read' section='activity'}</span>
{elseif $item->strtype == 'usermessage'}
......@@ -11,7 +11,7 @@
<span class="sr-only">{$item->strtype}</span>
{/if}
</div>
<h3 class="notification-subject">
<h3 class="subject">
<span class="sr-only">{str section='activity' tag='subject'}</span>
{if !$item->read}
<span class="accessible-hidden sr-only">
......@@ -20,7 +20,7 @@
{/if}
{$item->subject|truncate:40}
</h3>
<div class="notification-metadata">
<div class="metadata">
<span class="sr-only">
{str section='artefact.multirecipientnotification 'tag='fromuser'}:
</span>
......@@ -56,12 +56,12 @@
</div>
<span class="content-expanded fa fa-chevron-up"></span>
</div>
</div>
</a>
<div id="notification-{$item->id}" class="collapse">
{if $item->message}
<div class="notification-content panel-body">
<div class="content panel-body {if $item->url && $item->urltext !== 'Reply'}mbl{/if}">
{if ($item->fromusr != 0)}
<p class="notification-fromusers">
<p class="fromusers">
<strong>
{str section='artefact.multirecipientnotification' tag='fromuser'}:
</strong>
......@@ -76,14 +76,14 @@
{/if}
</p>
{else}
<p class="notification-fromusers">
<p class="fromusers">
<strong>
{str section='artefact.multirecipientnotification' tag='fromuser'}:
</strong>
<span>{str tag="system"}</span>
</p>
{/if}
<p class="notification-tousers">
<p class="tousers">
<strong>
{str section='artefact.multirecipientnotification' tag='touser'}:
</strong>
......@@ -114,22 +114,23 @@
</p>
<p>{$item->message|safe}</p>
{if $item->url && $item->urltext === 'Collection'}
<a class="notification-action" href="{$WWWROOT}{$item->url}">
<a class="action" href="{$WWWROOT}{$item->url}">
<span class="fa fa-arrow-right"></span>
{$item->urltext}
</a>
{/if}
</div>
{/if}
{if $item->url && $item->urltext === 'Reply'}
<div class="notification-actions panel-footer mbl">
<div class="notification-url">
<a class="notification-action" href="{$WWWROOT}{$item->url}">
<div class="actions panel-footer mbl">
<div class="url">
<a class="action" href="{$WWWROOT}{$item->url}">
<span class="fa fa-reply"></span>
{$item->urltext}
</a>
{if $item->return}
<a class="notification-action" href="{$WWWROOT}{$item->return}">
<a class="action" href="{$WWWROOT}{$item->return}">
<span class="fa fa-reply-all"></span> {$item->returnoutput}
</a>
{/if}
......
htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/activitylistout.tpl
View file @ 8ec2d041
{foreach from=$data item=item}
<div class="notification-item panel panel-default">
<div class="notification-header panel-heading clearfix" data-toggle="collapse" data-target="#notification-{$item->id}" aria-expanded="false" aria-controls="#notification-{$item->id}">
<div class="notification-icon pull-left">
{foreach from=$data item=item name='notification'}
<div class="notification panel panel-default {if $dwoo.foreach.notification.last}last{/if}">
<a class="header collapsed panel-heading" href="#notification-{$item->id}" data-toggle="collapse" aria-expanded="1" aria-controls="notification-{$item->id}">
<div class="icon pull-left">
{if $item->read && $item->type == 'usermessage'}
<span class="fa fa-envelope"></span><span class="sr-only">{$item->strtype} - {str tag='read' section='activity'}</span>
{elseif $item->strtype == 'usermessage'}
......@@ -11,7 +11,7 @@
<span class="sr-only">{$item->strtype}</span>
{/if}
</div>
<h3 class="notification-subject">
<h3 class="subject">
<span class="sr-only">{str section='activity' tag='subject'}</span>
{if !$item->read}
<span class="accessible-hidden sr-only">
......@@ -20,7 +20,7 @@
{/if}
{$item->subject|truncate:40}
</h3>
<div class="notification-metadata">
<div class="metadata">
<span>
{str section='artefact.multirecipientnotification' tag='touser'}:
</span>
......@@ -47,11 +47,11 @@
</div>
<span class="content-expanded fa fa-chevron-up"></span>
</div>
</div>
</a>
<div id="notification-{$item->id}" class="collapse">
{if $item->message}
<div class="notification-content panel-body">
<p class="notification-tousers">
<div class="content panel-body">
<p class="tousers">
<span class="recipientlist">
<strong>
{str section='artefact.multirecipientnotification' tag='touser'}:
......@@ -82,10 +82,10 @@
<p>{$item->message|safe}</p>
</div>
{/if}
<div class="notification-cta panel-footer clearfix">
<div class="notification-url">
<div class="actions panel-footer mbl">
<div class="url">
{if $item->url}
<a class="notification-action" href="{$WWWROOT}{$item->url}">
<a class="action" href="{$WWWROOT}{$item->url}">
<span class="fa fa-reply"></span>
{if $item->urltext}
{$item->urltext}
......@@ -93,7 +93,7 @@
</a>
{/if}
{if $item->return}
<a class="notification-action" href="{$WWWROOT}{$item->return}">
<a class="action" href="{$WWWROOT}{$item->return}">
<span class="fa fa-reply-all"></span> {$item->returnoutput}
</a>
{/if}
......
htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexin.tpl
View file @ 8ec2d041
{include file="header.tpl"}
<div id="notifications">
<form method="post" class="form-inline form-select-filter">
<form method="post" class="form-inline form-select-filter pbl">
<div class="form-group">
<label for="notifications_type">{str section='activity' tag='type'}:</label>
<select id="notifications_type" name="type">
......@@ -13,7 +13,7 @@
</select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
</div>
</form>
<form class="form-notificationlist" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<form class="form-notificationlist ptl pbl" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<div class="activity-buttons pull-left">
<input class="submit btn btn-success" type="submit" value="{str tag='markasread' section='activity'}" />
<input class="submit btn btn-danger" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />
......
htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexout.tpl
View file @ 8ec2d041
{include file="header.tpl"}
<div id="notifications">
<form method="post" class="form-inline form-select-filter">
<form method="post" class="form-inline form-select-filter pbl">
<div class="form-group">
<label for="notifications_type">{str section='activity' tag='type'}:</label>
<select id="notifications_type" name="type">
......@@ -13,7 +13,7 @@
</select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
</div>
</form>
<form class="form-notificationlist" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<form class="form-notificationlist ptl pbl" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
<div class="activity-buttons pull-left">
<input class="submit btn btn-danger" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />
</div>
......
htdocs/theme/bootstrap/artefact/plans/templates/edit.tpl
View file @ 8ec2d041
{include file="header.tpl"}
<div id="planswrap" class="plan-wrapper">
<div id="planswrap" class="posts-wrapper">
{$editform|safe}
</div>
{include file="footer.tpl"}
htdocs/theme/bootstrap/artefact/plans/templates/index.tpl
View file @ 8ec2d041
......@@ -2,13 +2,13 @@
<div class="text-right btn-top-right">
<a class="btn btn-success" href="{$WWWROOT}artefact/plans/new.php">{str section="artefact.plans" tag="newplan"}</a>
</div>
<div id="planswrap" class="plan-wrapper">
<div id="planswrap" class="posts-wrapper">
{if !$plans.data}
<div class="message">{$strnoplansaddone|safe}</div>
{else}
<div id="planslist" class="fullwidth listing">
<div id="planslist">
{$plans.tablerows|safe}
</div>
</div>
{$plans.pagination|safe}
{/if}
</div>
......
htdocs/theme/bootstrap/artefact/plans/templates/planslist.tpl
View file @ 8ec2d041
......@@ -3,7 +3,7 @@
<div class="post-heading">
<h3 class="title pull-left"><a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}">{$plan->title}</a></h3>
<div class="pull-right planstatus">
<div class="pull-right post-menu">
<a href="{$WWWROOT}artefact/plans/edit/index.php?id={$plan->id}" title="{str tag=edit}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str(tag=editspecific arg1=$plan->title)|escape:html|safe}</span>
......@@ -19,7 +19,7 @@
</div>
</div>
<div class="content postdetails">
<div class="postdescription ptl">
{$plan->description|clean_html|safe}
</div>
{if $plan->tags}
......
htdocs/theme/bootstrap/artefact/plans/templates/taskslist.tpl
View file @ 8ec2d041
......@@ -23,7 +23,7 @@
{/if}
{/if}
<td class="planscontrols">
<td class="planscontrols control-buttons">
<a href="{$WWWROOT}artefact/plans/edit/task.php?id={$task->task}" title="{str tag=edit}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str(tag=editspecific arg1=$task->title)|escape:html|safe}</span>
......
htdocs/theme/bootstrap/static/js/notification.js
View file @ 8ec2d041
......@@ -3,7 +3,7 @@
jQuery(function($) {
"use strict";
$('.notification-item .control-wrapper').click(function(e) {
$('.notification .control-wrapper').click(function(e) {
e.stopPropagation();
});
});
\ No newline at end of file
htdocs/theme/bootstrap/static/js/theme.js
View file @ 8ec2d041
......@@ -12,7 +12,7 @@ jQuery(function($) {
tabnav = $('.pieform.jstabs').find('.nav-tabs');
// Remove class collasped that has been generated by pieform
$('.pieform-fieldset').removeClass('collapsed');
$('.pieform.jstabs .pieform-fieldset').removeClass('collapsed');
tabcontent.removeClass('collapsed');
// Add div and bootstrap class on tabcontent to show and hide
......
htdocs/theme/bootstrap/static/sass/components/_attachments.scss
View file @ 8ec2d041
......@@ -26,7 +26,6 @@
&:hover {
.file-description {
// @include transition(all 0.2s ease-in);
@include opaque;
height: auto;
margin-top: 0;
......
htdocs/theme/bootstrap/static/sass/components/_forms.scss
View file @ 8ec2d041
......@@ -45,6 +45,7 @@ label.sr-only + div.mce-tinymce {
.as-panel form {
margin-top:0;
}
.main table form {
margin:0;
}
......@@ -58,10 +59,8 @@ input[type=password],
textarea,
select {
@extend .form-control;
}
.fileedittable .form-group {
input {
@media (min-width: $screen-sm-min) {
......@@ -178,10 +177,57 @@ select {
}
}
.message {
font-size: 0.9em;
color: $gray;
margin-left: 20px;
.errmsg {
@extend .align-with-input;
color: $brand-danger;
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 200px;
}
}
&.checkbox {
.description {
margin-left:0;
max-width: 700px;
}
}
.description {
@extend .align-with-input;
color: $gray-light;
font-style: italic;
font-size: $font-size-base - 1;
max-width: 500px;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 200px;
}
@media (min-width: $screen-md-min) and (max-width: $screen-lg-min){
margin-left: 0;
}
}
&.tags {
.tag-wrapper {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
}
input {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
max-width: 100%;
}
}
}
}
.requiredmarker {
color: $brand-danger;
}
}
......@@ -196,6 +242,7 @@ select {
border: none;
}
}
.wysiwyg label,
.textarea label {
vertical-align: top;
......@@ -232,10 +279,6 @@ select {
}
}
.requiredmarker {
color: $brand-danger;
}
.sidebar-content {
.errmsg {
margin-left: 0;
......@@ -272,94 +315,8 @@ select {
}
}
.form-group .errmsg {
@extend .align-with-input;
color: $brand-danger;
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 200px;
}
}
.form-group {
&.checkbox {
.description {
margin-left:0;
max-width: 700px;
}
}
.description {
@extend .align-with-input;
color: $gray-light;
font-style: italic;
font-size: $font-size-base - 1;
max-width: 500px;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 200px;
}
@media (min-width: $screen-md-min) and (max-width: $screen-lg-min){
margin-left: 0;
}
}
}
.form-group.tags {
.tag-wrapper {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
}
input {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
max-width: 100%;
}
}
}
}
.form-notifications {
.form-group .select {
width: 250px;
}
}
.form-inline.form-select-filter {
// float: left;
label {
width: auto !important;
}
select {
width: 250px;
}
}
// .form-deleteall {
// @include clearfix;
// .btn-deleteall {
// margin-top: -3px;
// float: left;
// }
// }
.form-createfolder {
input.text {
width: 200px;
}
margin-top: 30px;
}
// Style for input field after select box
.select-socialprofile {
.select-with-input {
select {
display: block;
margin-right: 15px;
......@@ -383,47 +340,25 @@ select {
}
}
.form-group.tags {
.tag-wrapper {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
}
input {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
max-width: 100%;
}
}
.form-notifications {
.form-group .select {
width: 250px;
}
}
// Styles for select2 in forms
.select2-container-multi {
max-width: 85% !important;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 420px !important;
}
@media (min-width: $screen-lg-min) {
width: 500px !important;
.form-inline.form-select-filter {
label {
width: auto !important;
}
&.select2-dropdown-open {
.select2-choices {
@include border-radius(4px 4px 0 0);
}
select {
width: 250px;
}
.select2-choices {
@include border-radius(4px);
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset);
background-color: #fff;
border: 1px solid #ccc;
background-image: none;
width: 100%;
.select2-search-choice {
border: none;
}
}
.form-createfolder {
margin-top: 30px;
input.text {
width: 200px;
}
}
htdocs/theme/bootstrap/static/sass/components/_input-as-icon.scss
View file @ 8ec2d041
......@@ -8,7 +8,7 @@
position: absolute;
z-index: 100;
top: 0%;
padding: 4px 7px;
padding: 0 7px;
pointer-events: none;