Share view new UI (BUG 1465107)

Change-Id: Ia5275e7b5761b0c8e155c0c55ede490be73c773b
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/lang/en.utf8/help/pages/view/editaccess.html

 <!-- @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later -->
 <!-- @copyright For copyright information on Mahara, please see the README file distributed with this software. -->
 <h3>Edit page access</h3>
-<p>You can control who has access to your pages and collections. By default, only you can see your pages and collections. You can share your portfolios with the public, registered users, your institution(s), groups, or your friends by clicking the appropriate "Add" button. You can also assign access to individual groups or users by using the search tool under "Share with other users and groups".</p>
+<p>You can control who has access to your pages and collections. By default, only you can see your pages and collections. You can share your portfolios with the public, registered users, your institution(s), groups, or your friends. You can assign access to individual groups or users by using the options under "Share with" → "Search for...".</p>
 <p>Access dates can be set, allowing you to make your page available for a specified period such as a course year, a project timeline, or even for one day only. All dates are optional. Individual users can be granted access by multiple access rules.</p>
 <p><strong>Example:</strong> Nigel is in the group "The Coolpeople's Club". If you allow him to access your page today and allow "The Coolpeople's Club" to access your page tomorrow, he will be able to access the page on both days.</p>

htdocs/lang/en.utf8/mahara.php

@@ -1185,5 +1185,14 @@ $string['hspace'] = 'Horizontal space';
 $string['border'] = 'Border width';
 $string['alignment'] = 'Alignment';
 
+//Select2 strings
+$string['errorLoading'] = "The results could not be loaded.";
+$string['inputTooLong'] = "Too many characters";
+$string['inputTooShort'] = "Enter search query";
+$string['loadingMore'] = "Loading more results...";
+$string['maximumSelected'] = "Maximum items selected";
+$string['noResults'] = "No results found";
+$string['searching'] = "Searching...";
+
 // Miscellaneous (please keep these alphabetized)
-$string['cli_incorrect_value'] = 'Incorrect value, please retry.';
+$string['cli_incorrect_value'] = 'Incorrect value, please retry.';
\ No newline at end of file

htdocs/lang/en.utf8/view.php

@@ -114,7 +114,7 @@ $string['secreturldeleted'] = 'Your secret URL was deleted.';
 $string['secreturlupdated'] = 'Secret URL updated';
 $string['generatesecreturl'] = 'Generate a new secret URL for "%s".';
 $string['secreturls'] = 'Secret URLs';
-
+$string['existingURLS'] = 'Existing URLs';
 $string['publicaccessnotallowed'] = "Your institution or site administrator has disabled public pages and secret URLs. Any secret URLs you see listed here are currently inactive.";
 $string['publicaccessnotallowedforprobation'] = "Sorry, newly registered users aren't allowed to create secret URLs.";
 // view user
@@ -152,6 +152,7 @@ $string['Added'] = 'Added';
 $string['share'] = 'Share';
 $string['sharedbyme'] = 'Shared by me';
 $string['sharewith'] = 'Share with';
+$string['whosharewith?'] = 'Who do you want to share with?';
 $string['accesslist'] = 'Access list';
 $string['defaultaccesslistmessage'] = 'Nobody besides you can view your selected pages / collections. Add people to give them access.';
 $string['sharewithmygroups'] = 'Share with my groups';
@@ -190,7 +191,7 @@ $string['deleteviewconfirmbackup'] = 'Please consider creating a backup of this
 $string['deleteviewconfirmnote1'] = '<strong>Note:</strong> All your files and journal entries that you linked in this page will still be available.<br/>However, any feedback placed on this page will be deleted.';
 $string['deleteviewconfirmnote2'] = 'This page is a part of the collection <a href="%s">"%s"</a>.';
 
