]> git.mxchange.org Git - friendica.git/commitdiff
frio - event - some js and template refactoring + event view css styling
authorrabuzarus <>
Fri, 17 Jun 2016 12:09:18 +0000 (14:09 +0200)
committerrabuzarus <>
Fri, 17 Jun 2016 12:09:18 +0000 (14:09 +0200)
mod/events.php
view/theme/frio/css/style.css
view/theme/frio/js/event.js [new file with mode: 0644]
view/theme/frio/templates/event.tpl
view/theme/frio/templates/event_form.tpl
view/theme/frio/templates/event_head.tpl
view/theme/frio/templates/events-js.tpl

index 7786136097ea6646eedb271300077540e609bfe3..e4526ac594bd2ce36281c14e11f3b93a8f47e6c2 100644 (file)
@@ -455,6 +455,7 @@ function events_content(&$a) {
                        '$baseurl'      => $a->get_baseurl(),
                        '$tabs'         => $tabs,
                        '$title'        => t('Events'),
+                       '$view'         => t('View'),
                        '$new_event'=> array($a->get_baseurl().'/events/new',t('Create New Event'),'',''),
                        '$previus'      => array($a->get_baseurl()."/events/$prevyear/$prevmonth",t('Previous'),'',''),
                        '$next'         => array($a->get_baseurl()."/events/$nextyear/$nextmonth",t('Next'),'',''),
@@ -462,7 +463,6 @@ function events_content(&$a) {
 
                        '$events'       => $events,
 
-                       // eignene
                        "today" => t("today"),
                        "month" => t("month"),
                        "week" => t("week"),
@@ -582,7 +582,9 @@ function events_content(&$a) {
                        '$adjust' => array('adjust', t('Adjust for viewer timezone'), $a_checked),
                        '$preview' => t('Preview'),
                        '$acl' => $acl,
-                       '$submit' => t('Submit')
+                       '$submit' => t('Submit'),
+                       '$basic' => t("Basic"),
+                       '$advanced' => t("Advanced")
 
                ));
 
index 185888b7180adad7ea7cd5e0284a7cc8636d14ba..deb3436ded849cae043c81d2ee4b3dc32f67c646 100644 (file)
@@ -1954,15 +1954,35 @@ td.fc-day {
 .event-wrapper .event-owner {
   margin-bottom: 15px;
 }
+.event-wrapper .event-owner img {
+    display: block;
+}
 .event-owner img {
     margin-right: 5px;
     height: 48px;
     width:  48;
     border-radius: 3px;
 }
+.event-wrapper .vevent {
+    margin-left: 0;
+    margin-right: 0;
+    box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
+}
 .event-wrapper .event-buttons {
     margin-top: 15px;
 }
+#event-form-wrapper {
+    padding-top: 5px;
+}
+#event-edit-form-wrapper {
+    padding-top: 15px;
+}
+#event-nav a {
+    color: #555;
+}
+#event-edit-form-wrapper #event-edit-time {
+    padding: 10px 0;
+}
 /*
 * Overwriting for transparency and other colors
 */
