From d7fe48d1b683bf11c796dca22c01b83076d1e96b Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sun, 17 Apr 2016 07:09:42 -0400 Subject: New help panel that slides in from the top and pushes the content down so it is not covered. Panel toggles with help button. Still some bugs with small screen viewing. --- view/theme/redbasic/css/style.css | 41 +++-- view/theme/redbasic/js/redbasic.js | 51 +++++- view/tpl/nav.tpl | 367 +++++++++++++++++++------------------ 3 files changed, 254 insertions(+), 205 deletions(-) diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index de48ff74a..5f38f60f1 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -1898,28 +1898,35 @@ nav .badge.mail-update:hover { /* contextual help */ .help-content { - background: rgba(255, 255, 255, 0.9); - color: #333333; - position: fixed; - top: 50px; - left: -80%; - width: 80%; - height: 60%; - padding: 20px; - transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); - box-sizing: border-box; - border: #CCC thin solid; - overflow: auto; + background: rgba(255, 255, 255, 0.9); + color: #333333; + position: fixed; + top: -1000px; + left: 0%; + right: 100%; + width: 100%; + height: auto; + padding: 20px; + transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); + box-sizing: border-box; + border: #CCC thin solid; + overflow: auto; } .help-content-open { - left: 0px; - -moz-box-shadow: 3px 3px 3px #ccc; - -webkit-box-shadow: 3px 3px 3px #ccc; - box-shadow: 3px 3px 3px #ccc; + top: 50px; + -moz-box-shadow: 3px 3px 3px #ccc; + -webkit-box-shadow: 3px 3px 3px #ccc; + box-shadow: 3px 3px 3px #ccc; +} +main { + top: auto; +} +main.help-content-open { + top: 200px; } .help-content dd { - margin-bottom: 1em; + margin-bottom: 1em; } /* contextual help end */ diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index b4cde6efc..ccc24d2b3 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -69,13 +69,48 @@ function makeFullScreen(full) { } /* contextual help */ -$(document).mouseup(function (e) { - var container = $("#help-content"); +$('.help-content').css('top', '-' + $('#help-content').height() + 'px') +$(document).mouseup(function (e) +{ + e.preventDefault; + + var container = $("#help-content"); + + if ((!container.is(e.target) // if the target of the click isn't the container... + && container.has(e.target).length === 0 // ... nor a descendant of the container + && container.hasClass('help-content-open')) + || + ( + ($('#help_nav_btn').is(e.target) || $('#help_nav_btn').has(e.target).length !== 0) + && container.hasClass('help-content-open') + )) { + container.removeClass('help-content-open'); + $('main').removeClass('help-content-open'); + $('main').css('top', 'auto') + } + else if (($('#help_nav_btn').is(e.target) || $('#help_nav_btn').has(e.target).length !== 0) + && !container.hasClass('help-content-open')) { + $('#help-content').addClass('help-content-open'); + $('main').removeClass('help-content-open'); + var mainTop = $('#navbar-collapse-1').height(); + if ($('#navbar-collapse-1').height() < $('#help-content').height()) { + mainTop = $('#help-content').height(); + } + + $('main').css('top', +mainTop + +50 + 'px'); + } - if (!container.is(e.target) // if the target of the click isn't the container... - && container.has(e.target).length === 0 // ... nor a descendant of the container - && container.hasClass('help-content-open')) - { - container.removeClass('help-content-open'); - } }); + +var contextualHelpFocus = function (target, openSidePanel) { + if (openSidePanel) { + $("main").addClass('region_1-on'); // Open the side panel to highlight element + } else { + $("main").removeClass('region_1-on'); + } + // Animate the page scroll to the element and then pulse the element to direct attention + $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - $('#help-content').height() - 50}, 'slow'); + for (i = 0; i < 3; i++) { + $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0); + } +} \ No newline at end of file diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 7f6c33c61..90d741e96 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -1,195 +1,202 @@
-
- - - - {{if $nav.help}} - - {{/if}} - {{if $userinfo}} - {{$userinfo.name}} - {{if $localuser}} - - {{else}} - {{if $nav.lock}} - {{/if}} {{/if}} - {{/if}} -
- + -
- {{$nav.help.5}} -

Click here for more documentation...

+ +
- -- cgit v1.2.3 From f4cca21fdf99f0cdd9be900c9190f7e5f6590828 Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sun, 17 Apr 2016 07:29:08 -0400 Subject: Recover lost language translation accommodation and doc/context restructuring --- doc/context/admin/security/help.html | 3 --- doc/context/channel/help.html | 24 ------------------------ doc/context/cloud/help.html | 22 ---------------------- doc/context/en/admin/security/help.html | 3 +++ doc/context/en/channel/help.html | 8 ++++++++ doc/context/en/cloud/help.html | 6 ++++++ doc/context/en/mail/help.html | 10 ++++++++++ doc/context/en/network/help.html | 10 ++++++++++ doc/context/en/photos/help.html | 6 ++++++ doc/context/en/profile/help.html | 6 ++++++ doc/context/mail/help.html | 10 ---------- doc/context/network/help.html | 26 -------------------------- doc/context/photos/help.html | 22 ---------------------- doc/context/profile/help.html | 22 ---------------------- mod/help.php | 12 ++++++++++-- 15 files changed, 59 insertions(+), 131 deletions(-) delete mode 100644 doc/context/admin/security/help.html delete mode 100644 doc/context/channel/help.html delete mode 100644 doc/context/cloud/help.html create mode 100644 doc/context/en/admin/security/help.html create mode 100644 doc/context/en/channel/help.html create mode 100644 doc/context/en/cloud/help.html create mode 100644 doc/context/en/mail/help.html create mode 100644 doc/context/en/network/help.html create mode 100644 doc/context/en/photos/help.html create mode 100644 doc/context/en/profile/help.html delete mode 100644 doc/context/mail/help.html delete mode 100644 doc/context/network/help.html delete mode 100644 doc/context/photos/help.html delete mode 100644 doc/context/profile/help.html diff --git a/doc/context/admin/security/help.html b/doc/context/admin/security/help.html deleted file mode 100644 index e9a741a5e..000000000 --- a/doc/context/admin/security/help.html +++ /dev/null @@ -1,3 +0,0 @@ -

Security Settings

-

This page contains various administrator settings related to security.

-

To save any changes you make to these settings, you must press the Submit button.

\ No newline at end of file diff --git a/doc/context/channel/help.html b/doc/context/channel/help.html deleted file mode 100644 index 810913ff3..000000000 --- a/doc/context/channel/help.html +++ /dev/null @@ -1,24 +0,0 @@ - -
-
General
-
This is the home page of a channel. It is similar to someone's profile "wall" in a social network context. Posts created by the channel are displayed according to the observer's viewing permissions.
-
Create a Post
-
If you have permission to create posts on the channel page, then you will see the post editor at the top.
-
Channel Content Tabs
-
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
-
\ No newline at end of file diff --git a/doc/context/cloud/help.html b/doc/context/cloud/help.html deleted file mode 100644 index 105947517..000000000 --- a/doc/context/cloud/help.html +++ /dev/null @@ -1,22 +0,0 @@ - -
-
General
-
This page displays a channel's "cloud" files. The files visible to the observer depend on the individual file permissions set by the channel owner. If you have permission to create/upload files you will see control buttons above the file list.
-
Channel Content Tabs
-
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
-
\ No newline at end of file diff --git a/doc/context/en/admin/security/help.html b/doc/context/en/admin/security/help.html new file mode 100644 index 000000000..e9a741a5e --- /dev/null +++ b/doc/context/en/admin/security/help.html @@ -0,0 +1,3 @@ +

Security Settings

+

This page contains various administrator settings related to security.

+

To save any changes you make to these settings, you must press the Submit button.

\ No newline at end of file diff --git a/doc/context/en/channel/help.html b/doc/context/en/channel/help.html new file mode 100644 index 000000000..6e3181cbf --- /dev/null +++ b/doc/context/en/channel/help.html @@ -0,0 +1,8 @@ +
+
General
+
This is the home page of a channel. It is similar to someone's profile "wall" in a social network context. Posts created by the channel are displayed according to the observer's viewing permissions.
+
Create a Post
+
If you have permission to create posts on the channel page, then you will see the post editor at the top.
+
Channel Content Tabs
+
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
+
\ No newline at end of file diff --git a/doc/context/en/cloud/help.html b/doc/context/en/cloud/help.html new file mode 100644 index 000000000..a8f193223 --- /dev/null +++ b/doc/context/en/cloud/help.html @@ -0,0 +1,6 @@ +
+
General
+
This page displays a channel's "cloud" files. The files visible to the observer depend on the individual file permissions set by the channel owner. If you have permission to create/upload files you will see control buttons above the file list.
+
Channel Content Tabs
+
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
+
\ No newline at end of file diff --git a/doc/context/en/mail/help.html b/doc/context/en/mail/help.html new file mode 100644 index 000000000..a2361a135 --- /dev/null +++ b/doc/context/en/mail/help.html @@ -0,0 +1,10 @@ +
+
General
+
The messages displayed in private mail are visible only to you and the single recipient.
+
Combined View
+
Complete conversations can be viewed in a continuous thread by selecting Combined View. Available conversations are displayed beneath the menu in the side panel.
+
Inbox/Outbox
+
Individual sent messages are viewed by selecting Outbox, and incoming messages are viewed using the Inbox filter.
+
New Message
+
Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message if they have not already read it.
+
\ No newline at end of file diff --git a/doc/context/en/network/help.html b/doc/context/en/network/help.html new file mode 100644 index 000000000..53e993b69 --- /dev/null +++ b/doc/context/en/network/help.html @@ -0,0 +1,10 @@ +
+
General
+
The network page displays a stream of posts and conversations, typically ordered by the most recently updated. This page is highly customizable.
+
Create a Post
+
At the top of the page there is a text box that says "Share". Clicking this box opens a new post editor. The post editor is customizable, but the basic editor provides fields for a post body and an optional post Title. Buttons below the text area to the left provide shortcuts to text formatting and inserting links, images, and other data into the post. The buttons to the right provide a post preview, the post permissions setting, and a Submit button to send the post.
+
Privacy Groups
+
The privacy groups you have created are displayed in the side panel. Selecting them filters posts to those created by channels in the chosen group.
+
Post Permissions
+
The access control list (ACL) is what you use to set who can see your new post. Pressing the ACL button beside the Submit button will display a dialog in which you can select what channels and/or privacy groups can see the post. You can also select who is explicitly denied access. For example, say you are planning a surprise party for a friend. You can send an invitation post to everyone in your Friends group except the friend you are surprising. In this case you "show" the Friends group but "don't show" that one person.
+
\ No newline at end of file diff --git a/doc/context/en/photos/help.html b/doc/context/en/photos/help.html new file mode 100644 index 000000000..78b442bb4 --- /dev/null +++ b/doc/context/en/photos/help.html @@ -0,0 +1,6 @@ +
+
General
+
This page displays a channel's photo albums. The images visible to the observer depend on the individual image permissions.
+
Channel Content Tabs
+
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
+
\ No newline at end of file diff --git a/doc/context/en/profile/help.html b/doc/context/en/profile/help.html new file mode 100644 index 000000000..563e0df99 --- /dev/null +++ b/doc/context/en/profile/help.html @@ -0,0 +1,6 @@ +
+
General
+
This is the profile page of a channel. It typically displays information describing the channel. If the channel represents a person in a social network, for example, then the profile might provide contact information and other personal details about the person. Channels can have multiple profiles, where the displayed profile depends on the observer.
+
Channel Content Tabs
+
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
+
\ No newline at end of file diff --git a/doc/context/mail/help.html b/doc/context/mail/help.html deleted file mode 100644 index a2361a135..000000000 --- a/doc/context/mail/help.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
General
-
The messages displayed in private mail are visible only to you and the single recipient.
-
Combined View
-
Complete conversations can be viewed in a continuous thread by selecting Combined View. Available conversations are displayed beneath the menu in the side panel.
-
Inbox/Outbox
-
Individual sent messages are viewed by selecting Outbox, and incoming messages are viewed using the Inbox filter.
-
New Message
-
Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message if they have not already read it.
-
\ No newline at end of file diff --git a/doc/context/network/help.html b/doc/context/network/help.html deleted file mode 100644 index 956af7380..000000000 --- a/doc/context/network/help.html +++ /dev/null @@ -1,26 +0,0 @@ - -
-
General
-
The network page displays a stream of posts and conversations, typically ordered by the most recently updated. This page is highly customizable.
-
Create a Post
-
At the top of the page there is a text box that says "Share". Clicking this box opens a new post editor. The post editor is customizable, but the basic editor provides fields for a post body and an optional post Title. Buttons below the text area to the left provide shortcuts to text formatting and inserting links, images, and other data into the post. The buttons to the right provide a post preview, the post permissions setting, and a Submit button to send the post.
-
Privacy Groups
-
The privacy groups you have created are displayed in the side panel. Selecting them filters posts to those created by channels in the chosen group.
-
Post Permissions
-
The access control list (ACL) is what you use to set who can see your new post. Pressing the ACL button beside the Submit button will display a dialog in which you can select what channels and/or privacy groups can see the post. You can also select who is explicitly denied access. For example, say you are planning a surprise party for a friend. You can send an invitation post to everyone in your Friends group except the friend you are surprising. In this case you "show" the Friends group but "don't show" that one person.
-
\ No newline at end of file diff --git a/doc/context/photos/help.html b/doc/context/photos/help.html deleted file mode 100644 index f41611f8d..000000000 --- a/doc/context/photos/help.html +++ /dev/null @@ -1,22 +0,0 @@ - -
-
General
-
This page displays a channel's photo albums. The images visible to the observer depend on the individual image permissions.
-
Channel Content Tabs
-
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
-
\ No newline at end of file diff --git a/doc/context/profile/help.html b/doc/context/profile/help.html deleted file mode 100644 index 0d4abb8cb..000000000 --- a/doc/context/profile/help.html +++ /dev/null @@ -1,22 +0,0 @@ - -
-
General
-
This is the profile page of a channel. It typically displays information describing the channel. If the channel represents a person in a social network, for example, then the profile might provide contact information and other personal details about the person. Channels can have multiple profiles, where the displayed profile depends on the observer.
-
Channel Content Tabs
-
The channel content tabs are links to other content published by the channel. The About tab links to the channel profile. The Photos tab links to the channel photo galleries. The Files tab links to the general shared files published by the channel.
-
\ No newline at end of file diff --git a/mod/help.php b/mod/help.php index fb0339cd9..8c27156ab 100644 --- a/mod/help.php +++ b/mod/help.php @@ -88,9 +88,17 @@ function load_context_help() { $path = App::$cmd; $args = App::$argv; - + $lang = App::$language; + + if(! isset($lang) || !is_dir('doc/context/' . $lang . '/')) { + $lang = 'en'; + } while($path) { - $context_help = load_doc_file('doc/context/' . $path . '/help.html'); + $context_help = load_doc_file('doc/context/' . $lang . '/' . $path . '/help.html'); + if(!$context_help) { + // Fallback to English if the translation is absent + $context_help = load_doc_file('doc/context/en/' . $path . '/help.html'); + } if($context_help) break; array_pop($args); -- cgit v1.2.3 From 7229cd56ede29fd1ac923f9faf097a17fbb06aa3 Mon Sep 17 00:00:00 2001 From: jeroenpraat Date: Mon, 18 Apr 2016 01:57:54 +0200 Subject: Making sure the great new context help works with all thmes and schema's (3rd party themes: maybe abit of tweaking is still needed). Also fixing some minor cosmetic things. --- view/theme/redbasic/css/style.css | 12 ++++++------ view/theme/redbasic/schema/bluegrid.css | 15 +++++++++++++++ view/theme/redbasic/schema/dark.css | 11 +++++++++++ view/theme/redbasic/schema/simple_black_on_white.css | 10 ++++++++++ view/theme/redbasic/schema/simple_green_on_black.css | 10 ++++++++++ view/theme/redbasic/schema/simple_white_on_black.css | 10 ++++++++++ 6 files changed, 62 insertions(+), 6 deletions(-) diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 5f38f60f1..038bffb2f 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -1898,8 +1898,8 @@ nav .badge.mail-update:hover { /* contextual help */ .help-content { - background: rgba(255, 255, 255, 0.9); - color: #333333; + background: $bgcolour; + color: $font_colour; position: fixed; top: -1000px; left: 0%; @@ -1909,15 +1909,15 @@ nav .badge.mail-update:hover { padding: 20px; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); box-sizing: border-box; - border: #CCC thin solid; + border-bottom: #CCC thin solid; overflow: auto; } .help-content-open { top: 50px; - -moz-box-shadow: 3px 3px 3px #ccc; - -webkit-box-shadow: 3px 3px 3px #ccc; - box-shadow: 3px 3px 3px #ccc; + -moz-box-shadow: 0px 3px 3px #ccc; + -webkit-box-shadow: 0px 3px 3px #ccc; + box-shadow: 0px 3px 3px #ccc; } main { top: auto; diff --git a/view/theme/redbasic/schema/bluegrid.css b/view/theme/redbasic/schema/bluegrid.css index 36e26302a..471bed5e4 100644 --- a/view/theme/redbasic/schema/bluegrid.css +++ b/view/theme/redbasic/schema/bluegrid.css @@ -464,4 +464,19 @@ a:hover > .icon-trash { } } +.help-content { + color: #FFF; + border: none; +} + +.help-content a { + color: #FFF; + font-weight: 600; +} + +.help-content-open { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} diff --git a/view/theme/redbasic/schema/dark.css b/view/theme/redbasic/schema/dark.css index 6ed2501e1..fb18a4159 100644 --- a/view/theme/redbasic/schema/dark.css +++ b/view/theme/redbasic/schema/dark.css @@ -360,3 +360,14 @@ pre { .table > tbody > tr > td { border-color: #888; } + +.help-content { + border-bottom: #222 thin solid; +} + +.help-content-open { + -moz-box-shadow: 0px 3px 3px #222; + -webkit-box-shadow: 0px 3px 3px #222; + box-shadow: 0px 3px 3px #222; +} + diff --git a/view/theme/redbasic/schema/simple_black_on_white.css b/view/theme/redbasic/schema/simple_black_on_white.css index ba9771a40..e5cfb5f46 100644 --- a/view/theme/redbasic/schema/simple_black_on_white.css +++ b/view/theme/redbasic/schema/simple_black_on_white.css @@ -275,3 +275,13 @@ pre { background-color: inherit; border: none; } + +.help-content { + border-bottom: #000 thin solid; +} + +.help-content-open { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} diff --git a/view/theme/redbasic/schema/simple_green_on_black.css b/view/theme/redbasic/schema/simple_green_on_black.css index e6901143b..7e3f901ef 100644 --- a/view/theme/redbasic/schema/simple_green_on_black.css +++ b/view/theme/redbasic/schema/simple_green_on_black.css @@ -305,3 +305,13 @@ pre { .table > tbody > tr > td { border-color: #143D12; } + +.help-content { + border-bottom: #143D12 thin solid; +} + +.help-content-open { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} diff --git a/view/theme/redbasic/schema/simple_white_on_black.css b/view/theme/redbasic/schema/simple_white_on_black.css index a2d024881..d86154297 100644 --- a/view/theme/redbasic/schema/simple_white_on_black.css +++ b/view/theme/redbasic/schema/simple_white_on_black.css @@ -279,3 +279,13 @@ pre { .table > tbody > tr > td { border-color: #FFF; } + +.help-content { + border-bottom: #FFF thin solid; +} + +.help-content-open { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} -- cgit v1.2.3