diff --git a/application/nicewebpage.class.inc.php b/application/nicewebpage.class.inc.php index a533c044a..d1a4a65bd 100644 --- a/application/nicewebpage.class.inc.php +++ b/application/nicewebpage.class.inc.php @@ -52,6 +52,7 @@ class NiceWebPage extends WebPage $this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.popupmenu.js'); $this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/search/search_form_handler.js'); $this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/search/search_form_criteria.js'); + $this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/search/search_form_criteria_raw.js'); $this->add_ready_script( <<< EOF //add new widget called TruncatedList to properly display truncated lists when they are sorted diff --git a/css/css-variables.scss b/css/css-variables.scss index 6e61874f8..e4e13bdcd 100644 --- a/css/css-variables.scss +++ b/css/css-variables.scss @@ -1,8 +1,28 @@ -$highlight-color: #E87C1E; +// Base colors +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: #444 !default; +$gray: #777 !default; +$gray-light: #808080 !default; +$gray-lighter: #ddd !default; +$gray-extra-light: #F1F1F1 !default; + +$white: #FFFFFF !default; + +$combodo-orange: #EA7D1E !default; +$combodo-dark-gray: #585653 !default; + +$combodo-orange-dark: darken($combodo-orange, 13.8%) !default; +$combodo-orange-darker: darken($combodo-orange, 18%) !default; +$combodo-dark-gray-dark: darken($combodo-dark-gray, 13.5%) !default; +$combodo-dark-gray-darker: darken($combodo-dark-gray, 18%) !default; + +// Vars +$highlight-color: $combodo-orange; $grey-color: #555555; $complement-color: #1c94c4; $complement-light: #d6e8ef; -$frame-background-color: #F1F1F1; +$frame-background-color: $gray-extra-light; $text-color: #000; // Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0 $version: "v2.4.0"; \ No newline at end of file diff --git a/css/light-grey.css b/css/light-grey.css index 1c3555356..f46ed2059 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -58,7 +58,7 @@ label { cursor: pointer; } .hilite, .hilite a, .hilite a:visited { - color: #e87c1e; + color: #ea7d1e; text-decoration: none; } table.datatable { @@ -114,7 +114,7 @@ table.listResults td .view-image img { cursor: pointer; margin-bottom: 3px; padding: 2px; - background-color: #e87c1e; + background-color: #ea7d1e; } .edit-image .edit-buttons .button.disabled { cursor: default; @@ -275,7 +275,7 @@ legend.transparent { } .ui-widget-content td a:hover, p a:hover, td a:hover { text-decoration: underline; - color: #e87c1e; + color: #ea7d1e; } .cke_reset_all *:hover { text-decoration: none; @@ -283,8 +283,8 @@ legend.transparent { } table.cke_dialog_contents a.cke_dialog_ui_button_ok { color: #000; - border-color: #e87c1e; - background: #e87c1e; + border-color: #ea7d1e; + background: #ea7d1e; } .cke_notifications_area { display: none; @@ -309,7 +309,7 @@ td a.mailto, td a.mailto:visited { } td a.mailto:hover { text-decoration: underline; - color: #e87c1e; + color: #ea7d1e; padding-left: 20px; background: url(../images/mail.png?v=v2.4.0) no-repeat left; } @@ -329,7 +329,7 @@ a.small_action { padding-left: 5px; padding-top: 2px; padding-bottom: 2px; - background: #e87c1e url(../images/actions_left.png?v=v2.4.0) no-repeat left; + background: #ea7d1e url(../images/actions_left.png?v=v2.4.0) no-repeat left; } .actions_details span { background: url(../images/actions_right.png?v=v2.4.0) no-repeat right; @@ -424,7 +424,7 @@ div.ui-accordion-content { text-decoration: none; } .ui-accordion-content a:hover { - color: #e87c1e; + color: #ea7d1e; text-decoration: none; } .ui-accordion-content ul { @@ -455,7 +455,7 @@ a.CollapsibleLabel.open, td a.CollapsibleLabel.open { padding: 0px 0pt 0px 16px; font-size: 8pt; text-decoration: none; - color: #e87c1e; + color: #ea7d1e; background: url(../images/mini-arrow-orange-open.gif) no-repeat left; } .page_header { @@ -506,7 +506,7 @@ div.actions_menu > ul { nowidth: 70px; padding-left: 5px; /* Nasty work-around for IE... en attendant mieux */ - background: #e87c1e url(../images/actions_left.png?v=v2.4.0) no-repeat top left; + background: #ea7d1e url(../images/actions_left.png?v=v2.4.0) no-repeat top left; cursor: pointer; margin: 0; } @@ -588,7 +588,7 @@ div.actions_menu > ul > li { text-align: left; } .itop_popup li ul li a:hover, #logOffBtn li ul li a:hover { - background: #e87c1e; + background: #ea7d1e; color: #fff; font-weight: bold; } @@ -675,6 +675,7 @@ input.dp-applied { float: left; } /* For search forms */ +/* TODO: Remove when cleaning up old search */ .SearchDrawer { border-top: 5px solid #1c94c4; border-left: 5px solid #1c94c4; @@ -753,6 +754,57 @@ div.HRDrawer { nopadding-right: 1em; margin-top: 0; } +/* Search forms v2 */ +/* TODO: Remove comment before final commit */ +.search_form_handler { + /* Sizing reset */ + /* Hyperlink reset */ +} +.search_form_handler * { + box-sizing: border-box; +} +.search_form_handler a { + color: inherit; + text-decoration: none; +} +.search_form_handler .sf_criterion_area { + /* Common style between criterion and more criterion */ + /* Criteria tags */ + /* More criterion */ +} +.search_form_handler .sf_criterion_area .sf_active_criterion, .search_form_handler .sf_criterion_area .sf_more_criterion { + display: inline-block; +} +.search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .search_form_criteria { + position: relative; + padding: 8px 10px; + background-color: #ea7d1e; + color: #fff; +} +.search_form_handler .sf_criterion_area .search_form_criteria { + display: inline-block; + margin-right: 3px; +} +.search_form_handler .sf_criterion_area .search_form_criteria.locked { + background-color: #f1f1f1; +} +.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group { + display: none; +} +.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened { + display: block; +} +.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list { + position: absolute; + margin: 0px; + top: 100%; + left: 0px; + background-color: #ea7d1e; +} +.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list .sf_mc_field { + cursor: pointer; + white-space: nowrap; +} .mandatory { border: 1px solid #f00; } @@ -892,7 +944,7 @@ div#logo div { margin-top: 2px; margin-right: 4px; padding: 6px 9px; - background-color: #e87c1e; + background-color: #ea7d1e; color: white; border-radius: 6px; text-align: left; @@ -1499,7 +1551,7 @@ img.prev, img.first, img.next, img.last { } div.actions_button { float: right; - background: #e87c1e url("../images/actions_left.png?v=v2.4.0") no-repeat scroll left top; + background: #ea7d1e url("../images/actions_left.png?v=v2.4.0") no-repeat scroll left top; padding-left: 5px; margin-top: 0; margin-right: 10px; @@ -1507,7 +1559,7 @@ div.actions_button { vertical-align: middle; } div.actions_button a, .actions_button a:hover, .actions_button a:visited { - background: #e87c1e url(../images/actions_bkg.png?v=v2.4.0) no-repeat scroll right top; + background: #ea7d1e url(../images/actions_bkg.png?v=v2.4.0) no-repeat scroll right top; color: #fff; padding-right: 8px; cursor: pointer; @@ -1540,7 +1592,7 @@ select#org_id { position: relative; } .edit_mode .dashlet-selected { - background: #e87c1e !important; + background: #ea7d1e !important; padding: 5px; margin: 0; } @@ -1706,7 +1758,7 @@ a.summary, a.summary:hover { z-index: 999; } #DashboardMenu li ul li a:hover { - background: #e87c1e; + background: #ea7d1e; color: #fff; font-weight: bold; list-style: none; @@ -2063,7 +2115,7 @@ span.refresh-button { } #itop-breadcrumb .breadcrumb-item a:hover { text-decoration: none; - color: #e87c1e; + color: #ea7d1e; } #itop-breadcrumb .breadcrumb-item a::after { content: ''; @@ -2127,7 +2179,7 @@ span.refresh-button { margin-bottom: 1px; } .object-ref-icon.fa { - color: #e87c1e; + color: #ea7d1e; font-size: smaller; vertical-align: 1px; margin-right: 1px; diff --git a/css/light-grey.scss b/css/light-grey.scss index aaf3e6658..063cd959c 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -756,6 +756,7 @@ input.dp-applied { } /* For search forms */ +/* TODO: Remove when cleaning up old search */ .SearchDrawer { //background: $complement-color url(../images/search-top-left-corner.png?v=#{$version}) top left no-repeat; border-top: 5px solid $complement-color; @@ -839,6 +840,80 @@ div.HRDrawer { nopadding-right: 1em; margin-top: 0; } +/* Search forms v2 */ +/* TODO: Remove comment before final commit */ +.search_form_handler{ + /* Sizing reset */ + *{ + box-sizing: border-box; + } + /* Hyperlink reset */ + a{ + color: inherit; + text-decoration: none; + } + + .sf_criterion_area{ + /* Common style between criterion and more criterion */ + .sf_active_criterion, + .sf_more_criterion{ + display: inline-block; + } + .sf_more_criterion, + .search_form_criteria{ + position: relative; + padding: 8px 10px; + background-color: $combodo-orange; + color: $white; + } + + /* Criteria tags */ + .search_form_criteria{ + display: inline-block; + margin-right: 3px; + + &.locked{ + background-color: $gray-extra-light; + } + + .sfc_close{ + + } + .sfc_toggle{ + &.opened{ + + } + } + .sfc_title{ + + } + .sfc_form_group{ + display: none; + + &.opened{ + display: block; + } + } + } + + /* More criterion */ + .sf_more_criterion{ + .sf_mc_list{ + position: absolute; + margin: 0px; + top: 100%; + left: 0px; + background-color: $combodo-orange; + + .sf_mc_field{ + cursor: pointer; + white-space: nowrap; + } + } + } + } +} + .mandatory { border: 1px solid #f00; } diff --git a/js/search/search_form_criteria.js b/js/search/search_form_criteria.js index 27d5e0a87..0047f9a10 100644 --- a/js/search/search_form_criteria.js +++ b/js/search/search_form_criteria.js @@ -9,15 +9,15 @@ $(function() // default options options: { - handled_classes: [], - get_current_value_callback: 'getCurrentValue', - set_current_value_callback: function(me, oEvent, oData){ console.log('Search form criteria: set_current_value_callback must be overloaded, this is the default callback.'); }, + get_current_values_callback: 'getCurrentValues', + set_current_values_callback: function(me, oEvent, oData){ console.log('Search form criteria: set_current_values_callback must be overloaded, this is the default callback.'); }, - ref: "", - operator: "=", + ref: '', + operator: '=', values: [], - oql: "", + oql: '', is_removable: true, + is_modified: false, // TODO: change this on value change and remove oql property value }, // the constructor @@ -25,12 +25,14 @@ $(function() { var me = this; - this.element - .addClass('search_form_criteria'); + this.element.addClass('search_form_criteria'); - // Get/SetCurrentValue callbacks handler - this.element - .bind('get_current_value set_current_value', function(oEvent, oData){ + // GetData + this.element.bind('itop.search.criteria.get_data', function(oEvent, oData){ + return me._onGetData(oData); + }); + // Get/SetCurrentValues callbacks handler + this.element.bind('itop.search.criteria.get_current_values itop.search.criteria.set_current_values', function(oEvent, oData){ oEvent.stopPropagation(); var callback = me.options[oEvent.type+'_callback']; @@ -61,8 +63,7 @@ $(function() // revert other modifications here _destroy: function() { - this.element - .removeClass('search_form_criteria'); + this.element.removeClass('search_form_criteria'); }, // _setOptions is called with a hash of all options that are changing // always refresh when changing options @@ -77,52 +78,30 @@ $(function() }, - getCurrentValue: function() + // Public methods + getCurrentValues: function() { - // TODO - // var value = null; - // - // this.element.find(':input').each(function(iIndex, oElem){ - // if($(oElem).is(':hidden') || $(oElem).is(':text') || $(oElem).is(':password') || $(oElem).is('textarea')) - // { - // value = $(oElem).val(); - // } - // else if($(oElem).is('select')) - // { - // if($(oElem).is('select[multiple]')) - // { - // value = []; - // $(oElem).find('option:selected').each(function(){ - // value.push($(this).val()); - // }); - // } - // else - // { - // value = $(oElem).val(); - // } - // } - // else if($(oElem).is(':checkbox') || $(oElem).is(':radio')) - // { - // if(value === null) - // { - // value = []; - // } - // if($(oElem).is(':checked')) - // { - // value.push($(oElem).val()); - // } - // } - // else - // { - // console.log('Form field : Input type not handle yet.'); - // } - // }); - // - // return value; + var aValues = this.options.values; + return aValues; }, - // Prepare DOM element + // Event callbacks + _onGetData: function(oData) + { + var oData = { + 'ref': this.options.ref, + 'operator': this.options.operator, + 'values': this.options.values, + 'is_removable': this.options.is_removable, + 'oql': this.options.oql, + }; + return oData; + }, + + + // DOM element helpers + // - Prepare element DOM structure _prepareElement: function() { // Prepare base DOM structure @@ -130,26 +109,51 @@ $(function() this.element .append('
') .append('') - .append('