hide meta and edit/delete

  • first, thank you for this really helpful plugin ??

    I find the appearance to have too much informations, with the notes + the meta informations + the edit/delete for each notes, + the add new

    so i wanted to hide the meta and the edit/delete unless the mouse hover the element, but it was not so easy to do because you creates some texte outside html nodes, which makes them impossible to target with css or js, and hence very difficult to style :/

    I handled something good enough for me for now, but that would be better if you inserted real text nodes in your html ??

    here is my temporary solution :

    // Hook into the admin_head action to inject CSS into the admin dashboard
function custom_plugin_notes_css() {
  echo '<style>
  /* hide plugins column infos */
  .pnp_plugin_notes_col .pnp-show-note-wrapper ~ .pnp-add-note-wrapper {  
    margin-top: -10px;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper {
    visibility: hidden;
    padding-bottom: 0px;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper .pnp-plugin-note {
    visibility: visible;
    height: auto;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper .pnp-plugin-note .pnp-note-meta {
    display: none;
  }

  /* show them on hover */
  .pnp_plugin_notes_col .pnp-show-note-wrapper:hover {
    visibility: visible;
    padding-bottom: 10px;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper:hover .pnp-plugin-note .pnp-note-meta {
    display: block;
  }
    .pnp_plugin_notes_col .pnp-show-note-wrapper:hover ~ .pnp-add-note-wrapper {
    margin-top: 0px;
  }
  </style>';
}
add_action('admin_head', 'custom_plugin_notes_css');
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter hugogogo

    (@hugogogo)

    and I also added this css to replace the text “+ Add plugin note” with a simple “+” :

    /* replace "+ Add plugin note" with a simple "+" */

.pnp_plugin_notes_col .pnp-add-note-wrapper .pnp-add-note {
  color: transparent;
  position: relative;
}
.pnp_plugin_notes_col .pnp-add-note-wrapper .pnp-add-note::before {
  content: "+";
  position: absolute;
  color: blue;
  left: 10px;
}
    Thread Starter hugogogo

    (@hugogogo)

    even better, it shows the meta and edit field on focus instead of hover :

    // Hook into the admin_head action to inject CSS into the admin dashboard
function custom_plugin_notes_css() {
  ?>
  <style>

  /* hide plugins column infos */
  .pnp_plugin_notes_col .pnp-show-note-wrapper ~ .pnp-add-note-wrapper {
    margin-top: -10px;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper {
    visibility: hidden;
    padding-bottom: 0px;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper .pnp-plugin-note {
    visibility: visible;
  }
  .pnp_plugin_notes_col .pnp-show-note-wrapper .pnp-plugin-note .pnp-note-meta {  
    display: none;
  }

  /* show them on hover */
  .pnp_plugin_notes_col .pnp-wrapper:focus .pnp-show-note-wrapper {
    visibility: visible;
    padding-bottom: 10px;
  }
  .pnp_plugin_notes_col .pnp-wrapper:focus .pnp-plugin-note .pnp-note-meta {
    display: block;
  }
  .pnp_plugin_notes_col .pnp-wrapper:focus .pnp-show-note-wrapper ~ .pnp-add-note-wrapper {
    margin-top: 0px;
  }

  /* replace "+ Add plugin note" with a simple "+" */
                .pnp_plugin_notes_col .pnp-add-note-wrapper .pnp-add-note {
    color: transparent;
    position: relative;
  }
  .pnp_plugin_notes_col .pnp-add-note-wrapper .pnp-add-note::before {
    content: "+";
    position: absolute;
    color: blue;
    left: 10px;
  }

  </style>
  <?php
}
add_action('admin_head', 'custom_plugin_notes_css');

function custom_plugin_notes_js() {
  ?>
  <script type="text/javascript">
    const notes_focus = document.querySelectorAll(".pnp_plugin_notes_col .pnp-wrapper");
    notes_focus.forEach(x => x.tabIndex = 0);
  </script>
  <?php
}
add_action('admin_footer', 'custom_plugin_notes_js');
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘hide meta and edit/delete’ is closed to new replies.