diff --git a/view/theme/frio/js/event.js b/view/theme/frio/js/event.js
new file mode 100644 (file)
index 0000000..c6a3541
--- /dev/null
@@ -0,0 +1,124 @@
+$(document).ready(function() { 
+       // go to the permissions tab if the checkbox is checked
+       $('body').on("change", "#id_share", function() {
+
+               if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) { 
+                       $('#acl-wrapper').show();
+                       $("a#event-perms-lnk").parent("li").show();
+                       toggleEventNav("a#event-perms-lnk");
+                       eventAclActive();
+               }
+               else {
+                       $('#acl-wrapper').hide();
+                       $("a#event-perms-lnk").parent("li").hide();
+               }
+       }).trigger('change');
+
+       // disable the finish time input if the user disable it
+       $('body').on("change", "#id_nofinish", function() {
+               enableDisableFinishDate()
+       }).trigger('change');
+
+       // js for the permission sextion
+       $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
+               var selstr;
+               $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
+                       selstr = $(this).text();
+                       $('#jot-public').hide();
+               });
+               if(selstr == null) {
+                       $('#jot-public').show();
+               }
+
+       }).trigger('change');
+
+       // Change the event nav menu.tabs on click
+       $("body").on("click", "#event-nav > li > a", function(e){
+               e.preventDefault();
+               toggleEventNav(this);
+       });
+
+       // this is experimental. We maybe can make use of it to inject
+       // some js code while the event modal opens
+       //$('body').on('show.bs.modal', function () {
+       //      enableDisableFinishDate();
+       //});
+
+       // clear some elements (e.g. the event-preview container) when
+       // selecting a event nav link so it don't appear more than once
+       $('body').on("click", "#event-nav a", function(e) {
+               $("#event-preview").empty();
+               e.preventDefault();
+       });
+
+});
+
+// Load the html of the actual event and incect the output to the
+// event-edit section
+function doEventPreview() {
+       $('#event-edit-preview').val(1);
+       $.post('events',$('#event-edit-form').serialize(), function(data) {
+               $("#event-preview").append(data);
+       });
+       $('#event-edit-preview').val(0);
+}
+
+
+// this function load the content of the edit url into a modal
+function eventEdit(url) {
+       var char = qOrAmp(url);
+       url = url + char + 'mode=none';
+
+       $.get(url, function(data) {
+               $("#modal-body").empty();
+               $("#modal-body").append(data);
+       }).done(function() {
+               loadModalTitle();
+       });
+}
+
+// the following functions show/hide the specific event-edit content 
+// in dependence of the selected nav
+function eventAclActive() {
+       $("#event-edit-wrapper, #event-preview, #event-desc-wrapper").hide();
+       $("#event-acl-wrapper").show();
+}
+
+
+function eventPreviewActive() {
+       $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
+       $("#event-preview").show();
+       doEventPreview();
+}
+
+function eventEditActive() {
+       $("#event-acl-wrapper, #event-preview, #event-desc-wrapper").hide();
+       $("#event-edit-wrapper").show();
+
+       //make sure jot text does have really the active class (we do this because there are some
+       // other events which trigger jot text
+       toggleEventNav($("#event-edit-lnk"));
+}
+
+function eventDescActive() {
+       $("#event-edit-wrapper, #event-preview, #event-acl-wrapper").hide();
+       $("#event-desc-wrapper").show();
+}
+
+// Give the active "event-nav" list element the class "active"
+function toggleEventNav (elm) {
+       // select all li of #event-nav and remove the active class
+       $(elm).closest("#event-nav").children("li").removeClass("active");
+       // add the active class to the parent of the link which was selected
+       $(elm).parent("li").addClass("active");
+}
+
+
+
+// disable the input for the finish date if it is not available
+function enableDisableFinishDate() {
+       if( $('#id_nofinish').is(':checked'))
+               $('#id_finish_text').prop("disabled", true);
+       else
+               $('#id_finish_text').prop("disabled", false);
+}
index 27965bb590899f214ba6806706cb65c9b1a0c716..32e740581a2a451e6ac00721359d5cfd4b6732dc 100644 (file)
@@ -1,16 +1,23 @@
+<script language="javascript" type="text/javascript"
+         src="{{$baseurl}}/view/theme/frio/js/event.js"></script>
 
 {{foreach $events as $event}}
        <div class="event-wrapper">
                <div class="event">
-                       <div class="event-owner">
-                               {{if $event.item.author_name}}
-                               <a href="{{$event.item.author_link}}" ><img src="{{$event.item.author_avatar}}" />{{$event.item.author_name}}</a>
-                               {{/if}}
+                       <div class="media">
+                               <div class="event-owner pull-left">
+                                       {{if $event.item.author_name}}
+                                       <a href="{{$event.item.author_link}}" ><img src="{{$event.item.author_avatar}}" /></a>
+                                       <a href="{{$event.item.author_link}}" >{{$event.item.author_name}}</a>
+                                       {{/if}}
+                               </div>
+                               <div class="media-body">
+                                       {{$event.html}}
+                               </div>
                        </div>
-                       {{$event.html}}
 
                        <div class="event-buttons pull-right">
-                               {{if $event.item.plink}}<a href="{{$event.plink.0}}" title="{{$event.plink.1}}" target="_blank" class="btn "><i class="fa fa-external-link" aria-hidden="true"></i></a>{{/if}}
+                               {{if $event.item.plink}}<a href="{{$event.plink.0}}" title="{{$event.plink.1}}" class="btn "><i class="fa fa-external-link" aria-hidden="true"></i></a>{{/if}}
                                {{if $event.edit}}<a onclick="eventEdit('{{$event.edit.0}}')" title="{{$event.edit.1}}" class="btn"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}
                        </div>
                        <div class="clear"></div>
