Skip to content

Change image default placeholder icons. Better details bar appearance. #2485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 21, 2024
Merged

Change image default placeholder icons. Better details bar appearance. #2485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dt-assets/build/css/style.min.css
View file
Open in desktop

Large diffs are not rendered by default.

77 changes: 35 additions & 42 deletions dt-assets/functions/details-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,17 +106,17 @@ class="second-bar" id="second-bar-large">
<table style="margin: 0;">
<tbody style="border: 0;">
<tr style="border: 0;">
<td style="padding: <?php echo !empty( $picture ) ? '0' : '10px'; ?> 15px 0 0;">
<td style="padding: 0">
<?php
if ( !empty( $picture ) ) : ?>
<img class="dt-storage-upload" src="<?php echo esc_html( $picture )?>" style="width:55px; vertical-align:middle; cursor: pointer;"
<img class="dt-storage-upload details-bar-picture" src="<?php echo esc_html( $picture )?>"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
data-storage_upload_key_prefix="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_delete_enabled="1">
<?php else : ?>
<i class="dt-storage-upload <?php echo esc_html( $icon ) ?> medium" style=" color:<?php echo esc_html( $type_color ); ?>; font-size: 55px; cursor: pointer;"
<i class="dt-storage-upload details-bar-picture <?php echo esc_html( $icon ) ?> medium"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
Expand Down Expand Up @@ -277,46 +277,39 @@ class="second-bar" id="second-bar-small">
}?>">
</a>
</div>
<div class="cell small-10 center" style="display: flex; justify-content: center;">
<table style="margin: 0; max-width: 60%;">
<tbody style="border: 0;">
<tr style="border: 0;">
<td style="padding: <?php echo !empty( $picture ) ? '0' : '10px'; ?> 15px 0 0;">
<?php $picture = apply_filters( 'dt_record_picture', $record_picture, $dt_post_type, $post_id );
$type_color = isset( $dt_post['type']['key'], $post_settings['fields']['type']['default'][$dt_post['type']['key']]['color'] ) ? $post_settings['fields']['type']['default'][$dt_post['type']['key']]['color'] : '#000000';
if ( !empty( $picture ) ) : ?>
<img class="dt-storage-upload" src="<?php echo esc_html( $picture )?>" style="width:55px; vertical-align:middle"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
data-storage_upload_key_prefix="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_delete_enabled="1">
<?php else : ?>
<i class="dt-storage-upload <?php echo esc_html( $icon ) ?> medium" style=" color:<?php echo esc_html( $type_color ); ?>; font-size: 55px;"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
data-storage_upload_key_prefix="<?php echo esc_attr( $dt_post_type )?>"></i>
<div class="cell small-10 center" style="display: flex; justify-content: center">
<div style="display: flex">
<?php $picture = apply_filters( 'dt_record_picture', $record_picture, $dt_post_type, $post_id );
if ( !empty( $picture ) ) : ?>
<img class="dt-storage-upload details-bar-picture" src="<?php echo esc_html( $picture )?>"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
data-storage_upload_key_prefix="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_delete_enabled="1">
<?php else : ?>
<i class="dt-storage-upload details-bar-picture <?php echo esc_html( $icon ) ?> medium"
data-storage_upload_post_type="<?php echo esc_attr( $dt_post_type )?>"
data-storage_upload_post_id="<?php echo esc_attr( $post_id )?>"
data-storage_upload_meta_key="record_picture"
data-storage_upload_key_prefix="<?php echo esc_attr( $dt_post_type )?>"></i>
<?php endif; ?>
</div>
<div style="display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column">
<span id='title' <?php echo esc_attr( $can_update ? 'contenteditable=true' : '' ); ?> class="title dt_contenteditable"><?php the_title_attribute(); ?></span>
<div id="record-tagline">
<?php do_action( 'dt_post_record_name_tagline' ); ?>
<span class="record-name-tagline">
<?php if ( isset( $dt_post['type']['label'] ) ) : ?>
<a data-open="contact-type-modal"><?php echo esc_html( $dt_post['type']['label'] ?? '' )?></a>
<?php endif; ?>
</td>
<td style="padding: 0;">
<span id='title' <?php echo esc_attr( $can_update ? 'contenteditable=true' : '' ); ?> class="title dt_contenteditable"><?php the_title_attribute(); ?></span>
<div id="record-tagline">
<?php do_action( 'dt_post_record_name_tagline' ); ?>
<span class="record-name-tagline">
<?php if ( isset( $dt_post['type']['label'] ) ) : ?>
<a data-open="contact-type-modal"><?php echo esc_html( $dt_post['type']['label'] ?? '' )?></a>
<?php endif; ?>
<span class="details-bar-created-on"></span>
<?php if ( $dt_post['post_author_display_name'] ):
echo esc_html( ' ' . sprintf( _x( 'by %s', '(record created) by multiplier1', 'disciple_tools' ), $dt_post['post_author_display_name'] ) );
endif; ?>
</span>
</div>
</td>
</tr>
</tbody>
</table>
<span class="details-bar-created-on"></span>
<?php if ( $dt_post['post_author_display_name'] ):
echo esc_html( ' ' . sprintf( _x( 'by %s', '(record created) by multiplier1', 'disciple_tools' ), $dt_post['post_author_display_name'] ) );
endif; ?>
</span>
</div>
</div>
</div>
<div class="cell small-1 center-items">
<a href="javascript:void(0)" style="display: none;" class="navigation-next section-chevron">
Expand Down
1 change: 1 addition & 0 deletions dt-assets/functions/enqueue-scripts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ function dt_site_scripts() {
'fields_to_show_in_table' => DT_Posts::get_default_list_column_order( $post_type ),
'translations' => apply_filters( 'dt_list_js_translations', $translations ),
'filters' => Disciple_Tools_Users::get_user_filters( $post_type ),
'default_icon' => apply_filters( 'dt_record_icon', null, $post_type, null ),
) );
if ( DT_Mapbox_API::get_key() ){
DT_Mapbox_API::load_mapbox_search_widget();
Expand Down
2 changes: 1 addition & 1 deletion dt-assets/js/modular-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1046,7 +1046,7 @@
values = ['&check;'];
} else if (field_settings.type === 'image') {
values = [
`<i class='mdi mdi-account-outline medium list-image'></i>`,
`<i class='${window.SHAREDFUNCTIONS.escapeHTML(list_settings.default_icon)} medium list-image'></i>`,
];
}
} else {
Expand Down
57 changes: 57 additions & 0 deletions dt-assets/scss/_details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,6 +738,63 @@ select.color-select {
.control-buttons {
grid-gap: 0.3em;
}
.details-bar-picture {
vertical-align: middle;
cursor: pointer;
}
img.details-bar-picture {
min-width: 55px;
width: 55px;
height: 55px;
border-radius: 5px;
object-fit: cover;
}
i.details-bar-picture {
font-size: 55px;
height: 40px;
opacity: 0.3;
display: flex;
}
i.details-bar-picture::before {
align-self: center;
}
}
.is-stuck {
#second-bar-small {
img.details-bar-picture {
min-width: 40px;
width: 40px;
height: 40px;
}
i.details-bar-picture {
height: 40px;
font-size: 40px;
}
border-top: .5rem solid $primary-color;
.mobile-nav-actions {
display: none;
}
#record-tagline {
opacity:0;
height: 0;
display: none;
}
}
.hide-on-scroll {
display: none;
}
}