-$string['editaccesspagedescription5'] = 'You are the only one who can see your pages and collections by default. On this page you decide who can access them besides you. Click the "Add" buttons next to the groups and people with whom you wish to share your pages.<br /><br />Click <a href="#" onclick=\'contextualHelp("","","core","view","editaccess","", $j("#main-column-container h1 .help a")[0]); return false;\'>help</a> for more detailed information.';
+$string['editaccesspagedescription6'] = 'You are the only one who can see your pages and collections by default. On this page you decide who can access them besides you.';
 $string['editaccessdescription'] = 'You may set multiple items to have identical settings by choosing them from the checkboxes. Once you are done, scroll down and click "Save" to continue.';
 $string['editaccessgrouppagedescription'] = 'By default, only those group members who can add and edit pages and collections can see group collections and pages. ' . $string['editaccessdescription'];
 $string['editaccessinstitutionpagedescription'] = 'By default, only the administrators of your institution can see your institution collections and pages. ' . $string['editaccessdescription'];
@@ -428,7 +429,17 @@ $string['titleanddescriptionandtagsandowner'] = 'Title, description, tags, owner
 $string['tagsonly'] = 'Tags only';
 $string['sharedviewsdescription'] = 'This page lists the most recently modified or commented on pages that have been shared with you. They may have been shared with you directly, shared with friends of the owner, or shared with one of your groups.';
 $string['sharedwith'] = 'Shared with';
+$string['sharewith'] = 'Share with';
+$string['general'] = 'General';
+$string['searchfor'] = 'Search for...';
+$string['institutions'] = 'Institutions';
+$string['groups'] = 'Groups';
+$string['search'] = 'Search';
 $string['Me'] = 'Me';
+$string['entersearchquery'] = 'Enter search query';
+$string['allow'] = 'Allow';
+$string['comments'] = 'Comments';
+$string['moderate'] = 'Moderate';
 
 // Group reports
 $string['sharedby'] = 'Shared by';

htdocs/lib/form/elements/autocomplete.php

