rysiek
/
owncalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

exported link-sharing interface and style to separate files to be used independently of event editing interface

master
Michał 'rysiek' Woźniak 2014-01-23 02:56:24 +01:00
parent 0d26359632
commit 08f9a9a8c3
5 changed files with 140 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
css/linkshare.css Normal file
View File

@ -0,0 +1,75 @@
/* +-----------------------------------------------------------------------+ *\
|* | share widget styling | *|
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|* | Licensed under AGPL | *|
\* +-----------------------------------------------------------------------+ */
.share-link-container h3 {
font-weight:bold;
}
.share-link-container input[type="checkbox"] {
vertical-align:middle;
}
.share-link-container input[type="text"],
.share-link-container input[type="e-mail"],
.share-link-container input[type="password"],
.share-link-container input[type="submit"],
.share-link-container input[type="date"] {
color:#333;
font-family: "Lucida Grande", Arial, Verdana, sans-serif;
font-size: 1em;
box-sizing: content-box;
background: #fff;
cursor: text;
margin: .3em 0px;
padding: .6em .5em .4em;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
width:100%;
min-width:10em;
box-sizing:border-box;
}
.share-link-container input[type="submit"] {
cursor:pointer;
}
.share-link-container input:invalid {
background:#fee;
}
/* by default, in a .displayable-container do not display direct-descending .displayable */
.displayable-container > .displayable {
max-height:0px;
-moz-transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
-webkit-transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
overflow:hidden;
opacity:0.1;
}
/* a marker to end a given displayable */
.displayable-container > .displayable:last-child::after {
width:75%;
height:0px;
display:block;
content:" ";
margin:0.2em auto 0.5em auto;
border-top:solid 1px #ddd;
}
/* display the rest once the checkbox is :checked */
.displayable-container > .displayable-control:checked ~ .displayable {
max-height:500px;
opacity:1;
-moz-transition:max-height ease-in 1s, opacity ease-in 0.5s;
-webkit-transition:max-height ease-in 1s, opacity ease-in 0.5s;
transition:max-height ease-in 1s, opacity ease-in 0.5s;
}
/* e-mail form */
.e-mail-form-container {
display:flex;
flex-direction:row;
}
.e-mail-form-container > input {
flex:auto 1;
}
.e-mail-form-container > input[type="submit"] {
min-width:5em;
width:auto;
}

71
css/style.css
View File

@ -332,75 +332,4 @@ button.category{margin:0 3px;}
#event.event.link-shared .location,
#event.event.link-shared .description {
font-weight: bold;
}
.share-link-container h3 {
font-weight:bold;
}
.share-link-container input[type="checkbox"] {
vertical-align:middle;
}
.share-link-container input[type="text"],
.share-link-container input[type="e-mail"],
.share-link-container input[type="password"],
.share-link-container input[type="submit"],
.share-link-container input[type="date"] {
color:#333;
font-family: "Lucida Grande", Arial, Verdana, sans-serif;
font-size: 1em;
box-sizing: content-box;
background: #fff;
cursor: text;
margin: .3em 0px;
padding: .6em .5em .4em;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
width:100%;
min-width:10em;
box-sizing:border-box;
}
.share-link-container input[type="submit"] {
cursor:pointer;
}
.share-link-container input:invalid {
background:#fee;
}
/* by default, in a .displayable-container do not display direct-descending .displayable */
.displayable-container > .displayable {
max-height:0px;
-moz-transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
-webkit-transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
transition:max-height ease-out 0.5s, opacity ease-out 0.5s;
overflow:hidden;
opacity:0.1;
}
/* a marker to end a given displayable */
.displayable-container > .displayable:last-child::after {
width:75%;
height:0px;
display:block;
content:" ";
margin:0.2em auto 0.5em auto;
border-top:solid 1px #ddd;
}
/* display the rest once the checkbox is :checked */
.displayable-container > .displayable-control:checked ~ .displayable {
max-height:500px;
opacity:1;
-moz-transition:max-height ease-in 1s, opacity ease-in 0.5s;
-webkit-transition:max-height ease-in 1s, opacity ease-in 0.5s;
transition:max-height ease-in 1s, opacity ease-in 0.5s;
}
/* e-mail form */
.e-mail-form-container {
display:flex;
flex-direction:row;
}
.e-mail-form-container > input {
flex:auto 1;
}
.e-mail-form-container > input[type="submit"] {
min-width:5em;
width:auto;
}

1
index.php
View File

@ -35,6 +35,7 @@ if(OCP\Config::getUserValue(OCP\USER::getUser(), "calendar", "timezone") == null
}
OCP\Util::addscript('calendar', 'calendar');
OCP\Util::addStyle('calendar', 'style');
OCP\Util::addStyle('calendar', 'linkshare');
OCP\Util::addscript('', 'jquery.multiselect');
OCP\Util::addStyle('', 'jquery.multiselect');
OCP\Util::addscript('calendar','jquery.multi-autocomplete');

54
templates/part.linkshare.php Normal file
View File

@ -0,0 +1,54 @@
<?php /*
Public link-sharing of events/calendars (or, indeed, any items, once integrated into app's interface)
(c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl>
Licensed under AGPL.
*/ ?>
<noscript><style>
/* if JS is disabled, .share-link-form-submit will be available,
hence .share-link-e-mail-send is un-needed*/
.share-link-e-mail-send {
display:none;
}
</style></noscript>
<div class="share-link-container displayable-container"
data-item-type="event"
data-item="<?php p($_['item_id']); ?>"
data-possible-permissions="<?php p($_['permissions']) ?>"
data-link="true"
data-js-enabled="javascript:alert('test')">
<!-- the checkbox that enables and disables the whole thing -->
<form>
<h3><?php p($l->t('Share via link')); ?></h3>
<input type="checkbox" name="share-link" class="share-link displayable-control" value="0" id="share-link-event-<?php p($_['item_id']); ?>" <?php if (isset($_['link_share']['token'])): ?> checked="checked"<?php endif; ?>/>
<label for="share-link-event-<?php p($_['item_id']); ?>"><?php p($l->t('Share link')) ?></label>
<!-- this should be visible only when the share-link checkbox is :checked -->
<div class="share-link-enabled-container displayable">
<!-- link container, contains the share link (duh) -->
<input class="link-text" type="text" readonly="readonly" placeholder="<?php p($l->t('Sharing link will appear here')) ?>" value="<?php if ($_['link_share']['token']) { p(OCP\Util::linkToPublic('calendar') . '&t=' . $_['link_share']['token']); } ?>"/>
<!-- do we want the password shown? default: nope -->
<div class="password-protect-outer-container displayable-container">
<input type="checkbox" name="password-protect" class="password-protect displayable-control" value="0" id="password-protect-event-<?php p($_['item_id']); ?>" <?php if (isset($_['link_share']['share_with'])): ?> checked="checked"<?php endif; ?>/>
<label for="password-protect-event-<?php p($_['item_id']); ?>" class="password-protect-label"><?php p($l->t('Password protect')) ?></label>
<div class="password-container displayable">
<input class="share-link-password" type="password" placeholder="<?php if (isset($_['link_share']['share_with'])) { p($l->t('Password protected')); } else { p($l->t('Password')); } ?>" name="share-link-password"/>
</div>
</div>
<!-- do we want share expiration date? -->
<div class="expire-date-outer-container displayable-container">
<input type="checkbox" name="expire" class="expire displayable-control" value="0" id="expire-event-<?php p($_['item_id']); ?>" <?php if (isset($_['link_share']['expiration'])): ?> checked="checked"<?php endif; ?>/>
<label for="expire-event-<?php p($_['item_id']); ?>" class="expire-label"><?php p($l->t('Set expiration date')) ?></label>
<div class="expire-date-container displayable">
<input class="expire-date" type="date" placeholder="<?php p($l->t('Expiration date')) ?>" name="expire-date" value="<?php if (isset($_['link_share']['expiration'])) { p(substr($_['link_share']['expiration'], 0, 10)); } ?>"/>
</div>
</div>
<!-- link email form -->
<div class="e-mail-form-container">
<input class="share-link-e-mail-address" value="" placeholder="<?php p($l->t('Email link to person')) ?>" type="e-mail"/>
<!-- the send e-mail submit button (unneeded and invisible if JS is disabled) -->
<input class="share-link-e-mail-send" type="submit" value="<?php p($l->t('Send')) ?>"/>
</div>
<!-- the submit button (unneeded and invisible if JS is enabled) -->
<noscript><input class="share-link-form-submit" type="submit" value="<?php p($l->t('Submit link-sharing settings')) ?>"/></noscript>
</div>
</form>
</div>

63
templates/part.share.php
View File

@ -75,59 +75,16 @@ if(is_array($sharedwithByEvent)) {
} ?>
<br />
<input type="button" id="sendemailbutton" style="float:right;" class="submit" value="<?php p($l->t("Send Email")); ?>" data-eventid="<?php p($eventid);?>" data-location="<?php p($location);?>" data-description="<?php p($description);?>" data-dtstart="<?php p($dtstart);?>" data-dtend="<?php p($dtend);?>">
<br />
<!-- link-sharing an event -->
<noscript><style>
/* if JS is disabled, .share-link-form-submit will be available,
hence .share-link-e-mail-send is un-needed*/
.share-link-e-mail-send {
display:none;
}
</style></noscript>
<div class="share-link-container displayable-container"
data-item-type="event"
data-item="<?php p($_['eventid']); ?>"
data-possible-permissions="<?php p($_['permissions']) ?>"
data-link="true"
data-js-enabled="javascript:alert('test')">
<!-- the checkbox that enables and disables the whole thing -->
<form>
<h3><?php p($l->t('Share via link')); ?></h3>
<input type="checkbox" name="share-link" class="share-link displayable-control" value="0" id="share-link-event-<?php p($_['eventid']); ?>" <?php if (isset($linkShare['token'])): ?> checked="checked"<?php endif; ?>/>
<label for="share-link-event-<?php p($_['eventid']); ?>"><?php p($l->t('Share link')) ?></label>
<!-- this should be visible only when the share-link checkbox is :checked -->
<div class="share-link-enabled-container displayable">
<!-- link container, contains the share link (duh) -->
<input class="link-text" type="text" readonly="readonly" placeholder="<?php p($l->t('Sharing link will appear here')) ?>" value="<?php if ($linkShare['token']) { p(OCP\Util::linkToPublic('calendar') . '&t=' . $linkShare['token']); } ?>"/>
<!-- do we want the password shown? default: nope -->
<div class="password-protect-outer-container displayable-container">
<input type="checkbox" name="password-protect" class="password-protect displayable-control" value="0" id="password-protect-event-<?php p($_['eventid']); ?>" <?php if (isset($linkShare['share_with'])): ?> checked="checked"<?php endif; ?>/>
<label for="password-protect-event-<?php p($_['eventid']); ?>" class="password-protect-label"><?php p($l->t('Password protect')) ?></label>
<div class="password-container displayable">
<input class="share-link-password" type="password" placeholder="<?php if (isset($linkShare['share_with'])) { p($l->t('Password protected')); } else { p($l->t('Password')); } ?>" name="share-link-password"/>
</div>
</div>
<!-- do we want share expiration date? -->
<div class="expire-date-outer-container displayable-container">
<input type="checkbox" name="expire" class="expire displayable-control" value="0" id="expire-event-<?php p($_['eventid']); ?>" <?php if (isset($linkShare['expiration'])): ?> checked="checked"<?php endif; ?>/>
<label for="expire-event-<?php p($_['eventid']); ?>" class="expire-label"><?php p($l->t('Set expiration date')) ?></label>
<div class="expire-date-container displayable">
<input class="expire-date" type="date" placeholder="<?php p($l->t('Expiration date')) ?>" name="expire-date" value="<?php if (isset($linkShare['expiration'])) { p(substr($linkShare['expiration'], 0, 10)); } ?>"/>
</div>
</div>
<!-- link email form -->
<div class="e-mail-form-container">
<input class="share-link-e-mail-address" value="" placeholder="<?php p($l->t('Email link to person')) ?>" type="e-mail"/>
<!-- the send e-mail submit button (unneeded and invisible if JS is disabled) -->
<input class="share-link-e-mail-send" type="submit" value="<?php p($l->t('Send')) ?>"/>
</div>
<!-- the submit button (unneeded and invisible if JS is enabled) -->
<noscript><input class="share-link-form-submit" type="submit" value="<?php p($l->t('Submit link-sharing settings')) ?>"/></noscript>
</div>
</form>
</div>
<!-- end link-sharing an event -->
<br />
<br /><?php
/* link-sharing an event */
$tmpl = new OCP\Template('calendar', 'part.linkshare');
$tmpl->assign('item_id', $_['eventid']);
$tmpl->assign('permissions', $_['permissions']);
$tmpl->assign('link_share', $linkShare);
$tmpl->assign('shared', $shared);
$tmpl->printpage();
/* end link-sharing an event */
?><br />
<strong><?php p($l->t('Shared via calendar')); ?></strong>
<ul class="sharedby calendarlist">
<?php foreach($calsharees as $sharee): ?>