Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch '960gs' into devel

  • Loading branch information...
commit 55ecffdd2ba4856e5666e3597da8dc914288867e 2 parents 943bd0c + cadb6b8
@romaninsh romaninsh authored
View
76 doc/playground2.php
@@ -0,0 +1,76 @@
+<?php
+class page_playground2 extends Page {
+ function init(){
+ parent::init();
+
+ $this->add('H1')->set('Fullscreen Forms 960gs');
+
+ $t=$this->add('Tabs');
+
+ foreach(array(
+ 'basic',
+ 'inline',
+ 'vertical',
+ 'horizontal',
+ 'basic-2col'
+ ) as $form_class){
+
+ $t1=$t->addTab('atk-form-'.$form_class);
+ $t1->add('H3')->set('$form->setFormClass(\''.$form_class.'\');');
+ $t1->add('SampleForm')->setFormClass($form_class);
+ }
+
+ }
+}
+
+class SampleForm extends Form {
+ function setFormClass($class){
+ $this->template->trySet('form_class',$class);
+ }
+
+ function init(){
+ parent::init();
+ $f=$this;
+
+ $f->addField('line','email')
+ ->validateNotNull()
+ ->validateField('filter_var($this->get(), FILTER_VALIDATE_EMAIL)')
+ ;
+
+ $f->addField('password','password')->validateNotNull()
+ ->setProperty('max-length',30)
+ ->add('Text',null,'after_field')->set('<ins>30 char max</ins>');
+
+ $f->addField('password','password2')
+ ->validateField('$this->get()==$this->owner->getElement("password")->get()',
+ 'Passwords do not match');
+
+
+ $f->addField('line','name')->validateNotNull();
+
+ $f->addField('radio','sex')
+ ->setValueList(array('m'=>'Male','f'=>'Female'))
+ ; // automatically validated to be one of value list
+
+
+ $f->addSeparator(' ');
+
+ $f->addField('DatePicker','date_birth','Birthdate');
+
+ $f->addField('dropdown','age')
+ ->setValueList(array('','11 - 20', '21 - 30', '31 - 40'));
+
+ $f->addField('text','about')
+ ->setProperty('cols',45)->setProperty('rows','5')
+ ->validateField('5000>=strlen($this->get())','Too long');
+
+ $f->addField('checkbox','agreeRules',
+ $f->js()->univ()->dialogURL('Rules',
+ $this->api->getDestinationURL(null,array('showTerms'=>true,'cut_object'=>'rules')))
+ ->getLink('I Agree to Rules and Terms')
+ )->validateNotNull('You must agree to the rules');
+
+ $f->addSubmit('Register');
+}
+
+}
View
6 lib/Form.php
@@ -60,7 +60,6 @@ class Form extends AbstractView {
public $js_widget='ui.atk4_form';
public $js_widget_arguments=array();
-
public $dq = null;
function init(){
/**
@@ -140,6 +139,7 @@ function addField($type,$name,$caption=null,$attr=null){
$last_field=$this->add('Form_Field_'.$type,$name,'form_body','form_line')
->setCaption($caption);
+ $last_field->template->trySet('field_type',$type);
if (is_array($attr)){
foreach ($attr as $key => $value){
$this->last_field->setProperty($key, $value);
@@ -381,6 +381,10 @@ function setLayout($template){
$this->template->trySet('form_class_layout',$c='form_'.basename($template));
return $this;
}
+ function setFormClass($class){
+ $this->template->trySet('form_class',$class);
+ return $this;
+ }
function render(){
// Assuming, that child fields already inserted their HTML code into 'form'/form_body using 'form_line'
// Assuming, that child buttons already inserted their HTML code into 'form'/form_buttons
View
2  lib/Form/Field.php
@@ -32,7 +32,7 @@
public $default_value=null;
// Field customization
- private $separator=':';
+ private $separator='';
public $show_input_only;
View
12 templates/js/atk4_univ.js
@@ -348,24 +348,24 @@ dialogAttention: function(text,options,fn){
$.extend({buttons:{'Ok':function(){ $(this).dialog('close');if(fn)fn()}}},options));
},
message: function(msg,icon){
- if($.ui.atk4_notify && $('#float-messages').length){
- $('#float-messages').atk4_notify().atk4_notify('message',msg,icon);
+ if($.ui.atk4_notify && $('#atk-growl-holder').length){
+ $('#atk-growl-holder').atk4_notify().atk4_notify('message',msg,icon);
return;
}
},
successMessage: function(msg){
var html="";
- if($.ui.atk4_notify && $('#float-messages').length){
- $('#float-messages').atk4_notify().atk4_notify('successMessage',msg);
+ if($.ui.atk4_notify && $('#atk-growl-holder').length){
+ $('#atk-growl-holder').atk4_notify().atk4_notify('successMessage',msg);
return;
}
- if(!$('#float-messages').length)return alert(msg);
+ if(!$('#atk-growl-holder').length)return alert(msg);
html = '<p class="growl">'+msg
+'&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" class="growl_close"></a></p>';
- var growl=$(html).prependTo('#float-messages');
+ var growl=$(html).prependTo('#atk-growl-holder');
growl.find('.growl_close').click(function(){
growl.fadeOut(500,function(){ growl.remove(); });
});
View
6 templates/js/ui.atk4_form.js
@@ -97,7 +97,7 @@ $.widget("ui.atk4_form", {
self._setChanged(true);
}).change(function(){
self._setChanged(true);
- });;
+ });
// This class defines field error template
// <div class="field-error-template"> .. <span class="field-error-text">..</span></div>
@@ -229,7 +229,7 @@ $.widget("ui.atk4_form", {
var field_highlight=field.closest('.atk-field').addClass('field_has_error');
// Clear previous errors
- while(field_highlight.next().is('.atk-error'))field_highlight.next().remove();
+ field_highlight.find('.atk-form-error').remove();
if(!this.template['field_error'].length){
// no template, use alert;
@@ -238,7 +238,7 @@ $.widget("ui.atk4_form", {
}
var error_bl=this.template['field_error'].clone();
error_bl.find('.field-error-text').text(error);
- error_bl.insertAfter(field_highlight).fadeIn();
+ error_bl.appendTo(field_highlight).fadeIn();
this.form.addClass('form_has_error');
View
12 templates/js/ui.atk4_notify.js
@@ -81,17 +81,17 @@ $.widget('ui.atk4_notify', {
/*
* This display a message which you would commonly use on successful operation completion.
*/
- var html=$('<div class="growl"><i class="atk-icon"></i><span>Sample Text</span><b></b></div>');
- if(!icon)icon='success';
- html.find('i').addClass('atk-icon-red');
- html.find('i').addClass('atk-icon-'+icon);
+ var html=$('<div class="atk-growl ui-widget-content ui-corner-all"><i class="atk-icon"></i>Sample Text<i class="ui-icon ui-icon-closethick"></i></div>');
+ if(!icon)icon='basic-check';
+ html.find('.atk-icon').addClass('atk-icons-green');
+ html.find('.atk-icon').addClass('atk-icon-'+icon);
html.find('span').text(text);
- html.find('b').addClass('close');
+ html.find('.ui-icon').addClass('close');
this.messageHTML(html);
},
successMessage: function(text){
- this.message(text,'success');
+ this.message(text,'basic-check');
}
});
View
205 templates/jui/css/agile.css
@@ -1,5 +1,5 @@
-/* Agile Toolkit (c) Agile Technologies // http://www.agiletech.ie/ */
-/* **** BETA **** Updated on 05/01/11 */
+/* Agile Toolkit // www.agiletoolkit.org */
+/* Updated on 18/03/11 */
/* ------------ Resetting elements */
@@ -17,18 +17,51 @@ a:active {outline:none; -moz-outline-style:none;}
a:focus {outline:none; -moz-outline-style:none;}
+/* ------------ General */
+
+html {height:100%;}
+body {min-height:100%;height:100%;}
+div#layout {height:auto !important;height:100%;min-height:100%;}
+div#footer-guard {height:4em;clear:both;}
+#footer {height:3em;margin-top:-3em;}
+#header:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
+#header {.zoom:1;.display:block;}
+
+
+/* ------------ 960 Grid System */
+
+body.gs-12 .gs-wrap {margin-left:auto;margin-right:auto;width:940px;padding-left:10px;padding-right:10px;}
+.gs-12 .g-1, .gs-12 .g-2, .gs-12 .g-3, .gs-12 .g-4, .gs-12 .g-5, .gs-12 .g-6, .gs-12 .g-7, .gs-12 .g-8, .gs-12 .g-9, .gs-12 .g-10, .gs-12 .g-11, .gs-12 .g-12 {margin-left:10px;margin-right:10px;float:left;}
+.g-row:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
+.g-row {.zoom:1;.display:block;}
+.g-row>*:first-child {margin-left:0;}
+.g-row>*:last-child {margin-right:0;}
+
+.gs-12 .g-1 {width:60px;}
+.gs-12 .g-2 {width:140px;}
+.gs-12 .g-3 {width:220px;}
+.gs-12 .g-4 {width:300px;}
+.gs-12 .g-5 {width:380px;}
+.gs-12 .g-6 {width:460px;}
+.gs-12 .g-7 {width:540px;}
+.gs-12 .g-8 {width:620px;}
+.gs-12 .g-9 {width:700px;}
+.gs-12 .g-10 {width:780px;}
+.gs-12 .g-11 {width:860px;}
+.gs-12 .g-12 {width:940px;}
+
+
/* ------------ Typography */
-h1, h2, h3, h4, h5, h6 {line-height:1.3;margin:1em 0 .5em 0;font-weight:bold;}
+h1, h2, h3, h4, h5, h6 {line-height:1.3;margin:1.4em 0 .7em 0;font-weight:bold;}
h1 {font-size:2em;margin:0.67em 0 0.5em 0;}
-h2 {font-size:1.5em; margin:0.75em 0 0.7em 0;}
-h3 {font-size:1.3em; margin:0.83em 0 0.5em 0;}
+h2 {font-size:1.7em;}
+h3 {font-size:1.4em; margin:0.83em 0 0.7em 0;}
h4 {font-size:1.1em;}
-h5 {font-size:0.83em;margin:1.4em 0 0.7em 0}
-h6 {font-size:0.75em;margin:1.4em 0 0.7em 0}
+h5 {font-size:0.83em;}
+h6 {font-size:0.75em;}
p,blockquote, ul, ol, dir, menu {margin:0 0 1.12em 0;}
-p {line-height:1.4;}
dir, menu {margin-left:40px}
ol, ul {margin-left:20px;}
@@ -43,6 +76,7 @@ strong {font-weight:bold;}
.hr, .hr-small {height:60px;background:url(../images/hr.png) repeat-x center;}
.hr-small {height:30px;}
.hr+h1, .hr+h2, .hr+h3, .hr+h4, .hr+h5 {margin-top:0;}
+hr {margin:3em 0;padding:0;border:none;height:1px;background:#ccc;}
/* ------------ jQuery UI settings */
@@ -55,26 +89,29 @@ strong {font-weight:bold;}
.ui-widget {margin-bottom:0;}
.ui-widget.ui-button {margin-bottom:0;}
+#ui-datepicker-div {display:none;}
+
+.ui-dialog {padding:2px;}
+.ui-dialog .ui-dialog-content {padding:17px;}
+
/* ------------ Features */
+.gs-12.atk-fullscreen .gs-wrap {width:inherit;padding:0 50px;}
+.gs-12.atk-fullscreen .gs {width:inherit;padding:0 50px;}
#atk-logo {border:none;font-size:0;line-height:0;width:163px;height:41px;overflow:hidden;}
-.clear {clear:both;font-size:0;line-height:0;}
-.clearfix {overflow:hidden;width:100%;}
.float-left {float:left;}
.float-right {float:right;}
.wrapper {width:980px;margin:auto;}
-.clearing:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
-.clearing {.zoom:1;.display:block;}
+.clear {clear:both;font-size:0;line-height:0;}
+.clearwrap {overflow:hidden;width:100%;}
+.clearafter:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
+.clearafter {.zoom:1;.display:block;}
.atk-button-panel>button {margin:0 .5em 1em 0 !important;}
/* ------------ Styling */
-body {font-size:10pt;font-family:Arial,sans-serif;}
-a:link, a:hover {color:#3886b3;text-decoration:underline;}
-a:visited {color:#3886b3;text-decoration:underline;}
-
.atk-sep {margin:0 0.2em;color:#999;}
.atk-button {padding:0;margin:0;background:#eee;border:none;background:none;}
@@ -104,15 +141,6 @@ a:visited {color:#3886b3;text-decoration:underline;}
.files-container .atk-sep {margin:0 .7em;}
-/* ------------ Sticky footer */
-
-html {height:100%;}
-body {min-height:100%;height:100%;}
-div#layout {height:auto !important;height:100%;min-height:100%;}
-div#footer-guard {height:4em;clear:both;}
-#footer {height:3em;margin-top:-3em;}
-
-
/* ------------ Elements */
/* Paginator */
@@ -149,12 +177,27 @@ td.lister_expander>div .atk-form, td.lister_expander>div .atk-form-buttons {marg
.atk-lister.ui-widget-content {padding:0.2em;}
.atk-lister.ui-widget-content>ul {margin:0;padding:0;list-style-type:none;}
-.atk-lister.ui-widget-content>ul>li {border-bottom:1px solid #eee;}
-.atk-lister.ui-widget-content>ul>li:last-child {border-bottom:none;}
+.atk-lister.ui-widget-content>ul>li {border-top:1px solid #eee;}
+.atk-lister.ui-widget-content>ul>li:first-child {border-top:none;}
.atk-lister.ui-widget-content>.ui-widget-header {margin-bottom:0.2em;}
.atk-lister.ui-widget-content>.ui-widget-header,
-.atk-lister.ui-widget-content>ul>li {padding:0.4em 0.8em;}
-.atk-lister-row.odd {background:#f5f5f5;}
+.atk-lister.ui-widget-content>ul>li {padding:0.4em 0.8em;margin:0;}
+.atk-lister li.even {background:#f5f5f5;}
+
+/* Tabs */
+
+.atk-tabs.ui-widget-content.ui-tabs {padding:0;border:none;}
+ .atk-tabs.ui-tabs .ui-tabs-panel {padding:1.5em 0 0 0}
+.atk-tabs>.ui-widget-header {background:none;border-width:0px 0px 1px 0px;padding:0;border-radius:0;-moz-border-radius:0;}
+
+
+/* Growl */
+
+#atk-growl-holder {position:fixed;top:50px;right:50px;}
+#atk-growl-holder>div {width:180px;padding:20px;margin-top:1em;position:relative;box-shadow:0 5px 10px rgba(0,0,0,0.3);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.3);-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.3);}
+#atk-growl-holder>div:first-child {margin-top:0;}
+#atk-growl-holder>div>.ui-icon {position:absolute;top:3px;right:3px;display:none;cursor:pointer;}
+#atk-growl-holder>div:hover>.ui-icon {display:block;}
/* ------------ Menu */
@@ -190,42 +233,74 @@ ul.sidebar>li.ui-state-active>a {background: #999;}
/* ------------ Forms */
-.atk-form>form>fieldset>dl, .atk-form>form>fieldset>dl>dt, .atk-form>form>fieldset>dl>dd {margin:0;padding:0;}
-.atk-form-buttons, .atk-form>form>fieldset {margin-top:1em;padding-top:1em;border-top:1px solid #eee;}
-.atk-form>form>fieldset:first-child {margin-top:0;padding-top:0;border-top:none;}
-.atk-form>form>fieldset>dl {margin-top:1em;}
-.atk-form>form>fieldset>dl:first-child {margin-top:0;}
-.atk-form>form>fieldset .ui-state-error {padding:0.3em 0.6em 0.3em 0.4em; font-size:90%;}
-.atk-form>form>fieldset .ui-state-error .ui-icon {margin:0 0.3em 0 0;float:left;}
-.atk-form dt label {line-height:1.3;position:relative;z-index:2;}
-.atk-form dt label span {color:#ce0000;position:absolute;right:-0.7em;top:0;margin-right:0;}
-.atk-form ins {color:#999; font-size:90%;text-decoration:none;}
-.atk-form>form>fieldset>dl>dd.atk-field>div input[type=checkbox],
-.atk-form>form>fieldset>dl>dd.atk-field>div input[type=radio] {margin-right:0.4em;}
-.atk-form-buttons button {margin-right:0.5em;}
-.atk-form .atk-hint {margin-bottom:2em;}
-.atk-form-title {margin-bottom:1em;}
-
-/* Common form settings */
-
-.atk-form-simple>form>fieldset>dl>dd.atk-error>div>.ui-icon, .atk-form-vertical>form>fieldset>dl>dd.atk-error>div>.ui-icon {background-position:-160px -192px;}
-
-/* Form Simple */
-
-.atk-form-simple>form>fieldset>dl {display:block;width:100%;.zoom:1;}
-.atk-form-simple>form>fieldset>dl:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
-.atk-form-simple>form>fieldset>dl>dt {float:left;}
-.atk-form-simple>form>fieldset>dl>dt {width:10em;min-width:10em;margin-right:2em;text-align:right;}
-.atk-form-simple>form>fieldset>dl>dd {margin-left:12em;}
-.atk-form-simple .atk-form-buttons {padding-left:12em;}
-.atk-form-simple>form>fieldset>dl>dd.atk-field {margin-bottom:0.2em;}
-.atk-form-simple>form>fieldset>dl>dd.atk-field>ins {margin-top:0.3em;display:block;}
-.atk-form-simple>form>fieldset>dl>dd.atk-error {margin-top:0.5em;}
-.atk-form-simple>form>fieldset>dl>dd.atk-error>div {float:left;}
+.atk-form-error {color:#dd2a2a;}
+.atk-form-error i {display:inline-block;position:relative;top:0.3em;margin-right:0.3em;}
+.atk-form-error .ui-icon {background-image:url(../images/ui-icons-red.png);}
+.atk-form ins {text-decoration:none;color:#777;font-size:90%;}
+h3+.atk-form {margin-top:1em;}
+.atk-form fieldset,
+.atk-form-buttons {margin-top:1.5em;padding-top:1.5em;border-top:1px dashed #ccc;}
+.atk-form fieldset:first-child {margin-top:0;padding-top:0;border-top:none;}
+.field_has_error label {color:#dd2a2a;}
+.field_has_error input[type=text],
+.field_has_error input[type=password],
+.field_has_error textarea {background:#ffeaea;}
+.gs-12 .atk-form dd.form_field input[type=text],
+.gs-12 .atk-form dd.form_field input[type=password],
+.gs-12 .atk-form dd.form_field textarea {width:214px;}
+.gs-12 .atk-form dd.form_field select {width:220px;}
+
+/* Form Common Settings */
+
+.atk-form-basic dl,
+.atk-form-inline dl,
+.atk-form-vertical dl {margin-top:1.5em;}
+.atk-form-basic dl:first-child,
+.atk-form-inline dl:first-child,
+.atk-form-vertical dl:first-child {margin-top:0;}
+.atk-form-basic dt,
+.atk-form-inline dt {float:left;}
+.gs-12 .atk-form-basic dt,
+.gs-12 .atk-form-inline dt {width:140px;}
+.atk-form-basic ins,
+.atk-form-inline ins,
+.atk-form-vertical ins {display:block;margin-top:0.3em;}
+.atk-form-basic dd.atk-form-error,
+.atk-form-vertical dd.atk-form-error {margin-top:0.2em;}
+.atk-form-inline dl:after,
+.atk-form-horizontal dl:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
+.atk-form-inline dl,
+.atk-form-horizontal dl {.zoom:1;.display:block;}
+.atk-form-vertical dt,
+.atk-form-horizontal dt {margin-bottom:0.4em;}
+.gs-12 .atk-form-basic-2col .atk-form-buttons,
+.gs-12 .atk-form-vertical-3col .atk-form-buttons {clear:both;margin-top:0;text-align:right;}
+.gs-12 .atk-form-basic-2col fieldset,
+.gs-12 .atk-form-vertical-3col fieldset {padding-top:0;margin:0 0 1.5em 0;border-top:0;}
+
+/* Form Basic */
+
+.gs-12 .atk-form-basic dd {margin-left:160px;}
+.gs-12 .atk-form-basic-2col fieldset {width:380px;}
+.gs-12 .atk-form-basic-2col fieldset:first-child {float:left;}
+.gs-12 .atk-form-basic-2col fieldset:first-child+fieldset {margin-left:480px;}
+
+/* Form Inline */
+
+.gs-12 .atk-form-inline dl>dd.form_field {margin-left:20px;}
+.gs-12 .atk-form-inline dd.form_field {width:220px;float:left;}
+.gs-12 .atk-form-inline dd.atk-form-error {margin-left:400px;}
+.gs-12 .atk-form-inline dl.atk-form-buttons dd {margin-left:160px;}
/* Form Vertical */
-.atk-form-simple>form>fieldset>dl>dd.atk-field>ins {margin-top:0.3em;display:block;}
-.atk-form-simple>form>fieldset>dl>dd.atk-error {margin-top:0.5em;}
-.atk-form-simple>form>fieldset>dl>dd.atk-error>div {float:left;}
-.atk-form-simple>form>fieldset>dl>dd.atk-error>div>.ui-icon {background-position:-160px -192px;}
+.gs-12 .atk-form-vertical-3col fieldset {float:left;width:220px;margin-left:100px;}
+.gs-12 .atk-form-vertical-3col fieldset:first-child {margin-left:0;}
+
+
+/* Form Horizontal */
+
+.atk-form-horizontal dl {float:left;width:220px;margin-left:20px;}
+.atk-form-horizontal dl:first-child {margin-left:0;}
+.atk-form-horizontal dl.atk-form-buttons {float:none;width:100%;margin-left:0;}
+
View
5 templates/jui/css/ie.js
@@ -0,0 +1,5 @@
+$(function(){
+
+ $('.g-row>*:last-child').css("marginRight","0");
+
+});
View
14 templates/jui/form.html
@@ -1,13 +1,13 @@
<?form?>
-<div id="<?$_name?>" class="atk-form atk-form-<?form_class?>simple<?/?> <?$form_class_layout?>">
+<div id="<?$_name?>" class="atk-form atk-form-<?form_class?>basic<?/?> <?$form_class_layout?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset>
<?form_body?>
<?form_line?>
- <dl>
+ <dl class="atk-field atk-field-<?$field_type?>">
<dt><label for="<?$field_name?>" <?field_mandatory?>class="mandatory"<?/?>><?$field_caption?></label></dt>
- <dd class="atk-field"><div class="form_field"><?$before_field?><?field_input?><input/><?/?><?$after_field?></div><?$field_hint?></dd>
+ <dd class="form_field"><?$before_field?><?field_input?><input/><?/?><?$after_field?><?$field_hint?></dd>
<?field_error?>
<dd class="atk-error">
<div class="ui-state-error ui-corner-all"><span class="ui-icon"></span><?$field_error_str?></div>
@@ -19,7 +19,7 @@
<?form_separator?>
</fieldset>
<fieldset>
- <?separator?><h3 class="atk-form-title"><?$separator_text?></h3><?/?><?/form_separator?>
+ <?separator?><?$separator_text?><?/?><?/form_separator?>
<?form_comment?><?$comment?><?/?>
@@ -27,10 +27,8 @@
<?/form_body?>
- <dd style="display: none" class="field-error-template atk-error">
- <div class="ui-state-error ui-corner-all"><span
- class="ui-icon"></span><span
- class="field-error-text">Sample Error</span></div>
+ <dd style="display:none" class="field-error-template atk-form-error field-error-text">
+ <i class="ui-icon ui-icon-alert"></i>Sample Error
</dd>
</fieldset>
<dl class="atk-form-buttons">
View
BIN  templates/jui/images/ui-icons-red.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
707 templates/jui/page/playground.html
@@ -1,2 +1,705 @@
-<h1>CSS Playground</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<script>
+$(function(){
+
+ $('.atk-form-buttons button').button();
+ $( "#tabs" ).tabs();
+
+});
+</script>
+<style type="text/css">
+.atk-form+h3 {margin-top:3em}
+.ui-tabs-panel, .ui-tabs {border:none !important;padding:0 !important;}
+.ui-tabs-nav {background:none !important;border:none;}
+.ui-tabs-panel {padding-top:2em !important;}
+</style>
+<h1>CSS Reference</h1>
+
+<h2>Forms</h2>
+<div id="tabs">
+ <ul>
+ <li><a href="#tabs-1">atk-form-basic</a></li>
+ <li><a href="#tabs-2">atk-form-inline</a></li>
+ <li><a href="#tabs-3">atk-form-vertical</a></li>
+ <li><a href="#tabs-4">atk-form-horizontal</a></li>
+ <li><a href="#tabs-5">atk-form-basic-2col</a></li>
+ <li><a href="#tabs-6">atk-form-vertical-3col</a></li>
+ </ul>
+ <div id="tabs-1">
+ <h3>.atk-form-basic</h3>
+
+ <div class="atk-form atk-form-basic">
+ <form>
+
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Password too short
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+
+ </div>
+ <div id="tabs-2">
+ <h3>.atk-form-inline</h3>
+ <div class="atk-form atk-form-inline">
+ <form>
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Password too short
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Error message
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Error message
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+ </div>
+ <div id="tabs-3">
+ <h3>.atk-form-vertical</h3>
+ <form class="atk-form atk-form-vertical">
+
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+ <div id="tabs-4">
+ <h3>.atk-form-horizontal</h3>
+ <div class="atk-form atk-form-horizontal">
+ <form>
+
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>Username</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="password" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Password too short
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>State</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>New York</option>
+ <option>California</option>
+ <option>Ohio</option>
+ </select>
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+
+ </div>
+ <div id="tabs-5">
+ <h3>.atk-form-basic</h3>
+ <div class="atk-form atk-form-basic atk-form-basic-2col">
+ <form>
+
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Password too short
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+ </div>
+ <div id="tabs-6">
+ <h3>.atk-form-vertical-3col</h3>
+ <div class="atk-form atk-form-vertical atk-form-vertical-3col">
+ <form>
+
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+ </div>
+</div>
+<h2>Form in dialog</h2>
+<script>
+ $(function() {
+ $( "#dialog-on" ).click(function(){
+
+ $('#dialog').dialog({
+
+ width: '980'
+
+ });
+
+ });
+ });
+</script>
+
+<button id="dialog-on">Show dialog</button>
+<div id="dialog" style="display:none">
+ <div class="atk-form atk-form-basic atk-form-basic-2col">
+ <form>
+ <fieldset>
+
+ <dl class="atk-field">
+ <dt><label>First Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Last Name</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ <ins>16 characters maximum</ins>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Password too short
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>Confirm Password</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field">
+ <dt><label>City</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Country</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>United States of America</option>
+ <option>France</option>
+ <option>Zimbabwe</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+
+ </fieldset>
+
+ <fieldset>
+ <dl class="atk-field field_has_error">
+ <dt><label>Company</label></dt>
+ <dd class="form_field">
+ <input type="text" />
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>Company doesn't exist
+ </dd>
+ </dl>
+ <dl class="atk-field field_has_error">
+ <dt><label>Occupation</label></dt>
+ <dd class="form_field">
+ <select>
+ <option>Web designer</option>
+ <option>Web developer</option>
+ <option>Marketing</option>
+ </select>
+ </dd>
+ <dd class="atk-form-error">
+ <i class="ui-icon ui-icon-alert"></i>You haven't chosen anything
+ </dd>
+ </dl>
+ </fieldset>
+
+ <dl class="atk-form-buttons">
+
+ <dd><button>Submit</button></dd>
+
+ </dl>
+
+ </form>
+ </div>
+</div>
+<h2>960GS layout</h2>
+
+<div class="g-row">
+ <div class="g-3" style="height:10em;background:orange"></div>
+ <div class="g-7" style="height:10em;background:green"></div>
+ <div class="g-2" style="height:10em;background:blue"></div>
+</div>
+
+<hr/>
+
+<div class="g-row">
+ <div class="g-5" style="height:10em;background:orange"></div>
+ <div class="g-4" style="height:10em;background:green"></div>
+ <div class="g-3" style="height:10em;background:blue"></div>
+</div>
+
+<h2>Growl</h2>
+<script>
+
+$(function(){
+
+ $('#start-growl').click(function(){
+
+ $('.atk-growl').show();
+
+ });
+
+ $('.atk-growl>div>i').click(function(){
+
+ $(this).parent().remove();
+ });
+
+});
+
+</script>
+<p>Click the button to see the growl.</p>
+<button id="start-growl">Show Growl</button>
+
+<h2>Lister</h2>
+<div class="atk-lister ui-widget-content ui-corner-all">
+ <ul>
+ <li>Cras non nibh mi, id vestibulum dolor.</li>
+ <li class="even">Sed eu dui in enim sagittis vehicula.</li>
+ <li>Nam venenatis augue sed sem molestie commodo.</li>
+ <li class="even">Sed ultrices scelerisque tellus, eget rutrum leo bibendum ac.</li>
+ </ul>
+</div>
View
52 templates/jui/shared.html
@@ -14,8 +14,12 @@
<link rel="stylesheet" type="text/css" href="<?template?>css/agile.css<?/?>" />
<link rel="stylesheet" type="text/css" href="<?template?>css/atk-icons.css<?/?>" />
<link rel="stylesheet" type="text/css" href="<?template?>css/general.css<?/?>" />
-
+ <!--[if lt IE 9]>
+ <script src=<?template?>css/ie.js<?/?>"></script>
+ <![endif]-->
<?$js_include?>
+
+
<script type="text/javascript">
$(function(){
<?$document_ready?>
@@ -23,36 +27,34 @@
</script>
</head>
- <body>
- <div id="layout">
- <div class="wrapper">
- <div id="header">
- <?logo?><a href="http://agiletoolkit.org/" target="_blank"><div id="atk-logo" class="ui-widget-header float-left"><img src="<?template?>images/atk-logo.png<?/?>" alt="Agile Toolkit" /></div></a><?/logo?>
- <div id="header-right">
- <?Menu?>
- <ul class="ui-state-default ui-corner-all">
- <li><a href="javascript:void(0)">Dashboard</a></li>
- <li><a href="javascript:void(0)">Pipeline</a></li>
- <li><a href="javascript:void(0)">Engagements</a></li>
- <li><a href="javascript:void(0)">Settings</a></li>
- </ul>
- <?/?>
- <div id="atk-version"><b><?name?>Agile Toolkit™<?/?></b><br/><i><?$version?></i></div>
- <div style="display: block" id="float-messages"></div>
- </div>
- <div class="clear"></div>
- </div>
+ <body class="atk-fullscreen gs-12">
+ <div id="layout" class="gs-wrap">
- <div id="Content">
- <?Content?>
+ <div id="header">
+ <?logo?><a href="http://agiletoolkit.org/" target="_blank"><div id="atk-logo" class="ui-widget-header float-left"><img src="<?template?>images/atk-logo.png<?/?>" alt="Agile Toolkit" /></div></a><?/logo?>
+ <div id="header-right">
+ <?Menu?>
+ <ul class="ui-state-default ui-corner-all">
+ <li><a href="javascript:void(0)">Dashboard</a></li>
+ <li><a href="javascript:void(0)">Pipeline</a></li>
+ <li><a href="javascript:void(0)">Engagements</a></li>
+ <li><a href="javascript:void(0)">Settings</a></li>
+ </ul>
<?/?>
+ <div id="atk-version"><b><?name?>Agile Toolkit™<?/?></b><br/><i><?$version?></i></div>
</div>
- <div class="clear"></div>
+ </div>
+
+ <div id="Content">
+ <?Content?>
+ <?/?>
</div>
<div id="footer-guard"></div>
</div>
- <div id="footer" class="wrapper">
+ <div id="footer" class="gs-wrap">
This system is built on <a href="http://agiletoolkit.org/" target="_blank">Agile Toolkit™</a>. Download for free at
- <a href="http://agiletoolkit.org/" target="_blank">www.agiletolokit.org</a></div>
+ <a href="http://agiletoolkit.org/" target="_blank">www.agiletolokit.org</a>
+ </div>
+ <div id="atk-growl-holder"></div>
</body>
</html>
View
2  templates/jui/tabs.html
@@ -1,4 +1,4 @@
-<div id="<?$_name?>">
+<div id="<?$_name?>" class="atk-tabs">
<ul>
<?tabs?>
<li data-tabid="<?$tab_id?>" class="<?$tab_class?>"><a href="<?url?>1<?/?>"><?tab_name?>New Tab<?/?></a></li>

0 comments on commit 55ecffd

Please sign in to comment.
Something went wrong with that request. Please try again.