Skip to content

Commit 1c9230a

Browse files
razvanaldea89razvanaldea89
committed
Plugin UI update
Update UI of the plugin admin section.
1 parent 3148bf9 commit 1c9230a

40 files changed

+9842
-1503
lines changed

‎admin.php‎

Lines changed: 67 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,135 +2,104 @@
22

33
function mfbfw_options_page() {
44

5-
global $mfbfw, $mfbfw_version;
6-
75
require_once( FBFW_PATH . 'lib/admin-head.php' );
8-
96
?>
107

118
<div class="wrap">
129

13-
<div id="icon-plugins" class="icon32"></div><h2><?php printf( __('Fancybox for WordPress (version %s)', 'mfbfw'), $mfbfw_version ); ?></h2>
10+
<div id="icon-plugins" class="icon32"></div>
11+
<div class="inlined">
12+
<div id="pluginDescription">
13+
<h2><?php printf( __( 'Fancybox for WordPress (version %s)', 'mfbfw' ), FBFW_VERSION ); ?></h2>
14+
<p>Seamlessly integrates FancyBox into your blog: Upload, activate, and you’re done. Additional configuration optional.</p></div>
15+
<div id="pluginLogo"><img src="<?php echo FBFW_URL . 'img/icon.jpg'; ?>"></div>
16+
</div>
1417

15-
<br />
18+
<br />
1619

17-
<form method="post" action="options.php" id="options">
20+
<form method="post" action="options.php" id="options">
1821

19-
<?php settings_fields( 'mfbfw-options' ); ?>
22+
<?php settings_fields( 'mfbfw-options' ); ?>
2023

21-
<div id="fbfwTabs">
24+
<div id="fbfwTabs">
2225

23-
<h2 class="nav-tab-wrapper">
24-
<ul id="fbfw_tabs">
25-
<li><a class="nav-tab selected" href="#fbfw-info"><?php _e( 'Info', 'mfbfw' ); ?></a></li>
26-
<li><a class="nav-tab" href="#fbfw-appearance"><?php _e( 'Appearance', 'mfbfw' ); ?></a></li>
27-
<li><a class="nav-tab" href="#fbfw-animations"><?php _e( 'Animations', 'mfbfw' ); ?></a></li>
28-
<li><a class="nav-tab" href="#fbfw-behaviour"><?php _e( 'Behaviour', 'mfbfw' ); ?></a></li>
29-
<li><a class="nav-tab" href="#fbfw-galleries"><?php _e( 'Galleries', 'mfbfw' ); ?></a></li>
30-
<li><a class="nav-tab" href="#fbfw-other"><?php _e( 'Miscellaneous', 'mfbfw' ); ?></a></li>
31-
<li><a class="nav-tab" href="#fbfw-calls"><?php _e( 'Extra Calls', 'mfbfw' ); ?></a></li>
32-
<li><a class="nav-tab" href="#fbfw-troubleshooting"><?php _e( 'Troubleshooting', 'mfbfw' ); ?></a></li>
33-
<li><a class="nav-tab" href="#fbfw-support" style="color:green;"><?php _e( 'Support', 'mfbfw' ); ?></a></li>
34-
<li><a class="nav-tab" href="#fbfw-uninstall" style="color:red;"><?php _e ('Uninstall', 'mfbfw' ); ?></a></li>
26+
<ul class="nav-tab-wrapper wp-clearfix">
27+
<li><a href="#fbfw-info"><?php _e( 'Info', 'mfbfw' ); ?></a></li>
28+
<li><a href="#fbfw-appearance"><?php _e( 'Appearance', 'mfbfw' ); ?></a></li>
29+
<li><a href="#fbfw-animations"><?php _e( 'Animations', 'mfbfw' ); ?></a></li>
30+
<li><a href="#fbfw-behaviour"><?php _e( 'Behaviour', 'mfbfw' ); ?></a></li>
31+
<li><a href="#fbfw-galleries"><?php _e( 'Galleries', 'mfbfw' ); ?></a></li>
32+
<li><a href="#fbfw-other"><?php _e( 'Miscellaneous', 'mfbfw' ); ?></a></li>
33+
<li><a href="#fbfw-calls"><?php _e( 'Extra Calls', 'mfbfw' ); ?></a></li>
34+
<li><a href="#fbfw-troubleshooting"><?php _e( 'Troubleshooting', 'mfbfw' ); ?></a></li>
35+
<li><a href="#fbfw-support" style="color:green;"><?php _e( 'Support', 'mfbfw' ); ?></a></li>
36+
<li><a href="#fbfw-uninstall" style="color:red;"><?php _e( 'Uninstall', 'mfbfw' ); ?></a></li>
3537
</ul>
36-
</h2>
3738

38-
<div id="fbfw-info">
39-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-info.php' ); ?>
40-
</div>
39+
<div id="fbfw-info">
40+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-info.php' ); ?>
41+
</div>
4142

42-
<div id="fbfw-appearance">
43-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-appearance.php' ); ?>
44-
</div>
43+
<div id="fbfw-appearance">
44+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-appearance.php' ); ?>
45+
</div>
4546

46-
<div id="fbfw-animations">
47-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-animations.php' ); ?>
48-
</div>
47+
<div id="fbfw-animations">
48+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-animations.php' ); ?>
49+
</div>
4950

50-
<div id="fbfw-behaviour">
51-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-behaviour.php' ); ?>
52-
</div>
51+
<div id="fbfw-behaviour">
52+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-behaviour.php' ); ?>
53+
</div>
5354

54-
<div id="fbfw-galleries">
55-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-galleries.php' ); ?>
56-
</div>
55+
<div id="fbfw-galleries">
56+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-galleries.php' ); ?>
57+
</div>
5758

58-
<div id="fbfw-other">
59-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-other.php' ); ?>
60-
</div>
59+
<div id="fbfw-other">
60+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-other.php' ); ?>
61+
</div>
6162

62-
<div id="fbfw-calls">
63-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-calls.php' ); ?>
64-
</div>
63+
<div id="fbfw-calls">
64+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-calls.php' ); ?>
65+
</div>
6566

66-
<div id="fbfw-troubleshooting">
67-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-troubleshooting.php' ); ?>
68-
</div>
67+
<div id="fbfw-troubleshooting">
68+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-troubleshooting.php' ); ?>
69+
</div>
6970

70-
<div id="fbfw-support">
71-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-support.php' ); ?>
72-
</div>
71+
<div id="fbfw-support">
72+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-support.php' ); ?>
73+
</div>
74+
75+
<div id="fbfw-uninstall">
76+
<?php require_once ( FBFW_PATH . 'lib/admin-tab-uninstall.php' ); ?>
77+
</div>
7378

74-
<div id="fbfw-uninstall">
75-
<?php require_once ( FBFW_PATH . 'lib/admin-tab-uninstall.php' ); ?>
7679
</div>
7780

78-
</div>
81+
<p class="submit" style="text-align:center;">
82+
<input type="submit" name="mfbfw_update" class="button-primary" value="<?php esc_attr_e( 'Save Changes', 'mfbfw' ); ?>" />
83+
</p>
7984

80-
<p class="submit" style="text-align:center;">
81-
<input type="submit" name="mfbfw_update" class="button-primary" value="<?php esc_attr_e( 'Save Changes', 'mfbfw' ); ?>" />
82-
</p>
85+
</form>
8386

84-
</form>
87+
<form method="post" action="">
88+
<div style="text-align:center;padding:0 0 1.5em;margin:-15px 0 5px;">
89+
<?php wp_nonce_field( 'mfbfw-options-reset' ); ?>
90+
<input type="submit" name="mfbfw_update" id="reset" onClick="return confirmDefaults();" class="button-secondary" value="<?php esc_attr_e( 'Revert to defaults', 'mfbfw' ); ?>" />
91+
<input type="hidden" name="action" value="reset" />
92+
</div>
93+
</form>
8594

86-
<form method="post" action="">
87-
<div style="text-align:center;padding:0 0 1.5em;margin:-15px 0 5px;">
88-
<?php wp_nonce_field( 'mfbfw-options-reset' ); ?>
89-
<input type="submit" name="mfbfw_update" id="reset" onClick="return confirmDefaults();" class="button-secondary" value="<?php esc_attr_e( 'Revert to defaults', 'mfbfw' ); ?>" />
90-
<input type="hidden" name="action" value="reset" />
91-
</div>
92-
</form>
93-
94-
<div id="mfbfwd">
95-
96-
<div class="mfbfw_box_yellow">
97-
<p style="line-height:1.5em;"><?php _e( 'If you use FancyBox and like it, buy the author a beer!', 'mfbfw' ); ?></p>
98-
<form id="donate_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
99-
<input name="cmd" value="_donations" type="hidden">
100-
<input name="business" value="janis.skarnelis@gmail.com" type="hidden">
101-
<input name="item_name" value="FancyBox" type="hidden">
102-
<input name="amount" value="10.00" type="hidden">
103-
<input name="no_shipping" value="0" type="hidden">
104-
<input name="no_note" value="1" type="hidden">
105-
<input name="currency_code" value="EUR" type="hidden">
106-
<input name="tax" value="0" type="hidden">
107-
<input name="lc" value="LV" type="hidden">
108-
<input name="bn" value="PP-DonationsBF" type="hidden">
109-
<input type="image" style="margin:0;padding:0" border="0" src="<?php echo FBFW_URL ?>css/img/extra_donate.png" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
110-
</form>
111-
</div>
95+
<div id="mfbfwd" style="border-top:1px dashed #DDDDDD;margin:20px 0 40px;overflow:hidden;padding-top:25px;width:100%;float:left">
11296

113-
<div class="mfbfw_box_yellow">
114-
<p style="line-height:1.5em;"><?php _e( 'The author of this WordPress Plugin also likes beer :P', 'mfbfw' ); ?></p>
115-
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
116-
<input type="hidden" name="cmd" value="_s-xclick"/>
117-
<input type="hidden" name="hosted_button_id" value="3878319"/>
118-
<input type="image" style="margin:0;padding:0" border="0" src="<?php echo FBFW_URL ?>css/img/extra_donate.png" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
119-
<img height="1" width="1" border="0" alt="" src="https://www.paypal.com/es_ES/i/scr/pixel.gif" />
120-
</form>
121-
</div>
97+
Plugin developer and supported by <a href="https://colorlib.com">Colorlib</a>
12298

123-
<div class="mfbfw_box_blue">
124-
<p style="line-height:1.5em;"><a href="http://twitter.com/moskis/"><?php _e( 'Follow me on Twitter for more WordPress Plugins and Themes', 'mfbfw' ); ?></a></p>
125-
<img height="16" width="16" border="0" alt="" src="<?php echo FBFW_URL ?>css/img/extra_twitter.png" />
12699
</div>
127100

128101
</div>
129102

130-
</div>
131-
132-
<?php
133-
103+
<?php
134104
}
135-
136105
?>

