Skip to content

Commit

Permalink
fix(DetailView) improve UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@denaldhushi
denaldhushi committed Mar 17, 2023
1 parent 260471e commit 56c74d2
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 48 deletions.
2 changes: 1 addition & 1 deletion Smarty/templates/Components/DetailView/Actions.tpl
View file
@@ -1,5 +1,5 @@
{if empty($Module_Popup_Edit)}
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="detailview_actionlinks actionlinks_events_todo" style="margin-top: 1.5%;">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="detailview_actionlinks actionlinks_events_todo" style="margin-top: 4.5%;">
<tr>
<td align="left" class="slds-text-heading_medium">
<div class="slds-section slds-is-open">
Expand Down
2 changes: 1 addition & 1 deletion Smarty/templates/Components/DetailView/Body.tpl
View file
@@ -1,4 +1,4 @@
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<table border=0 cellspacing=0 cellpadding=0 width=100% style="margin-top: 1%">
<tr valign=top>
<td style="padding:5px">
<form action="index.php" method="post" name="DetailView" id="formDetailView">
Expand Down
8 changes: 4 additions & 4 deletions Smarty/templates/Components/DetailView/MainHeader.tpl
View file
@@ -1,4 +1,4 @@
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-bottom: -0.5%;margin-top: -0.5%">
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-top: -0.5%">
<div class="slds-col">
<div class="small detailview_utils_table_top">
<div class="detailview_utils_table_tabs noprint">
Expand All @@ -10,7 +10,7 @@
<div class="slds-tabs_default slds-tabs_medium">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item slds-is-active" role="presentation">
<a class="slds-tabs_default__link" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1">
<a class="slds-tabs_default__link" role="tab" tabindex="0" aria-selected="true" style="font-weight: 600;font-size: 15px">
<span class="{$currentModuleIcon['containerClass']}">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="include/LD/assets/icons/{$currentModuleIcon['library']}-sprite/svg/symbols.svg#{$currentModuleIcon['icon']}"></use>
Expand All @@ -21,7 +21,7 @@
</li>
<li class="slds-tabs_default__item slds-tabs_default__overflow-button" role="presentation">
<div class="slds-dropdown-trigger slds-dropdown-trigger_hover">
<a class="slds-button" aria-haspopup="true" href="index.php?action=CallRelatedList&module={$MODULE}&record={$ID}">
<a class="slds-button" aria-haspopup="true" href="index.php?action=CallRelatedList&module={$MODULE}&record={$ID}" style="font-size: 15px">
{$APP.LBL_MORE} {$APP.LBL_INFORMATION}
<svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
<use xlink:href="include/LD/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
Expand All @@ -43,7 +43,7 @@
</span>
</span>
{/if}
<span class="slds-media__body">
<span class="slds-media__body" style="font-size: 15px">
{$_RELATED_MODULE|@getTranslatedString:$_RELATED_MODULE}
</span>
</span>
Expand Down
3 changes: 3 additions & 0 deletions Smarty/templates/Components/DetailView/detailview.css
View file
@@ -0,0 +1,3 @@
body {
overflow-x: hidden;
}
60 changes: 29 additions & 31 deletions Smarty/templates/Components/DetailViewPirvNext.tpl
View file
Expand Up @@ -76,35 +76,33 @@
<span class="slds-assistive-text">{$APP.LNK_LIST_NEXT}</span>
</button>
{/if}

