mirror of
https://github.com/SuiteCRM/SuiteCRM-Core.git
synced 2025-09-05 10:18:33 +08:00
[Legacy] ListView Styling Changes - Column Chooser & Filter Fixes
This commit is contained in:
balumahendran
Clemente Raposo
parent
74689cc78e
commit
fff96f5267
7 changed files with 213 additions and 10 deletions
|
|
@ -64,12 +64,13 @@
|
|||
<div id="chooserTemplate" class="hidden">
|
||||
<div class="chooserContent">
|
||||
<h1>{$APP.LBL_DISPLAYED}</h1>
|
||||
<ul class="chooserList green"></ul>
|
||||
<div id="error-displayed-columns" class="error"></div>
|
||||
<h1>{$APP.LBL_HIDDEN}</h1>
|
||||
<ul class="chooserList green"></ul>
|
||||
<h1 class="hidden-title">{$APP.LBL_HIDDEN}</h1>
|
||||
<ul class="chooserList red"></ul>
|
||||
<div id="error-displayed-columns" class="error"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{literal}
|
||||
<script>
|
||||
|
||||
|
|
|
|||
|
|
@ -58,10 +58,12 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div id="{$id}_range_div" style="{if preg_match('/^\[/', $smarty.request.{{$id_range}}) || $starting_choice == 'between'}display:none{else}display:''{/if};">
|
||||
<div id="{$id}_range_div" style="{if preg_match('/^\[/', $smarty.request.{{$id_range}}) || $starting_choice == 'between'}display:none{else}display:''{/if};" class="datecalendar">
|
||||
<input autocomplete="off" type="text" name="range_{$id}" id="range_{$id}" value='{if empty($smarty.request.{{$id_range}}) && !empty($smarty.request.{{$original_id}})}{$smarty.request.{{$original_id}}}{else}{$smarty.request.{{$id_range}}}{/if}' title='{{$vardef.help}}' {{$displayParams.field}} {{if !empty($tabindex)}} tabindex='{{$tabindex}}' {{/if}} size="11" class="dateRangeInput">
|
||||
{{if !$displayParams.hiddeCalendar}}
|
||||
<button id="{$id}_trigger" type="button" onclick="return false;" class="btn btn-danger"><span class="suitepicon suitepicon-module-calendar" alt="{$APP.LBL_ENTER_DATE}"></span></button>
|
||||
<button id="{$id}_trigger" type="button" onclick="return false;" class="btn btn-danger">
|
||||
<span alt="{$APP.LBL_ENTER_DATE}">{sugar_getimage name="calendar"}</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
{{if $displayParams.showFormats}}
|
||||
(<span class="dateFormat">{$USER_DATEFORMAT}</span>)
|
||||
|
|
|
|||
|
|
@ -196,4 +196,6 @@
|
|||
@import '../suitep-base/email-queue-mobile.scss';
|
||||
@import '../suitep-base/aos-product.scss';
|
||||
@import '../suitep-base/editview-actionbtn.scss';
|
||||
@import '../suitep-base/listview-filter.scss';
|
||||
@import '../suitep-base/listview-columnchooser.scss';
|
||||
//
|
||||
|
|
|
|||
|
|
@ -82,6 +82,5 @@
|
|||
}
|
||||
button:disabled {
|
||||
width: 28px;
|
||||
margin-left: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
.view-action-index {
|
||||
ul.chooserList>li {
|
||||
padding: 5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
ul.chooserList.green.ui-sortable {
|
||||
margin-bottom: 30px;
|
||||
background: $very-light-grey;
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
margin-right: 2em;
|
||||
width: 45%;
|
||||
float: left;
|
||||
}
|
||||
ul.chooserList.red.ui-sortable {
|
||||
margin-bottom: 30px;
|
||||
background: $very-light-grey;
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
float: right;
|
||||
width:43%;
|
||||
}
|
||||
ul.chooserList.green.ui-sortable>li {
|
||||
background: $off-violet;
|
||||
border-radius: .25em;
|
||||
}
|
||||
#columnsFilterDialog {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.modal-header {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
h4 {
|
||||
text-transform: inherit;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.close {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.modal-footer {
|
||||
padding: 10px;
|
||||
.purple {
|
||||
background:$nepal-grey;
|
||||
text-transform: capitalize;
|
||||
font-weight: 700;
|
||||
&:hover {
|
||||
background: $modal-btn-hover !important;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.red {
|
||||
background: #534d64;
|
||||
text-transform: capitalize;
|
||||
font-weight: 700;
|
||||
&:hover {
|
||||
background: $modal-btn-hover !important;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
clear: both;
|
||||
}
|
||||
#columnsFilterList {
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
.chooserContent {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
margin-bottom: 0.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1.hidden-title {
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 7em;
|
||||
}
|
||||
.left-column,.right-column {
|
||||
width: 15em;
|
||||
max-width: 100%;
|
||||
margin: 0 0.75em 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
108
public/legacy/themes/suite8/css/suitep-base/listview-filter.scss
Normal file
108
public/legacy/themes/suite8/css/suitep-base/listview-filter.scss
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.view-action-index,.view-action-default {
|
||||
#searchDialog {
|
||||
input.button {
|
||||
background-color: $nepal-grey;
|
||||
border-radius: 0.2em;
|
||||
font-weight: bold;
|
||||
height: 2.2em;
|
||||
line-height: 1em;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.3em 1em;
|
||||
text-transform: capitalize;
|
||||
&:hover {
|
||||
background: $pale-blue;
|
||||
}
|
||||
}
|
||||
select {
|
||||
background: url($select-edit-background-url) no-repeat right;
|
||||
background-size: 25px 11px;
|
||||
border-color: $bright-grey;
|
||||
border-width: 1px;
|
||||
}
|
||||
input[type=text] {
|
||||
background-color:$transparent-color;
|
||||
border: 1px solid $form-border-color;
|
||||
}
|
||||
a#basic_search_link {
|
||||
background-color: #93a4b3;
|
||||
background-size: 8px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
line-height: 32px;
|
||||
height: auto;
|
||||
background-position: 120px 6px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.datecalendar {
|
||||
.btn {
|
||||
&:hover,&:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
#Emailsadvanced_searchSearchForm,#EmailTemplatesadvanced_searchSearchForm {
|
||||
textarea {
|
||||
background: $transparent-color;
|
||||
border: 1px solid $form-border-color;
|
||||
}
|
||||
}
|
||||
.search_form {
|
||||
.view {
|
||||
select#saved_search_select {
|
||||
border: 1px solid $form-border-color;
|
||||
}
|
||||
}
|
||||
.saved-search {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.listViewBody {
|
||||
#selectLinkTop {
|
||||
.subnav.ddopen {
|
||||
li {
|
||||
a#button_deselect_top {
|
||||
margin-left: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#actionLinkTop {
|
||||
.subnav.ddopen {
|
||||
left: 0;
|
||||
top: 2em;
|
||||
li {
|
||||
a {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.moduleTitle {
|
||||
border-bottom: 1px solid $form-border-color;
|
||||
.module-title-text {
|
||||
text-transform: uppercase;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-action-index {
|
||||
#selectLinkTop {
|
||||
.subnav {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
li.sugar_action_button {
|
||||
label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@ tr#pagination {
|
|||
|
||||
.list #pagination td .paginationTable .paginationChangeButtons {
|
||||
background-color: $list-view-toolbar-bg;
|
||||
padding: 0.4em 0 0;
|
||||
padding: 0.35em 0 0;
|
||||
}
|
||||
|
||||
.list #pagination td .paginationTable .pageNumbers {
|
||||
|
|
@ -99,7 +99,7 @@ tr#pagination {
|
|||
font-weight: bold;
|
||||
color: $list-view-pagination-color;
|
||||
padding: 0 8px 0 8px;
|
||||
margin: 0 0 0 0;
|
||||
margin: -4px 0 0 0;
|
||||
}
|
||||
|
||||
#listViewStartButton_top {
|
||||
|
|
@ -3040,7 +3040,7 @@ table.subpanel-table li.sugar_action_button {
|
|||
|
||||
@-moz-document url-prefix() {
|
||||
#selectLinkTop li.sugar_action_button {
|
||||
padding-left: 7px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3053,7 +3053,7 @@ table.subpanel-table li.sugar_action_button {
|
|||
|
||||
@-moz-document url-prefix() {
|
||||
#selectLinkBottom li.sugar_action_button {
|
||||
padding-left: 7px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