‎css/fancy-ui.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
#fbfwTabs {
2+
background: transparent;
3+
border: none;
4+
}
5+
6+
#fbfwTabs .ui-tabs-nav {
7+
background: none;
8+
border: 0px;
9+
border-bottom: 1px solid #aaaaaa;
10+
}
11+
12+
#fbfwTabs .ui-tabs-nav li {
13+
border-radius: 0px;
14+
margin: 0px 5px;
15+
background: #e5e5e5;
16+
}
17+
18+
#fbfwTabs .ui-tabs-nav li a {
19+
font-size: 14px;
20+
font-weight: 600;
21+
outline: none;
22+
box-shadow: none;
23+
}
24+
25+
#fbfwTabs .ui-tabs-nav .ui-tabs-active {
26+
background: #f1f1f1;
27+
border-bottom: 1px solid #e5e5e5;
28+
position: relative;
29+
color:#000;
30+
border:1px solid #aaaaaa;
31+
}
32+
33+
#fbfwTabs .ui-tabs-nav .ui-tabs-active a {
34+
color:#000;
35+
}
36+
37+
#fbfwTabs .ui-tabs-nav .ui-tabs-active:after {
38+
position: absolute;
39+
width: 100%;
40+
height: 3px;
41+
bottom: -2px;
42+
background: #f1f1f1;
43+
content: "";
44+
display: block;
45+
}
46+
47+
#fbfwTabs .inlined>div {
48+
display: inline-block;
49+
width: 50%;
50+
vertical-align: middle;
51+
}
52+
53+
#fbfwTabs .CodeMirror,
54+
#fbfwTabs label[for="extraCalls"] {
55+
width: 100%;
56+
}
57+
58+
.inlined {
59+
display:block;
60+
width:100%;
61+
}
62+
63+
.inlined .slider-horizontal {
64+
dispaly:inline-block;
65+
width:80%;
66+
max-width:200px;
67+
}
68+
69+
.inlined input {
70+
display:inline-block;
71+
vertical-align:middle;
72+
width:20%;
73+
max-width:40px;
74+
}

0 commit comments

Comments
 (0)