index df97e01ff20b7353d0580d7b2231948b77656bbe..6ccce703b2b527ba18d8b9c6f20198fa154c9b97 100644 (file)
@@ -1,4 +1,5 @@
-
+<script language="javascript" type="text/javascript"
+         src="{{$baseurl}}/view/theme/frio/js/event.js"></script>
 <div id="event-form-wrapper">
        <h3 class="heading">{{$title}}</h3>
 
@@ -6,7 +7,8 @@
        <ul id="event-nav" class="nav nav-tabs event-nav" role="menubar" data-tabs="tabs">
                {{* Mark the first list entry as active because it is the first which is active after opening
                        the modal. Changing of the activity status is done by js in event_head.tpl *}}
-               <li class="active" role="menuitem"><a id="event-edit-lnk" onclick="eventEditActive(); return false;">Text</a></li>
+               <li class="active" role="menuitem"><a id="event-edit-lnk" onclick="eventEditActive(); return false;">{{$basic}}</a></li>
+               <li role="menuitem"><a id="event-desc-lnk" onclick="eventDescActive(); return false;">{{$advanced}}</a></li>
                {{if $acl}}<li role="menuitem" {{if !$sh_checked}} style="display: none"{{/if}}><a id="event-perms-lnk" onclick="eventAclActive();return false;">Permissions</a></li>{{/if}}
                {{if $preview}}<li role="menuitem"><a id="event-preview-lnk" onclick="eventPreviewActive();return false;">{{$preview}}</a></li>{{/if}}
                {{* commented out because it isn't implemented yet
                <input type="hidden" name="preview" id="event-edit-preview" value="0" />
 
                <div id="event-edit-wrapper">
-                       <p>
-                       {{$desc}}
-                       </p>
 
-                       {{$s_dsel}}
+                       {{include file="field_input.tpl" field=$summary}}
 
-                       {{$f_dsel}}
+                       <div id="event-edit-time">
+                               {{$s_dsel}}
 
-                       {{include file="field_checkbox.tpl" field=$nofinish}}
+                               {{$f_dsel}}
 
-                       {{include file="field_checkbox.tpl" field=$adjust}}
+                               {{include file="field_checkbox.tpl" field=$nofinish}}
 
-                       {{include file="field_input.tpl" field=$summary}}
+                               {{include file="field_checkbox.tpl" field=$adjust}}
+                       </div>
 
+                       {{if ! $eid}}
+                       {{include file="field_checkbox.tpl" field=$share}}
+                       {{/if}}
+
+                       <div class="pull-right" >
+                               <button id="event-submit" type="submit" name="submit" class="btn btn-primary" value="{{$submit|escape:'html'}}">{{$submit}}</button>
+                       </div>
+                       <div class="clear"></div>
+               </div>
+
+               <div id="event-desc-wrapper" style="display: none">
 
                        <div class="form-group">
                                <div id="event-desc-text"><b>{{$d_text}}</b></div>
                                </ul>
                                <div class="clear"></div>
                        </div>
-
-                       {{if ! $eid}}
-                       {{include file="field_checkbox.tpl" field=$share}}
-                       {{/if}}
-
-                       <div class="pull-right" >
-                               <button id="event-submit" type="submit" name="submit" class="btn btn-primary" value="{{$submit|escape:'html'}}">{{$submit}}</button>
-                       </div>
-                       <div class="clear"></div>
                </div>
 
                <div id="event-acl-wrapper" style="display: none">
index ee60f183ec438bc5f14c3d09bafd68fe1823bfe0..a44fd30be6ffecf958be34c73df6b25af8a73a5e 100644 (file)
@@ -4,21 +4,9 @@
          src="{{$baseurl}}/library/fullcalendar/fullcalendar.min.js"></script>
 
 <script>
-
        // loads the event into a modal
        function showEvent(eventid) {
                        addToModal('{{$baseurl}}/events/?id='+eventid);
-       
-       }
-
-       // Load the html of the actual event and incect the output to the
-       // event-edit section
-       function doEventPreview() {
-               $('#event-edit-preview').val(1);
-               $.post('events',$('#event-edit-form').serialize(), function(data) {
-                       $("#event-preview").append(data);
-               });
-               $('#event-edit-preview').val(0);
        }
 
        function changeView(action, viewName) {
                $("#comment-edit-text-desc").bbco_autocomplete('bbcode');
                {{/if}}
 
-               // go to the permissions tab if the checkbox is checked
-               $('body').on("change", "#id_share", function() {
-
-                       if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) { 
-                               $('#acl-wrapper').show();
-                               $("a#event-perms-lnk").parent("li").show();
-                               toggleEventNav("a#event-perms-lnk");
-                               eventAclActive();
-                       }
-                       else {
-                               $('#acl-wrapper').hide();
-                               $("a#event-perms-lnk").parent("li").hide();
-                       }
-               }).trigger('change');
-
-               // disable the finish time input if the user disable it
-               $('body').on("change", "#id_nofinish", function() {
-                       enableDisableFinishDate()
-               }).trigger('change');
-
-               // js for the permission sextion
-               $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
-                       var selstr;
-                       $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
-                               selstr = $(this).text();
-                               $('#jot-public').hide();
-                       });
-                       if(selstr == null) {
-                               $('#jot-public').show();
-                       }
-
-               }).trigger('change');
-
-               // Change the event nav menu.tabs on click
-               $("body").on("click", "#event-nav > li > a", function(e){
-                       e.preventDefault();
-                       toggleEventNav(this);
-               });
-
-               // this is experimental. We maybe can make use of it to inject
-               // some js code while the event modal opens
-               //$('body').on('show.bs.modal', function () {
-               //      enableDisableFinishDate();
-               //});
-
-               // clear some elements (e.g. the event-preview container) when
-               // selecting a event nav link so it don't appear more than once
-               $('body').on("click", "#event-nav a", function(e) {
-                       $("#event-preview").empty();
-                       e.preventDefault();
-               });
-
-
        });
 
 </script>
-
-<script>
-       // the following functions show/hide the specific event-edit content 
-       // in dependence of the selected nav
-       function eventAclActive() {
-               $("#event-edit-wrapper, #event-preview").hide();
-               $("#event-acl-wrapper").show();
-       }
-
-
-       function eventPreviewActive() {
-               $("#event-acl-wrapper, #event-edit-wrapper").hide();
-               $("#event-preview").show();
-               doEventPreview();
-       }
-
-       function eventEditActive() {
-               $("#event-acl-wrapper, #event-preview").hide();
-               $("#event-edit-wrapper").show();
-
-               //make sure jot text does have really the active class (we do this because there are some
-               // other events which trigger jot text
-               toggleEventNav($("#event-edit-lnk"));
-       }
-
-       // Give the active "event-nav" list element the class "active"
-       function toggleEventNav (elm) {
-               // select all li of #event-nav and remove the active class
-               $(elm).closest("#event-nav").children("li").removeClass("active");
-               // add the active class to the parent of the link which was selected
-               $(elm).parent("li").addClass("active");
-       }
-
-       // this function load the content of the edit url into a modal
-       function eventEdit(url) {
-               var char = qOrAmp(url);
-               url = url + char + 'mode=none';
-
-               $.get(url, function(data) {
-                       $("#modal-body").empty();
-                       $("#modal-body").append(data);
-               }).done(function() {
-                       loadModalTitle();
-               });
-       }
-
-       // disable the input for the finish date if it is not available
-       function enableDisableFinishDate() {
-               if( $('#id_nofinish').is(':checked'))
-                       $('#id_finish_text').prop("disabled", true);
-               else
-                       $('#id_finish_text').prop("disabled", false);
-       }
-</script>
index dcd522c5869547b50d89c4ec97a9e3cdf7a4647a..8734d4ea8322f4ec179d4ec3f4b0fb8d52e95f07 100644 (file)
@@ -9,7 +9,7 @@
                        <ul class="nav nav-pills">
                                <li class="dropdown pull-right">
                                        <a class="btn btn-link btn-sm dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="true">
-                                               <i class="fa fa-angle-down"></i> Views
+                                               <i class="fa fa-angle-down"></i> {{$view}}
                                        </a>
                                        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views">
                                                <li role="menuitem">