Skip to content

GitLab

Commit f72e7826 authored by Dave Lane's avatar Dave Lane
Browse files
Options

WIP - initial working dialogs

parent c3c58400
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 809 deletions
css/ore_style.css
View file @ f72e7826
......@@ -9,6 +9,8 @@ article.ore-form .container .entry-content > p,
article.ore-form .container .entry-content > div.ore {
padding: 0 28px 0 28px;
}
/* Status information on main page */
#ore-container {
font-family: 'Open Sans', sans-serif;
vertical-align: middle;
......@@ -17,55 +19,99 @@ article.ore-form .container .entry-content > div.ore {
padding-right: 2px;
float: right;
}
#ore-login-status {
margin-top: 72px;
margin-right: 10px;
}
#ore-container .ore-trigger:hover {
color: #000;
text-decoration: none;
border: collapse;
}
/* end status */
/*
* dialogs
*/
/*#ore-container .ore-modal.fade { opacity: 1.0; }*/
#ore-container .ore-modal {
/* overall */
.ore-dialog.ui-widget.ui-widget-content {
font-family: 'Open Sans', sans-serif !important;
background: #fefefe;
background-image: none !important;
background-color: #fefefe !important;
border: 1px solid #F7BD27;
border-radius: 10px;
box-shadow: 0 5px 15px rgb(0,0,0,0.5);
overflow-x: hidden;
overflow-y: auto;
opacity: 1;
z-index: 1050;
display: block;
font-family: 'Open Sans', sans-serif;
padding: 0px;
}
/* buttons */
.ore-menu p .ore-button { margin-bottom: 0; }
#ore-container .ore-menu-block,
#ore-container .ore-modal-block {
float: left;
padding-right: 5px;
.ore-dialog .ore_detail {
font-size: 80%;
color: #999;
}
#ore-container .ore-modal-block.singleton {
float: none;
padding: auto;
.ore-form.dialog-body {
padding: 8px;
}
/*#ore-container .ore-right { padding-left: 5px; }
#ore-container .ore-half { width: 50%; }
#ore-container .ore-third { width: 33.33%; }*/
#ore-container .ore-left { width: 50%; }
#ore-container .ore-right {
width: 50%;
padding-right: 0px;
/* end overall */
/* titlebar */
.ore-dialog .ui-dialog-titlebar {
padding: 8px;
border: none;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: none;
background: inherit;
}
/*#ore-container .ore-third { width: 33.33%; }*/
#ore-container p {
line-height: normal;
/* end titlebar */
/* body */
.ore-dialog .ore-body {
padding: 4px 8px;
box-shadow: none;
border: none;
background: transparent;
}
.ore-dialog .ore-form, .ore-dialog .ore-spacer {
border-top: 1px #e5e5e5 solid;
}
/* end body */
/* start buttons */
/* make default button brighter */
#ore-container .button.ore-default {
opacity: 1.0;
border: 1px orange solid;
/* close button */
.ore-dialog .ui-dialog-titlebar-close {
/*margin: -10px -15px 0 0;*/
padding: 0px 2px;
width: 16px;
height: 16px;
background-image: url("img/close.16x16.png");
background-repeat: none;
background-position: center center;
cursor: pointer;
text-transform: none;
border: 0;
position: absolute;
top: 2px;
right: 2px;
color: #000;
opacity: 0.8;
}
/* make alternative button dimmer */
/*#ore-container .button.ore-alternative { opacity: 0.55; }*/
#ore-container .button.ore-alternative { opacity: 1.0; }
#ore-container .button {
.ore-dialog .ui-dialog-titlebar-close:hover { color: #000; }
/* end close button */
/* button layout */
.ore-body .modal-footer {
text-align: center;
}
/* end button layout */
/* buttons */
button.ore-button {
padding: 8px 12px;
line-height: normal;
background-color: #97BB6D;
......@@ -75,196 +121,57 @@ article.ore-form .container .entry-content > div.ore {
text-decoration: none;
border: none;
}
#ore-container .button:hover, #ore-container button:focus {
/*color: #000;*/
button.ore-default {
opacity: 1.0;
border: 1px orange solid;
}
button.ore-button:hover, button:focus {
color: #FFFE89;
box-shadow: 4px 4px 10px #999;
text-decoration: none;
}
#ore-container .button:active {
box-shadow: 0px 0px 10px #999;
text-decoration: none;
}
#ore-container .button:visited { text-decoration: none; }
/* end buttons */
/* start links */
#ore-container .link {
line-height: normal;
background-color: #fff;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#ore-container .link:hover { text-decoration: underline; }
#ore-container .link:active { text-decoration: underline; }
/* end links */
/* specific to ore-button */
#ore-container .ore-button {
cursor: pointer;
}
#ore-container .ore-trigger:hover {
/*color: #FFFE89;*/
color: #000;
button.ore-button:active {
box-shadow: 0px 0px 10px #777;
text-decoration: none;
border: collapse;
/*border: 1px black solid;*/
}
/* correct padding around general anchors in modal content */
#ore-container .ore-modal { top: 0px; }
#ore-container .modal a { padding: 0; }
/*#ore-container .modal a:focus, #ore-container .modal a:active { color: black; }*/
/* status */
#ore-container .ore-avatar {
border-radius: 8px;
margin-right: 4px;
}
#ore-container .ore-course-status { margin-left: 8px; }
#ore-container .ore-course-status-indicator { margin-left: 4px; }
/* end-buttons */
/* menus and popups */
.ore-menu {
display: block;
/* resize icon */
.ore-dialog .ui-resizable-handle.ui-icon {
position: absolute;
right: 0;
padding: 12px;
width: 400px;
border: solid 1px #F7BD27;
background-color: #fff;
box-shadow: 4px 4px 10px #ccc;
-moz-box-shadow: 4px 4px 10px #ccc;
-webkit-box-shadow: 4px 4px 10px #ccc;
border-radius: 10px 0 10px 10px;
z-index: 10000;
}
.ore-menu p {
color: #000;
word-wrap: normal;
word-break: normal;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
margin-bottom: 0;
padding-bottom: 0;
}
#ore-container .ore-button {
margin-top: 8px;
margin-bottom: 0;
}
.ore-trigger { }
.ore-extra { margin-left: 1em; }
.ore-extra a { font-weight: bold; }
.ore-extra a:focus, .ore-extra a:active { color: black; }
#ore-container .ore-enrolled, #ore-container .ore-unenrolled {
left: 0;
top: 0;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-repeat: no-repeat;
opacity: 1.0;
}
#ore-container .ore-enrolled {
background-image: url(img/enrolled.20x20.png);
}
#ore-container .ore-unenrolled {
background-image: url(img/unenrolled.20x20.png);
bottom: 0;
cursor: se-resize;
}
/* end resize icon */
/* modal styles */
#ore-container .modal-dialog { margin: 30px auto; }
#ore-container .modal-body p { padding: 0 inherit; }
#ore-container p {
/*white-space: nowrap;*/
margin-top: 6px;
word-wrap: unset;
word-break: unset;
}
#ore-container .modal-dialog .modal-header button.close {
/*margin: -10px -15px 0 0;*/
margin: -10px -15px 0 0;
padding: 0;
width: 16px;
height: 16px;
cursor: pointer;
background: transparent;
text-transform: none;
border: 0;
float: right;
color: #000;
/* overlay (not within the widget) */
.ui-widget-overlay {
background: #555 !important;
opacity: 0.8;
}
#ore-container .modal-dialog span.close {
opacity: 1.0;
color: #555;
background-image: url("img/close.16x16.png");
background-repeat: none;
background-position: center center;
width: 16px;
height: 16px;
margin: 0;
padding: 0;
}
/*#ore-container .modal-dialog span.close:hover { color: #000; } */
#ore-container .modal-dialog .close:hover { color: #000; }
#ore-container .modal-content {
position: relative;
background-color: #fefefe;
border: 1px solid #F7BD27;
border-radius: 10px;
/*margin-top: 20px;*/
/*margin-top: 240px;*/
margin-top: 294px;
padding: 0 20px;
box-shadow: 0 5px 15px rgb(0,0,0,0.5);
}
#ore-container .ore-modal {
overflow-x: hidden;
overflow-y: auto;
opacity: 1;
position: fixed;
top: 20px;
/*top: 0px;*/
right: 0;
bottom: 0;
left: 0;
line-height: 1em;
font-size: 14px;
}
#ore-container .ore-modal.modal .modal-dialog {
/*opacity: 1;*/
background-color: inherit;
}
#ore-container .ore-modal.modal .modal-dialog .modal-content {
/*opacity: 1.0;*/
background-color: #fefefe;
}
#ore-container .ore-modal.modal .ore-title {
color: #000;
font-size: 20px;
margin: 20px 0 0 0;
border-bottom: none;
line-height: 1.15em;
/* end overlay */
/* menu-specific */
.ore-left {
width: 50%;
float: left;
padding-right: 4px;
}
#ore-container .modal-header {
/*border-bottom: none;*/
margin-bottom: 12px;
padding-left: 0px;
padding-right: 0px;
.ore-right {
width: 50%;
float: right;
padding-left: 4px;
}
#ore-container .ore-modal-block p { padding: 0px 20px; }
#ore-container .ore-modal.modal p { color: #000; }
#ore-container .ore-modal.modal .modal-footer { text-align: center; }
#ore-container .ore-modal p.ore-detail {
word-break: normal;
font-size: 90%;
color: #737373 !important;
/* end menu-specific */
/* end dialogs */
/* utility classes */
.clear {
clear: both;
}
/* end utility classes */
.ore-throbber {
background-image: url('img/working.gif');
......@@ -319,13 +226,6 @@ button.ore-processing {
#ore-container .ore-button {
color: black;
}
/*#ore-login-status button.button:focus {
box-shadow: 0 2px 2px rgb(0,0,0,0.5);
}*/
/* end accessibility styles */
/* mobile configuration */
......
includes/ore_app.php
View file @ f72e7826
This diff is collapsed.
includes/ore_dialogs.php
View file @ f72e7826
......@@ -18,40 +18,43 @@
*
*
*/
$dialogs = array();
$dialog_definitions = array(
'visitor' => array(
'title' => _('Welcome!'),
'markup' => '<div class="ore-menu-block ore-left"><p>'.
'title' => __('Welcome!'),
'markup' => '<div class="ore-spacer">&nbsp;</div><div class="ore-menu-block ore-left"><p>'.
__('Don\'t have an account? We invite you to').'</p>'.
'<p style="text-align: center;">&nbsp;<button id="ore-register-button" class="button ore-button"
data-toggle="modal" data-target="#ore-modal">'.
'<p style="text-align: center;">&nbsp;<button id="ore-register-menu-action" class="button ore-button">'.
__('Create account').'</button></p></div>'.
'<div class="ore-menu-block ore-right"><p>'.
__('Already have an account? Please').'</p>'.
'<p style="text-align: center;"><button id="ore-login-button" class="button ore-button" data-toggle="modal"
data-target="#ore-modal">'.
__('Log In').'</button></p></div>',
'<p style="text-align: center;"><button id="ore-login-menu-action" class="button ore-button">'.
__('Log In').'</button></p></div><br class="clear"/>',
'width' => '400',
'classes' => 'ore-menu',
),
'authenticated' => array(
'markup' => '<p>'.
'title' => __("You're logged in"),
'markup' => '<div class="ore-spacer">&nbsp;</div><div class="ore-menu-block"><p>'.
__('You are logged in as {{user.display_name}} ({{user.username}})').'</p>'.
'<button id="ore-edit-profile-button" class="button ore-button" data-toggle="modal"
data-target="#ore-modal">'.
'<button id="ore-edit-profile-menu-action" class="button ore-button">'.
__('Edit Profile').
'</button>&nbsp;<button id="ore-update-password-button" class="button ore-button">'.
'</button>&nbsp;<button id="ore-update-password-menu-action" class="button ore-button">'.
__('Update Password').
'</button>&nbsp;&nbsp;&nbsp;<button id="ore-log-out-button" class="button ore-button">'.
'</button>&nbsp;&nbsp;&nbsp;<button id="ore-log-out-menu-action" class="button ore-button">'.
__('Log Out').'</button>',
'enrolled' => array('cat' => 'leave', 'label' => __('Leave {{user.course.course_tag}}'),
'extra' => '<span class="ore-extra">'.
__('Add your <a target="_blank" title="Opens the Blog Feed Finder in a new tab or window!" href="/blog-feed-finder">blog feed</a> for scanning!').
'</span>', 'course_text' => '<p>'.
__('You are <strong>enrolled</strong> in "{{user.course.course_title}}"').'</p>'
__('You are <strong>enrolled</strong> in "{{user.course.course_title}}"').'</p></div>'
),
'not_enrolled' => array('cat' => 'enrol', 'label' => __('Enrol in {{user.course.course_tag}}'),
'course_text' => '<p>'.
__('You are <strong>not enrolled</strong> in "{{user.course.course_title}}"').'</p>'
)
),
'classes' => 'ore-menu',
'width' => '400'
),
'login' => array(
'title' => __('Log in to OERu Course site'),
......@@ -421,7 +424,7 @@ $dialog_definitions = array(
'title' => __('Enrollment in "{course_title}" ({course_tag}) failed.'),
'token' => 'failed-to-enrol',
'purpose' => 'confirmation',
'markup' => '<p>'.__('It is not clear why your enrollment attempt failed - please ').'<a href="'.ORE_CONTACT_URL.'">'.__('contact OERu').'</a>'.__(' to report this problem.'),
'markup' => '<p>'.__('It is not clear why your enrollment attempt failed - please ').'<a href="'.ORE_SUPPORT_CONTACT.'">'.__('contact OERu').'</a>'.__(' to report this problem.'),
'default' => array(
'label' => __('Ok'),
'class' => 'submit',
......@@ -457,7 +460,7 @@ $dialog_definitions = array(
'token' => 'failed-to-unenrol',
'purpose' => 'confirmation',
'markup' => '<p>'.__('It is not clear why your unenrollment attempt failed - please ').
'<a href="'.ORE_CONTACT_URL.'">'.__('contact OERu').'</a>'.__(' to report this problem.'),
'<a href="'.ORE_SUPPORT_CONTACT.'">'.__('contact OERu').'</a>'.__(' to report this problem.'),
'default' => array(
'label' => __('Ok'),
'class' => 'submit',
......
includes/ore_modals.php
View file @ f72e7826
......@@ -387,7 +387,7 @@ static $dialogs = array(
'title' => 'Enrollment in "{course_title}" ({course_tag}) failed.',
'token' => 'failed-to-enrol',
'purpose' => 'confirmation',
'markup' => '<p>It is not clear why your enrollment attempt failed - please <a href="ORE_CONTACT_URL">contact OERu</a> to report this problem.',
'markup' => '<p>It is not clear why your enrollment attempt failed - please <a href="ORE_SUPPORT_CONTACT">contact OERu</a> to report this problem.',
'default' => array(
'label' => 'Ok',
'class' => 'submit',
......@@ -422,7 +422,7 @@ static $dialogs = array(
'title' => 'Unenrolling you from "{course_title}" ({course_tag}) failed.',
'token' => 'failed-to-unenrol',
'purpose' => 'confirmation',
'markup' => '<p>It is not clear why your unenrollment attempt failed - please <a href="ORE_CONTACT_URL">contact OERu</a> to report this problem.',
'markup' => '<p>It is not clear why your unenrollment attempt failed - please <a href="ORE_SUPPORT_CONTACT">contact OERu</a> to report this problem.',
'default' => array(
'label' => 'Ok',
'class' => 'submit',
......
includes/ore_validation.php
View file @ f72e7826
......@@ -65,4 +65,6 @@ $validation_messages = array(
'equalTo' => __('Your confirmation password is different from your first password. They must be the same. Please try re-entering one or both.')
),
),
'wp_username' => __('Your username must be a combination of lowercase letters (a-z) and/or digits (0-9).'),
'value_not_default' => __('You must select something other than the default')
);
js/ore_script.js
View file @ f72e7826
This diff is collapsed.
register-enrol.php
View file @ f72e7826
......@@ -34,7 +34,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
define( 'ORE_VERSION', '2.0.0' );
define('ORE_VERSION', '2.0.0');
// plugin computer name
define('ORE_NAME', 'ORE');
// text Domain
......@@ -59,9 +59,13 @@ define('ORE_SCRIPT', 'ore-script');
define('ORE_CLASS', 'ore-form');
define('ORE_COURSE_ROLE', 'subscriber');
define('ORE_ERROR_LABEL', 'ore_error');
define('ORE_DEFAULT_MENU_LABEL', 'Log in/Create account');
// these two nodes must be defined in the theme as HTML id attributes
define('ORE_CONTAINER', 'ore-container');
define('ORE_TRIGGER', 'ore-trigger');
define('ORE_TRIGGER_LABEL', 'Log in/Create account');
define('ORE_DIALOG_DEFAULT_WIDTH', '550'); // 400px
define('ORE_DIALOG_CLASS', 'ore-dialog');
define('ORE_DIALOG_BODY_CLASS', 'ore-body');
define('ORE_LOGIN_STATUS', 'ore-login-status');
// support link for users of this plugin...
define('ORE_SUPPORT_FORUM', 'https://forums.oeru.org/t/register-enrol');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment