assets and options improvment

This commit is contained in:
Pau Capó 2017-03-15 12:48:59 +01:00
parent 2a47c356ee
commit 67981c517d
3 changed files with 213 additions and 123 deletions

37
assets/script.js Normal file
View file

@ -0,0 +1,37 @@
jQuery(document).ready(function($) {
// $('#show-tokens').on('click', function() {
// if ($('input.token').attr('type') == 'password') {
// $('input.token').attr('type', 'text');
// $(this).addClass('dashicons-hidden').removeClass('dashicons-visibility')
// } else {
// $('input.token').attr('type', 'password');
// $(this).addClass('dashicons-visibility').removeClass('dashicons-hidden')
// }
// return false;
// });
$('input.token').each(function() {
var token = $(this)
var toggle = $('<a href="#" class="token-toggle dashicons dashicons-visibility"></a>');
token.wrap('<span class="token-box"></span>').after(toggle);
toggle.on('click', function() {
if (token.attr('type') == 'password') {
token.attr('type', 'text')
toggle.addClass('dashicons-hidden').removeClass('dashicons-visibility')
} else {
token.attr('type', 'password')
toggle.addClass('dashicons-visibility').removeClass('dashicons-hidden')
}
return false;
});
});
$('.repo-toggle').on('click', function() {
var id = $(this).data('repo');
$('.repo-'+id).toggleClass('open')
$('.repo-'+id+' > ul.packages').slideToggle(400)
return false;
});
});

133
assets/style.css Normal file
View file