@@ -71,18 +71,12 @@ function pieform_element_autocomplete(Pieform $form, $element) {
 
     $value = $form->get_value($element);
     $multiple = !empty($element['multiple']);
-    if ($multiple) {
-        $valuestr = implode(',', $value);
-    }
-    else {
-        $valuestr = $value;
-    }
 
     if (!empty($element['initfunction'])) {
-        $initvalue = json_encode(call_user_func($element['initfunction'], $value));
+        $initvalues = call_user_func($element['initfunction'], $value);
     }
     else {
-        $initvalue = '[]';
+        $initvalues = '[]';
     }
 
     if (array_key_exists('mininputlength', $element)) {
@@ -107,8 +101,7 @@ function pieform_element_autocomplete(Pieform $form, $element) {
 
     $smarty->assign('id', $form->get_name() . '_' . $element['id']);
     $smarty->assign('name', $element['name']);
-    $smarty->assign('value', $valuestr); // Pre-populate form element.
-    $smarty->assign('initvalue', $initvalue);
+    $smarty->assign('initvalues', $initvalues);
     $smarty->assign('width', empty($element['width']) ? '300px' : $element['width']);
     $smarty->assign('multiple', $multiple ? 'true' : 'false');
     $smarty->assign('mininputlength', $mininputlength);
@@ -135,7 +128,6 @@ function pieform_element_autocomplete(Pieform $form, $element) {
 function pieform_element_autocomplete_get_headdata($element) {
     global $THEME;
     $cssfile = $THEME->get_url('style/select2.css');
-    $jsfile = get_config('wwwroot') . 'js/select2/select2.js';
 
     // Add language file if required.
     $lang = current_language();
@@ -159,7 +151,6 @@ function pieform_element_autocomplete_get_headdata($element) {
 
     $r = <<<JS
 <link rel="stylesheet" href="{$cssfile}" />
-<script type="application/javascript" src="{$jsfile}"></script>
 {$langfile}
 JS;
     return array($r);

htdocs/lib/pieforms/pieform/elements/calendar.php

@@ -107,11 +107,6 @@ function pieform_element_calendar(Pieform $form, $element) {
 
     },
 ';
-    // if (isset($element['imagefile'])) {
-    //     $result .= 'showOn: "button",
-    //                 buttonImage: "' . $element['imagefile'] . '",
-    //                 buttonText: "' . get_string('element.calendar.opendatepicker', 'pieforms') . '",';
-    // }
     $result .= '
         });
     </script>';
@@ -128,7 +123,6 @@ function pieform_element_calendar(Pieform $form, $element) {
 function pieform_element_calendar_set_attributes($element) {
     global $THEME;
     $element['jsroot']   = get_config('wwwroot') . 'js/jquery/jquery-ui/';
-//    $element['imagefile'] = $THEME->get_image_url('calendar');
     $element['language'] = substr(current_language(), 0, 2);
     $element['caloptions']['ifFormat'] = isset($element['caloptions']['ifFormat']) ? $element['caloptions']['ifFormat'] : '%Y/%m/%d';
     $element['caloptions']['dateFormat'] = isset($element['caloptions']['dateFormat']) ? $element['caloptions']['dateFormat'] : get_string('calendar_dateFormat', 'langconfig');

htdocs/lib/pieforms/pieform/elements/select.php

@@ -73,6 +73,9 @@
  * @return string           The HTML for the element
  */
 function pieform_element_select(Pieform $form, $element) {
+
+    $wrapperclass = !empty($element['isSelect2']) ? '' : 'picker';
+
     if (!empty($element['multiple'])) {
         $element['name'] .= '[]';
     }
@@ -98,7 +101,7 @@ function pieform_element_select(Pieform $form, $element) {
         return $result;
     }
 
-    $result = '<span class="picker"><select'
+    $result = '<span class="' . $wrapperclass . '"><select'
         . $form->element_attributes($element)
         . (!empty($element['multiple']) ? ' multiple="multiple"' : '')
         . (!empty($element['allowother']) ? ' onChange="pieform_select_other(this);"' : '')
@@ -169,12 +172,12 @@ function pieform_element_select_render_options($options, $values, &$optionselect
     foreach ($options as $key => $value) {
         // Select the element if it's in the values or if there are no values
         // and this is the first option
-        if (
-            (!is_array($values) && $key == $values)
-            ||
-            (is_array($values) &&
-                (in_array($key, $values)
-                || (isset($values[0]) && $values[0] === null && !$optionselected)))) {
+
+        $stringvalue = !is_array($values) && $key == $values;
+        $inarrayvalue = is_array($values) && in_array($key, $values);
+        $firstoption = isset($values[0]) && $values[0] === null && !$optionselected;
+
+        if ($stringvalue || $inarrayvalue || $firstoption) {
             $selected = ' selected="selected"';
             $optionselected = true;
         }

htdocs/module/multirecipientnotification/sendmessage.json.php

@@ -23,7 +23,7 @@ $page = param_integer('page');
 if ($page < 1) {
     $page = 1;
 }
-$usersperpage = 5;
+$usersperpage = 10;
 
 $more = true;
 $tmpuser = array();

htdocs/testing/frameworks/behat/classes/BehatForms.php

@@ -195,7 +195,7 @@ class BehatForms extends BehatBase {
         $selectnode = $this->find_field($select);
         $optionsarr = array(); // Array of passed value/text options to test.
 
-        // Can pass multiple comma separated, with valuable commas escaped with backslash.
+        // Can pass multiple pipe separated values.
         foreach (preg_split('/\|/', $option) as $opt) {
             $optionsarr[] = trim($opt);
         }

htdocs/testing/frameworks/behat/classes/FormFields/BehatFormSelect.php

@@ -148,7 +148,7 @@ class BehatFormSelect extends BehatFormField {
 
             // Wait for all the possible AJAX requests that have been
             // already triggered by clicking on the field to be finished.
-            $this->session->wait(behat_base::TIMEOUT * 1000, behat_base::PAGE_READY_JS);
+            $this->session->wait(BehatBase::TIMEOUT * 1000, BehatBase::PAGE_READY_JS);
 
             // Wrapped in a try & catch as we can fall into race conditions
             // and the element may not be there.

htdocs/theme/default/sass/utilities/_bootstrap-variables.scss

@@ -448,15 +448,15 @@ $nav-disabled-link-color:                   $gray-light !default;
 $nav-disabled-link-hover-color:             $gray-light !default;
 
 //== Tabs
-$nav-tabs-border-color:                     #ddd !default;
+$nav-tabs-border-color:                     #eee !default;
 
-$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+$nav-tabs-link-hover-border-color:          $brand-primary !default;
 
 $nav-tabs-active-link-hover-bg:             $body-bg !default;
-$nav-tabs-active-link-hover-color:          $gray !default;
-$nav-tabs-active-link-hover-border-color:   #ddd !default;
+$nav-tabs-active-link-hover-color:          $brand-primary !default;
+$nav-tabs-active-link-hover-border-color:   $brand-primary !default;
 
-$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-link-border-color:            #f7f7f7 !default;
 $nav-tabs-justified-active-link-border-color:     $body-bg !default;
 
 //== Pills

htdocs/theme/raw/js/access.js

+/*jslint browser: true, nomen: true,  white: true */
+/* global jQuery, $ */
+jQuery(function($) {
+"use strict";
+
+
+    $(".js-sort-dropdown").select2({
+        tags: true,
+        placeholder: "Select what you want to share"
+    })
+
+
+});
\ No newline at end of file

htdocs/theme/raw/js/theme.js

@@ -154,5 +154,6 @@ jQuery(function($) {
         attachInputDropdown();
     }
 
+    $(".js-select2 select").select2({});
 
 });

htdocs/theme/raw/sass/form/_dropdown-group.scss

@@ -87,4 +87,3 @@
     }
 
 }
-

htdocs/theme/raw/sass/form/_dropdown.scss

@@ -6,6 +6,25 @@
         display: inline-block;
         min-width: 20px;
         max-width: 100%;
+        &.input-short {
+            //width: 100px;
+            max-width: 170px;
+            .select2 {
+                width: auto !important; // js is doing some weird calculations and getting the width wrong. Override inline js
+                min-width:150px;
+                display:block;
+            }
+            .select2-selection {
+                border-color: $input-border;
+            }
+            .select2-selection:focus {
+                border-color: $input-border-focus;
+                outline: none;
+            }
+        }
+        .select2-container--default .select2-selection--single .select2-selection__arrow b {
+            display:none;
+        }
         &:before {
             content: "\25BE";
             font-family: "FontAwesome";
@@ -84,4 +103,4 @@
             line-height: $input-height-base / 2;
         }
     }
-}
+}
\ No newline at end of file

htdocs/theme/raw/sass/form/_form-group.scss

@@ -10,12 +10,43 @@
     }
 }
 
+.stacked .with-heading > .form-group {
+    &.select {
+        label {
+            display: block;
+            font-weight: bold;
+        }
+    }
+}
+
 .form-group {
     border-bottom: 1px solid #f0f0f0;
     margin: 0;
     padding: 20px 0;
     position: relative;
 
+    @media (min-width: $screen-sm-min) {
+        &.input-pair {
+            max-width: 48%;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+        &.input-pair ~ .input-pair {
+            border-left: 1px solid #eaeaea;
+            padding-left: 20px;
+            margin-left: 15px;
+            padding-top: 0;
+        }
+    }
+
+    &.input-pair {
+        padding-top: 10px;
+        .select2 {
+            max-width: 100%;
+            width: 100%;
+        }
+    }
+
     .form-group {
         padding: 0;
     }
@@ -27,6 +58,13 @@
         }
     }
 
+    .form-simple & {
+        border: 0;
+        label {
+            min-width: 100px;
+        }
+    }
+
     .form-condensed & {
         padding: 7px 0;
         border: 0;

htdocs/theme/raw/sass/form/_form.scss

@@ -134,3 +134,71 @@ label,
 .form-message-inline  {
     vertical-align: top;
 }
+
+.date-picker {
+    position: relative;
+    &:before {
+        font-family: "FontAwesome";
+        font-size: 16px;
+        content: '\f073';
+        color: lighten($text-color, 20%);
+        position:absolute;
+        right: 10px;
+        top: 5px;
+        z-index: 0;
+    }
+    input.form-control {
+        width: 100%;
+        max-width:100%;
+        z-index: 1;
+        position:relative;
+        &:not(:disabled) {
+            background-color: transparent;
+        }
+        &:disabled {
+            opacity: 0.5;
+        }
+    }
+}
+
+.select2.select2-container .select2-selection {
+    min-height: $input-height-base; // make select2 look more like a regular select
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+    color: $input-color;
+    &.select2-selection--multiple {
+        &:after {
+            content: "\f002";
+            color: lighten($text-color, 50%);
+            font-family: FontAwesome;
+            font-size: 1em;
+            display:inline-block;
+            position:absolute;
+            right: 12px;
+            top: 7px;
+        }
+    }
+}
+
+.select2 {
+    min-width: 200px;
+}
+
+.select2-dropdown .select2-search {
+    position: relative;
+    &:after {
+        content: "\f002";
+        color: lighten($text-color, 50%);
+        font-family: FontAwesome;
+        font-size: 1em;
+        display:inline-block;
+        position:absolute;
+        right: 12px;
+        top: 8px;
+    }
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered,
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+    line-height: 34px;
+}

htdocs/theme/raw/sass/layout/nav/_nav-tabs.scss

 .nav-tabs {
     &.nav {
         li > a {
+            font-size: $font-size-large;
+            font-weight: 300;
+            border-bottom: 3px solid transparent;
             padding: 8px 10px;
-            font-size: $font-size-small + 1;
+            font-size: $font-size-base + 1;
+            &:hover,
+            &:focus {
+                color: $nav-tabs-active-link-hover-color;
+                border: 1px solid transparent;
+                border-bottom: 3px solid $nav-tabs-link-hover-border-color;
+                background: #f7f7f7;
+            }
         }
     }
 }
@@ -12,3 +22,13 @@
 .tab-content legend {
     display: none;
 }
+
+.nav-tabs>li.active>a {
+    border: 1px solid transparent;
+    border-bottom: 3px solid $nav-tabs-active-link-hover-border-color;
+    &:hover,
+    &:focus {
+        border: 1px solid transparent;
+        border-bottom: 3px solid $nav-tabs-link-hover-border-color;
+    }
+}

htdocs/theme/raw/sass/layout/panel/_panel-secondary.scss

 // panel-secondary is the style used for the user-editable panels used across Mahara
 
 .panel-secondary {
-    @include box-shadow(none);
+    &.panel {
+        @include box-shadow(none);
+    }
     .admin & {
         border-color: #ddd;
     }

htdocs/theme/raw/sass/typography/_icons.scss

@@ -2,6 +2,8 @@
 
 .icon-placeholder {
   opacity:0;
+  pointer-events: none;
+  cursor: default;
 }
 
 .icon-annotation:before {
@@ -9,21 +11,21 @@
 }
 .icon-fileimagevideo:before,
 .icon-video:before {
-	content: $fa-var-film;
+  content: $fa-var-film;
 }
 .icon-blog:before {
-	content: $fa-var-pencil;
+  content: $fa-var-pencil;
 }
 .icon-general:before {
-	content: $fa-var-briefcase;
+  content: $fa-var-briefcase;
 }
 
 .icon-internal:before {
-	content: $fa-var-user;
+  content: $fa-var-user;
 }
 
 .icon-external:before {
-	content: $fa-var-share;
+  content: $fa-var-share;
 }
 
 .icon-text:before {