#second-bar-small{
border-top: none;
#record-tagline {
transition: all .3s;
opacity:1;
}
.mobile-nav-actions {
margin-bottom: 5px;
grid-gap: 5px;
}
}

//user select field
Expand Down
3 changes: 3 additions & 0 deletions dt-assets/scss/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,11 @@ table.js-list td[data-id="profile_pic"] {

table.js-list img.list-image {
width: 32px;
height: 32px;
object-fit: cover;
min-width: 32px;
vertical-align: middle;
border-radius: 5px;
}

table.js-list i.list-image {
Expand Down
25 changes: 0 additions & 25 deletions dt-assets/scss/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,32 +529,7 @@ html[dir='rtl'] nav.second-bar .advanced_search {
left: 1.15rem;
}

.is-stuck {
#second-bar-small {
border-top: .5rem solid $primary-color;
.mobile-nav-actions {
display: none;
}
#record-tagline {
opacity:0;
height: 0;
}
}
.hide-on-scroll {
display: none;
}
}

#second-bar-small{
border-top: none;
.grid-x {
margin-bottom: .3rem;
}
#record-tagline {
transition: all .3s;
opacity:1;
}
}
.off-canvas-list {
ul {
margin-left: 0;
Expand Down
6 changes: 1 addition & 5 deletions dt-contacts/base-setup.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -695,11 +695,7 @@ public function dt_record_notifications_section( $post_type, $dt_post ){
}
public function dt_record_icon( $icon, $post_type, $dt_post ){
if ( $post_type == 'contacts' ) {
$gender = isset( $dt_post['gender'] ) ? $dt_post['gender']['key'] : 'male';
$icon = 'mdi mdi-face-man-outline';
if ( $gender == 'female' ) {
$icon = 'mdi mdi-face-woman-outline';
}
$icon = 'mdi mdi-account-box-outline';
}
return $icon;
}
Expand Down
Loading