diff --git a/css/views-admin-rtl.css b/css/views-admin-rtl.css index 6d1e03a..d98a6c0 100644 --- a/css/views-admin-rtl.css +++ b/css/views-admin-rtl.css @@ -51,18 +51,11 @@ .views-display-tab .fieldset-legend { left: auto; - right: -5px; } -/* @end */ - -/* @group Attachment details actions - * - * Display the "Delete" and "Duplicate" buttons to the right. - */ -.views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions { - left: 0; - right: auto; +.views-display-columns fieldset .fieldset-legend { + padding-left: inherit; + padding-right: 0; } /* @end */ @@ -72,14 +65,11 @@ .views-display-columns > * { float: right; margin-left: 0; - margin-right: 1%; - padding-left: 0; - padding-right: 1%; + margin-right: 2%;; } .views-display-columns > *:first-child { margin-right: 0; - padding-right: 0; } /* @end */ diff --git a/css/views-admin.bartik-rtl.css b/css/views-admin.bartik-rtl.css index abf2a30..db382d5 100644 --- a/css/views-admin.bartik-rtl.css +++ b/css/views-admin.bartik-rtl.css @@ -6,7 +6,16 @@ /* @group Lists */ .views-display-top .secondary .action-list { + padding-left: inherit; padding-right: 0; } /* @end */ + +/* @group Collapsible */ + +.views-display-columns fieldset .fieldset-legend { + padding: 0 2px 4px 0; +} + +/* @end */ diff --git a/css/views-admin.bartik.css b/css/views-admin.bartik.css index 06d0608..0fe5bb9 100644 --- a/css/views-admin.bartik.css +++ b/css/views-admin.bartik.css @@ -210,6 +210,38 @@ margin-top: 12px; } +.views-display-column .fieldset-wrapper { + margin-top: 0; +} + +.views-display-column fieldset legend { + background: none; + border: none; + font-family: inherit; + font-size: 13px; + line-height: inherit; + position: relative; + text-indent: 0; + text-shadow: none; + top: 3px; +} + +.views-display-columns fieldset { + position: inherit; +} + +.views-display-columns fieldset .fieldset-legend { + padding: 0 0 4px 2px; /* LTR */ +} + +.views-display-columns a.fieldset-title { + color: #0071B3; +} + +.views-display-columns a.fieldset-title:hover { + color: #018FE2; +} + .views-ui-display-tab-actions .ctools-button input { color: #0071B3; } diff --git a/css/views-admin.css b/css/views-admin.css index b98a4bc..d740d45 100644 --- a/css/views-admin.css +++ b/css/views-admin.css @@ -155,6 +155,11 @@ .views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions { opacity: 1.0; } + +.js .views-ui-display-tab-bucket:first-of-type { + border-top: none; +} + /* @end */ /* @group Attachment details new section button */ @@ -180,7 +185,6 @@ /* @group Attachment details collapsible fieldset */ .views-display-tab .fieldset-legend { - left: -5px; /* LTR */ position: relative; } @@ -188,16 +192,31 @@ position: relative; } -/* @end */ +.views-display-columns fieldset { + border: none; + margin: 0; + padding: 0; +} -/* @group Attachment details actions - * - * Display the "Delete" and "Duplicate" buttons to the right. - */ -.views-display-tab .fieldset-wrapper > .views-ui-display-tab-bucket .actions { - position: absolute; - right: 0; /* LTR */ - top: -5px; +.views-display-columns fieldset .fieldset-legend { + padding-left: 0; /* LTR */ +} + +.views-display-columns .fieldset-legend { + margin-top: 0; + padding: 6px 0; +} + +.views-display-columns .fieldset-wrapper { + padding: 0; +} + +.views-display-column { + box-sizing: border-box; +} + +.js .views-display-column fieldset.collapsed { + height: auto; } /* @end */ @@ -206,14 +225,12 @@ .views-display-columns > * { float: left; /* LTR */ - margin-left: 1%; /* LTR */ - padding-left: 1%; /* LTR */ + margin-left: 2%; /* LTR */ width: 32%; } .views-display-columns > *:first-child { margin-left: 0; /* LTR */ - padding-left: 0; /* LTR */ } /* @end */ diff --git a/css/views-admin.seven.css b/css/views-admin.seven.css index 8ad4eb8..d897b52 100644 --- a/css/views-admin.seven.css +++ b/css/views-admin.seven.css @@ -44,22 +44,10 @@ fieldset.fieldset-no-legend { padding-right: 0; } -.views-display-tab fieldset { - padding: 0 12px; -} - -.views-display-tab .fieldset-wrapper { - padding: 10px 12px 12px; -} - .views-display-tab fieldset.box-padding .fieldset-wrapper { padding: 0; } -.views-display-tab legend + .fieldset-wrapper { - padding-top: 2.5em; -} - .views-admin .form-item label.option, #views-ui-preview-form .form-item label.option { font-size: 1em; diff --git a/css/views-admin.theme.css b/css/views-admin.theme.css index be85d6a..44750d7 100644 --- a/css/views-admin.theme.css +++ b/css/views-admin.theme.css @@ -531,6 +531,10 @@ ul#views-display-menu-tabs li.add ul.action-list li{ /* @end */ /* @group Attachment details */ +#edit-display-settings { + margin: 12px 12px 0 12px +} + #edit-display-settings-title { font-size: 14px; @@ -539,10 +543,15 @@ ul#views-display-menu-tabs li.add ul.action-list li{ } #edit-display-settings-top { + border: 1px solid #F3F3F3; + line-height: 20px; + margin: 0; + padding-top: 4px; padding-bottom: 4px; + position: relative; } -#edit-display-settings-content { +#edit-displays-settings-settings-content { margin-top: 12px; } @@ -557,10 +566,18 @@ ul#views-display-menu-tabs li.add ul.action-list li{ * The columns that contain the option buckets e.g. Format and Basic Settings */ +.views-display-column { + border: 1px solid #F3F3F3; +} + .views-display-column + .views-display-column { margin-top: 0; } +.views-display-column fieldset.collapsible legend { + font-size: 13px; +} + /* @end */ /* @group Auto preview @@ -611,12 +628,16 @@ ul#views-display-menu-tabs li.add ul.action-list li{ */ .views-ui-display-tab-bucket { - border: 1px solid #f3f3f3; + border-bottom: 1px solid #f3f3f3; line-height: 20px; margin: 0; padding-top: 4px; } +.views-ui-display-tab-bucket:last-of-type { + border-bottom: none; +} + .views-ui-display-tab-bucket + .views-ui-display-tab-bucket { border-top: medium none; } diff --git a/includes/admin.inc b/includes/admin.inc index 21c531d..c23b460 100644 --- a/includes/admin.inc +++ b/includes/admin.inc @@ -930,8 +930,6 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { } } - $form['#attached']['js'][] = drupal_get_path('module', 'ctools') . '/js/collapsible-div.js'; - $form['#tree'] = TRUE; // @todo When more functionality is added to this form, cloning here may be // too soon. But some of what we do with $view later in this function @@ -1038,21 +1036,14 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { $form_state['display_id'] = $display_id; // The part of the page where editing will take place. - // This element is the ctools collapsible-div container for the display edit elements. $form['displays']['settings'] = array( - '#theme_wrappers' => array('container'), - '#attributes' => array( - 'class' => array( - 'views-display-settings', - 'box-margin', - 'ctools-collapsible-container', - ), - ), + '#type' => 'container', '#id' => 'edit-display-settings', ); $display_title = views_ui_get_display_label($view, $display_id, FALSE); - // Add a handle for the ctools collapsible-div. The handle is the title of the display - $form['displays']['settings']['tab_title']['#markup'] = '

' . t('@display_title details', array('@display_title' => ucwords($display_title))) . '

'; + + $form['displays']['settings']['#title'] = '

' . t('@display_title details', array('@display_title' => ucwords($display_title))) . '

'; + // Add a text that the display is disabled. if (!empty($view->display[$display_id]->handler)) { $enabled = $view->display[$display_id]->handler->getOption('enabled'); @@ -1060,15 +1051,9 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { $form['displays']['settings']['disabled']['#markup'] = t('This display is disabled.'); } } - // The ctools collapsible-div content + $form['displays']['settings']['settings_content']= array( '#theme_wrappers' => array('container'), - '#id' => 'edit-display-settings-content', - '#attributes' => array( - 'class' => array( - 'ctools-collapsible-content', - ), - ), ); // Add the edit display content $form['displays']['settings']['settings_content']['tab_content'] = views_ui_get_display_tab($view, $display_id); @@ -1617,21 +1602,25 @@ function views_ui_get_display_tab_details($view, $display) { $build['columns']['second']['footer'] = array(); $build['columns']['second']['pager'] = array(); - // The third column buckets are wrapped in a CTools collapsible div - $build['columns']['third']['#theme_wrappers'] = array('container'); - $build['columns']['third']['#attributes'] = array('class' => array('views-display-column', 'third', 'ctools-collapsible-container', 'ctools-collapsible-remember')); - // Specify an id that won't change after AJAX requests, so ctools can keep - // track of the user's preferred collapsible state. Use the same id across - // different displays of the same view, so changing displays doesn't - // recollapse the column. - $build['columns']['third']['#attributes']['id'] = 'views-ui-advanced-column-' . $view->name; - // Collapse the div by default. - if (!config('views.settings')->get('ui.show.advanced_column')) { - $build['columns']['third']['#attributes']['class'][] = 'ctools-collapsed'; - } - $build['columns']['third']['advanced'] = array('#markup' => '

' . t('Advanced') . '

'); - $build['columns']['third']['collapse']['#theme_wrappers'] = array('container'); - $build['columns']['third']['collapse']['#attributes'] = array('class' => array('ctools-collapsible-content')); + // The third column buckets are wrapped in a fieldset. + $build['columns']['third'] = array( + '#type' => 'fieldset', + '#title' => t('Advanced'), + '#collapsible' => TRUE, + '#collapsed' => TRUE, + '#theme_wrappers' => array('fieldset', 'container'), + '#attributes' => array( + 'class' => array( + 'views-display-column', + 'third', + ), + ), + ); + + // Collapse the fieldset by default. + if (config('views.settings')->get('ui.show.advanced_column')) { + $build['columns']['third']['#collapsed'] = FALSE; + } // Each option (e.g. title, access, display as grid/table/list) fits into one // of several "buckets," or boxes (Format, Fields, Sort, and so on). @@ -1659,20 +1648,10 @@ function views_ui_get_display_tab_details($view, $display) { $column = 'third'; } if (isset($bucket['build']) && is_array($bucket['build'])) { - // The third column is a CTools collapsible div, so - // the structure of the form is a little different for this column - if ($column === 'third') { - $build['columns'][$column]['collapse'][$id] = $bucket['build']; - $build['columns'][$column]['collapse'][$id]['#theme_wrappers'][] = 'views_ui_display_tab_bucket'; - $build['columns'][$column]['collapse'][$id]['#title'] = !empty($bucket['title']) ? $bucket['title'] : ''; - $build['columns'][$column]['collapse'][$id]['#name'] = !empty($bucket['title']) ? $bucket['title'] : $id; - } - else { - $build['columns'][$column][$id] = $bucket['build']; - $build['columns'][$column][$id]['#theme_wrappers'][] = 'views_ui_display_tab_bucket'; - $build['columns'][$column][$id]['#title'] = !empty($bucket['title']) ? $bucket['title'] : ''; - $build['columns'][$column][$id]['#name'] = !empty($bucket['title']) ? $bucket['title'] : $id; - } + $build['columns'][$column][$id] = $bucket['build']; + $build['columns'][$column][$id]['#theme_wrappers'][] = 'views_ui_display_tab_bucket'; + $build['columns'][$column][$id]['#title'] = !empty($bucket['title']) ? $bucket['title'] : ''; + $build['columns'][$column][$id]['#name'] = !empty($bucket['title']) ? $bucket['title'] : $id; } } @@ -1681,9 +1660,9 @@ function views_ui_get_display_tab_details($view, $display) { $build['columns']['first']['sorts'] = views_ui_edit_form_get_bucket('sort', $view, $display); $build['columns']['second']['header'] = views_ui_edit_form_get_bucket('header', $view, $display); $build['columns']['second']['footer'] = views_ui_edit_form_get_bucket('footer', $view, $display); - $build['columns']['third']['collapse']['arguments'] = views_ui_edit_form_get_bucket('argument', $view, $display); - $build['columns']['third']['collapse']['relationships'] = views_ui_edit_form_get_bucket('relationship', $view, $display); - $build['columns']['third']['collapse']['empty'] = views_ui_edit_form_get_bucket('empty', $view, $display); + $build['columns']['third']['arguments'] = views_ui_edit_form_get_bucket('argument', $view, $display); + $build['columns']['third']['relationships'] = views_ui_edit_form_get_bucket('relationship', $view, $display); + $build['columns']['third']['empty'] = views_ui_edit_form_get_bucket('empty', $view, $display); return $build; }