<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last">
<button class="slds-button slds-button_icon slds-button_icon-brand"
aria-haspopup="true"
title="{$APP.TOGGLE_ACTIONS}"
onclick="{literal}
let bodycolumn = document.getElementById('bodycolumn');
if (document.getElementById('actioncolumn').style.display=='none') {
document.getElementById('actioncolumn').style.display='block';
document.getElementById('action-on').style.display='block';
document.getElementById('action-off').style.display='none';
bodycolumn.classList.remove('slds-size_12-of-12');
bodycolumn.classList.add('slds-size_9-of-12');
} else {
document.getElementById('actioncolumn').style.display='none';
document.getElementById('action-on').style.display='none';
document.getElementById('action-off').style.display='block';
bodycolumn.classList.remove('slds-size_9-of-12');
bodycolumn.classList.add('slds-size_12-of-12');
}
window.dispatchEvent(new Event('resize'));{/literal}"
>
<svg class="slds-button__icon" id="action-on" style="display: block;">
<use xlink:href="include/LD/assets/icons/utility-sprite/svg/symbols.svg#contract_alt"></use>
</svg>
<svg class="slds-button__icon" id="action-off" style="display: none;">
<use xlink:href="include/LD/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
</svg>
<span class="slds-assistive-text">{$APP.TOGGLE_ACTIONS}</span>
</button>
</div>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last">
<button class="slds-button slds-button_icon slds-button_icon-brand"
aria-haspopup="true"
title="{$APP.TOGGLE_ACTIONS}"
onclick="{literal}
let bodycolumn = document.getElementById('bodycolumn');
if (document.getElementById('actioncolumn').style.display=='none') {
document.getElementById('actioncolumn').style.display='block';
document.getElementById('action-on').style.display='block';
document.getElementById('action-off').style.display='none';
bodycolumn.classList.remove('slds-size_12-of-12');
bodycolumn.classList.add('slds-size_9-of-12');
} else {
document.getElementById('actioncolumn').style.display='none';
document.getElementById('action-on').style.display='none';
document.getElementById('action-off').style.display='block';
bodycolumn.classList.remove('slds-size_9-of-12');
bodycolumn.classList.add('slds-size_12-of-12');
}
window.dispatchEvent(new Event('resize'));{/literal}"
>
<svg class="slds-button__icon" id="action-on" style="display: block;">
<use xlink:href="include/LD/assets/icons/utility-sprite/svg/symbols.svg#contract_alt"></use>
</svg>
<svg class="slds-button__icon" id="action-off" style="display: none;">
<use xlink:href="include/LD/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
</svg>
<span class="slds-assistive-text">{$APP.TOGGLE_ACTIONS}</span>
</button>
</div>
9 changes: 5 additions & 4 deletions Smarty/templates/DetailView.tpl
View file
Expand Up @@ -8,6 +8,7 @@
* All Rights Reserved.
********************************************************************************/
-->*}
<link rel="stylesheet" type="text/css" href="Smarty/templates/Components/DetailView/detailview.css">
<script type="text/javascript" src="include/js/dtlviewajax.js"></script>
{if $FIELD_DEPENDENCY_DATASOURCE neq ''}
<script type="text/javascript" src="include/js/FieldDependencies.js"></script>
Expand Down Expand Up @@ -64,18 +65,18 @@
{include file='Buttons_List.tpl' isDetailView=true}
</div>
{include file='Components/DetailView/MainHeader.tpl'}
<div class="small" style="padding:14px" onclick="hndCancelOutsideClick();">
<div class="small" style="padding:0px 7px 14px 14px;" onclick="hndCancelOutsideClick();">
{include file='applicationmessage.tpl'}
{include file='DetailViewWidgetBar.tpl'}
<div class="slds-grid slds-gutters" style="width: 99.5%;margin-left: 0.0%;">
<div class="slds-col slds-size_9-of-12" id="bodycolumn" style="background: white;margin-right: 0.5%;">
<div class="slds-col slds-size_9-of-12" id="bodycolumn" style="background: white;">
{include file='Components/DetailView/Body.tpl'}
</div>
<div class="slds-col slds-size_3-of-12" id="actioncolumn" style="background: white;{$DEFAULT_ACTION_PANEL_STATUS}">
<div class="slds-col slds-size_3-of-12" id="actioncolumn" style="background: white;border-left: 1px solid #f3f3f3;{$DEFAULT_ACTION_PANEL_STATUS}">
{include file='Components/DetailView/Actions.tpl'}
</div>
</div>
<div class="slds-grid" style="background: white;padding-bottom: 1%;margin-top: 0.5%">
<div class="slds-grid" style="background: white;padding-bottom: 1%;margin-top: 0.5%;margin-right: 7px;">
<div class="slds-col">
{include file='Components/DetailView/Others.tpl'}
</div>
Expand Down
8 changes: 4 additions & 4 deletions Smarty/templates/RelatedLists.tpl
View file
Expand Up @@ -13,12 +13,12 @@
{include file='Buttons_List.tpl' isDetailView=true}
{include file='applicationmessage.tpl'}
<div id="editlistprice" style="position:absolute;width:300px;"></div>
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-bottom: 0.5%;margin-top: -0.5%">
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-top: -0.5%">
<div class="slds-col">
<div class="slds-tabs_default slds-tabs_medium">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item" role="presentation">
<a class="slds-tabs_default__link" role="tab" tabindex="0" href="index.php?action=DetailView&module={$MODULE}&record={$ID}">
<a class="slds-tabs_default__link" role="tab" tabindex="0" href="index.php?action=DetailView&module={$MODULE}&record={$ID}" style="font-size: 15px">
<span class="{$currentModuleIcon['containerClass']}">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="include/LD/assets/icons/{$currentModuleIcon['library']}-sprite/svg/symbols.svg#{$currentModuleIcon['icon']}"></use>
Expand All @@ -33,7 +33,7 @@
{else}
{if !(GlobalVariable::getVariable('Application_Hide_Related_List', 0))}
<li class="slds-tabs_default__item slds-is-active" role="presentation">
<a class="slds-tabs_default__link" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">
<a class="slds-tabs_default__link" role="tab" tabindex="0" aria-selected="true" style="font-weight: 600;font-size: 15px">
{$APP.LBL_MORE} {$APP.LBL_INFORMATION}
</a>
</li>
Expand All @@ -48,7 +48,7 @@
{else}
{assign var="action" value="DetailView"}
{/if}
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-bottom: -0.5%;margin-top: 0.5%">
<div class="slds-grid slds-gutters" style="background: white; padding-top: 1%;width: 98%;margin-left: 1%;margin-bottom: -0.5%;">
<div class="slds-col">
{include file='RelatedListsHidden.tpl'}
<div id="RLContents">
Expand Down
6 changes: 3 additions & 3 deletions Smarty/templates/RelatedPanes.tpl
View file
Expand Up @@ -29,7 +29,7 @@
{/if}
<li class="slds-tabs_default__item" role="presentation">
<div class="slds-dropdown-trigger slds-dropdown-trigger_hover">
<a class="slds-tabs_default__link" href="index.php?action=CallRelatedList&module={$MODULE}&record={$ID}&RelatedPane={$RLTAB}">
<a class="slds-tabs_default__link" href="index.php?action=CallRelatedList&module={$MODULE}&record={$ID}&RelatedPane={$RLTAB}" style="font-size: 14px">
{$RLARR.label}
</a>
{if empty($tabcache) || $tabcache neq 'dvtTabCacheBottom'}
Expand All @@ -38,9 +38,9 @@
{foreach key=_BLOCK_ID item=_RELATED_BLOCK from=$RLARR.blocks}
<li class="slds-dropdown__item" role="presentation">
<a href="index.php?action=CallRelatedList&module={$MODULE}&record={$ID}&RelatedPane={$RLTAB}&selected_header={$_RELATED_BLOCK.loadfrom}&relation_id={if isset($_RELATED_BLOCK.relatedid)}{$_RELATED_BLOCK.relatedid}{/if}#tbl_{$MODULE}_{$_RELATED_BLOCK.loadfrom}" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Accounts">
<span class="slds-truncate">
<span class="slds-media slds-media_center">
<span class="slds-media__body">
<span class="slds-media__body" style="font-size: 14px">
{$_RELATED_BLOCK.label|@getTranslatedString:$_RELATED_BLOCK.label}
</span>
</span>
Expand Down

0 comments on commit 56c74d2

Please sign in to comment.