Notification styles (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I3ec5e98ff17c9889dd095b6692030f75d3a69b18

htdocs/artefact/internal/socialprofile.php

@@ -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

@@ -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

@@ -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

-{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

-{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

 {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

 {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

 {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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -8,7 +8,7 @@
     position: absolute;
     z-index: 100;
     top: 0%;
-    padding: 4px 7px;
+    padding: 0 7px;
     pointer-events: none;
 }
 

htdocs/theme/bootstrap/static/sass/components/_message-thread.scss

+.message-thread {
+    margin-bottom: 20px;
+}
 .message-item:last-child {
     .message-preview {
         border-bottom: none;

htdocs/theme/bootstrap/static/sass/components/_notification.scss

@@ -19,105 +19,112 @@
         clear: both;
     }
 }
-.notification-item {
+.notification {
     margin-bottom: 0;
     &.panel {
         @include border-radius(0);
         box-shadow: none;
-        border: 0;
+        border: none;
+        .panel-heading {
+            @include border-radius(0);
+            display: block;