@ -0,0 +1,133 @@
.wrap {
overflow: hidden;
}
#show-tokens {
float: right;
}
.box {
margin: 20px 0;
background: #FFFFFF;
border: 1px solid #E5E5E5;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.box .title {
border-bottom: 1px solid #EEEEEE;
margin: 0;
padding: 15px;
background: #FFFFFF;
}
.box .title h3 {
font-size: 14px;
line-height: 1em;
margin: 0;
padding: 0;
}
.box .inner {
padding: 15px;
}
.gitea {
width: 100%;
padding: 0;
margin: 0;
border-top: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.gitea > li {
overflow: hidden;
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
.gitea > li > ul {
overflow: hidden;
}
.gitea > li li {
box-sizing: border-box;
padding: 8px 15px;
font-size: 12px;
margin: 0;
// width: 100%;
}
.gitea ul.packages > li {
padding: 0;
}
.gitea li.repository,
.gitea li.package {
width: 210px;
float: left;
}
.gitea a {
text-decoration: none;
outline: 0;
}
.gitea a:focus,
.gitea a:active {
outline: 0;
box-shadow: none;
}
.gitea a.repo-toggle {
font-size: 14px;
line-height: 14px;
}
.gitea > li:hover .row-actions {
left: 0;
}
.gitea input.token {
width: 70%;
}
@media screen and (max-width: 782px) {
.gitea input.token {
width: 100%;
}
}
.times {
color: #555d66;
float: right;
padding: 10px;
font-style: italic;
}
.form-table input[type=text],
.form-table input[type=password] {
width: 75%;
}
.repo-row > ul.packages {
display: none;
}
.repo-row > ul:first-child {
transition: all 0.4s;
}
.repo-row.open > ul:first-child {
background: #2a9bd9;
border-color: #2a9bd9;
color: white;
}
.repo-row.open > ul:first-child a {
color: white;
}
.token-box {
position: relative;
}
.token-toggle {
position: absolute;
right: 10px;
height: 20px;
top: 50%;
margin-top: -10px;
color: #aaa !important;
}
.token-toggle:hover {
color: #aaa !important;
}
.token-toggle:focus,
.token-toggle:active {
outline: 0;
box-shadow: none;
color: #aaa !important;
}

View file

@ -7,7 +7,7 @@ include_once(ABSPATH.'wp-admin/includes/class-wp-upgrader.php');
class Gitea_Options {
private static $_instance;
var $install_log = false;
var $page = false;
public static function getInstance() {
if (!(self::$_instance instanceof self)) {
@ -18,14 +18,23 @@ class Gitea_Options {
function __construct() {
add_action('admin_menu', array($this, 'admin_menu'));
add_action('admin_enqueue_scripts', array($this, 'enqueue_assets'));
}
function admin_menu() {
$options = add_options_page('Gitea Updater', 'Gitea Updater', 'manage_options', 'gitea-updater', array($this, 'options_page'));
add_action('load-'.$options, array($this, 'options_post'));
$this->page = add_options_page('Gitea Updater', 'Gitea Updater', 'manage_options', 'gitea-updater', array($this, 'options_page'));
add_action('load-'.$this->page, array($this, 'options_post'));
}
function enqueue_assets($hook) {
if ($hook != $this->page) return;
wp_enqueue_style('gitea-updater', plugins_url('/assets/style.css', __FILE__));
wp_enqueue_script('gitea-js', plugins_url('/assets/script.js', __FILE__), array('jquery'), null, true);
}
function options_post() {
if (isset($_GET['force-check'])) {
Gitea_Updater::getInstance()->get_gitea_all();
set_site_transient('update_plugins', null);
@ -60,7 +69,7 @@ class Gitea_Options {
</div>
<?php else : ?>
<a href="#" id="show-tokens"><?=__('Show Tokens', 'gitea')?></a>
<a href="#" id="show-tokens" class="dashicons dashicons-visibility"></a>
<form action="<?=admin_url('options-general.php?page=gitea-updater')?>" method="post" class="box access">
@ -68,45 +77,44 @@ class Gitea_Options {
<h3><?=__('Access Tokens', 'gitea')?></h3>
</div>
<div class="inner">
<p><?=__('The access token from a repository always have priority over the global.', 'gitea')?></p>
</div>
<?php foreach ($repositories as $repository => $packages) : ?>
<br>
<table class="widefat striped gitea">
<tr>
<td colspan="3" class="repository">
<a href="<?=$repository?>"><strong><?=parse_url($repository)['host']?></strong></a>
</td>
<td>
<ul class="gitea">
<?php $r = 0; foreach ($repositories as $repository => $packages) : $r++;?>
<li class="repo-row repo-<?=$r?>">
<ul>
<li class="repository">
<strong><a href="#" class="repo-toggle" data-repo="<?=$r?>"><?=parse_url($repository)['host']?></a></strong>
<a href="<?=$repository?>"><span class="dashicons dashicons-external"></span></a>
</li>
<li>
<input type="password" class="token" name="gitea_options[host_token][<?=$repository?>]" value="<?=@$options['host_token'][$repository]?>" placeholder="<?=__('Global Access Token', 'gitea')?>">
</td>
</tr>
</li>
</ul>
<ul class="striped packages">
<?php foreach ($packages as $type => $items) : ?>
<tr>
<td class="empty"></td>
<td colspan="3" class="type">
<?=$types[$type]?>
</td>
</tr>
<?php foreach ($items as $slug => $package) : ?>
<tr>
<td class="empty"></td>
<td class="empty"></td>
<td class="package">
<li>
<ul>
<li class="package">
<span class="dashicons dashicons-admin-<?=($type == 'plugin' ? 'plugins' : 'appearance')?>"></span>
<a href="<?=$package['url']?>"><?=$package['name']?></a>
</td>
<td class="input">
</li>
<li class="input">
<input type="password" class="token" name="gitea_options[repo_token][<?=$package['url']?>]" value="<?=@$options['repo_token'][$package['url']]?>" placeholder="<?=__('Access Token', 'gitea')?>">
</td>
</li>
</ul>
</li>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</li>
</table>
<?php endforeach; ?>
</ul>
<div class="inner">
<p class="submit">
<input type="submit" name="submit" id="submit" class="button button-primary" value="<?=__('Save Changes', 'gitea')?>">
<a href="<?=admin_url('options-general.php?page=gitea-updater&force-check=1')?>" class="button button-primary"><?=__('Reset Cache', 'gitea')?></a>
@ -172,94 +180,6 @@ class Gitea_Options {
<?php /* <textarea style="width:100%" rows="2" onfocus="this.rows=30;" onblur="this.rows=2;" readonly><?php var_dump($repositories); ?></textarea> */ ?>
<style>
.wrap {
overflow: hidden;
}
#show-tokens {
float: right;
}
.box {
margin: 20px 0;
background: #FFFFFF;
border: 1px solid #E5E5E5;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.box .title {
border-bottom: 1px solid #EEEEEE;
margin: 0;
padding: 15px;
background: #FFFFFF;
}
.box .title h3 {
font-size: 14px;
line-height: 1em;
margin: 0;
padding: 0;
}
.box .inner {
padding: 15px;
}
table.gitea {
width: 100%;
}
table.gitea td {
vertical-align: middle;
box-sizing: border-box;
}
table.gitea td.repository {
width: 210px;
}
table.gitea td.type {
width: 190px;
}
table.gitea td.package {
width: 170px;
}
table.gitea td.empty {
width: 1px;
}
table.gitea input {
width: 70%;
}
@media screen and (max-width: 782px) {
table.gitea td {
display: block;
}
table.gitea td.empty {
display: none;
}
table.gitea input {
width: 100%;
}
}
.times {
color: #555d66;
float: right;
padding: 10px;
font-style: italic;
}
.form-table input[type=text],
.form-table input[type=password] {
width: 75%;
}
</style>
<script type="text/javascript">
jQuery('#show-tokens').on('click', function() {
if (jQuery('input.token').attr('type') == 'password') {
jQuery('input.token').attr('type', 'text');
jQuery(this).html('<?=__('Hide Tokens', 'gitea')?>');
} else {
jQuery('input.token').attr('type', 'password');
jQuery(this).html('<?=__('Show Tokens', 'gitea')?>');
}
return false;
});
</script>
<?php
}
@ -276,7 +196,7 @@ class Gitea_Options {
foreach ($themes as $slug => $theme) {
$theme['url'] = $theme['gitea_host'].$theme['gitea_repo'];
$repositories[$plugin['gitea_host']]['theme'][$slug] = $theme;
$repositories[$theme['gitea_host']]['theme'][$slug] = $theme;
}
return $repositories;