tpr

AdminOnSteroids

Recommended Posts

Thanks @Robin S, I merged your codes into my aos work copy. Seems to work fine at first look but need to test a bit more to make sure there are no side effects. Bernhard's repeater profile also seems to be OK with your fixes, though it was also OK with mines.

  • Like 2

Share this post


Link to post
Share on other sites
On 6/10/2017 at 1:35 AM, Robin S said:

@tpr, I've been having a look at the images-in-repeater issue for non-superusers (I discovered this one a while back but forgot to report it here, sorry :().

-----

Edit: I did report it over in the Github repo.

Edit 2: looking at some PM history it looks like a solution (same intent but different implementation to that proposed below) was found but never merged into the repo?

-----

As you found, the $this->editedPage property is the source of the issue. Seeing as the things this property is used for within the module either don't work within repeaters (e.g. field edit links) or aren't needed for repeater pages (e.g. breadcrumb features) I think $this->editedPage should never be set to a repeater page. But it's much easier to exclude repeater pages in ready() because in init() it is not yet known which class a page is an instance of. So could $this->editedPage be set in ready() instead?

This is what I did in my testing and it seems to work okay:


public function init()
{
    // removed code that sets $this->edited page
    
    // populate self::$configData
    self::$configData = $this->modules->getModuleConfigData($this);
    
    // ...
    
    // a bit further down we need to change $configData[$subModule] to self::$configData[$subModule]

public function ready()
{
    // set $this->editedPage
    // excluded repeater pages, minor refactoring
    $this->editedPage = false;
    $editedPageId = $this->sanitizer->int($this->config->input->get->id);
    $editedPage = $this->pages->get($editedPageId);
    if( $editedPage->id && !($editedPage instanceof RepeaterPage) ) $this->editedPage = $editedPage;

    self::$configData = $this->modifyConfigData(
        $this->modules->getModuleConfigData($this),
        $this->editedPage
    );
    
    // ...

 

Hi,

many thanks for the code,
this works like a charm, saved the day/week :)

Share this post


Link to post
Share on other sites
On 6/9/2017 at 4:50 AM, tpr said:

It's the same issue as of @bernhard's, could you try the fix I posted on June 2?

This solution did not worked,
I tried the solution from @Robin S and worked,
many thanks.

Share this post


Link to post
Share on other sites

AOS is at 1.4.7, containing Robin S's fixes and his IconsFilter module. I've spent much more time on the icons filter because I wanted it to be compatible with the current markup and with this PR too.

  • Like 5

Share this post


Link to post
Share on other sites

@tpr, these CSS overrides for wide screens are causing a misalignment of the WireTabs in the default admin theme:

2017-06-13_153043.png.1e153d2d871fb9f1ac02a63730b92095.png

I'm not sure what the "PrevNextTabs" feature is that requires the override, but if the overrides need to stay could you change to:

margin-bottom:calc(-2.6em - 1px);

 

Share this post


Link to post
Share on other sites
1 hour ago, Robin S said:

I'm not sure what the "PrevNextTabs" feature is that requires the override

It's another module. I'll check it, thanks.

Share this post


Link to post
Share on other sites
15 hours ago, Robin S said:

if the overrides need to stay could you change to:


margin-bottom:calc(-2.6em - 1px);

 

I couldn't see this issue but it was also OK here after applying the fix so I committed the update.

  • Like 1

Share this post


Link to post
Share on other sites

@tpr, AOS is adding the 'edit template' icon/link to the password inputfield. A bug?

2017-06-15_131757.png.bf34595c3901a4147c45d2ee9f7940bf.png

  • Like 1

Share this post


Link to post
Share on other sites

Certainly, the workaround selector fails here, I'll update soon.

  • Like 1

Share this post


Link to post
Share on other sites

Hello @tpr I have a problem with Pro Fields: Table in conjunction with AdminOnSteroids. If I use the Table Cells Selection Plugin or the Lightwire skin, the editing of the fields does not work as expected. I attached a screen-capture (with audio) to show the problem. I can export the fields if you want to recreate this.

pro-fields-table-adminonsteroids.mp4

  • Like 1

Share this post


Link to post
Share on other sites
On 6/12/2017 at 11:38 PM, Robin S said:

I'm not sure what the "PrevNextTabs" feature is that requires the override, but if the overrides need to stay could you change to:

if there is anything i can change or fix in the PrevNextTabs module, let me know

Share this post


Link to post
Share on other sites
5 hours ago, jmartsch said:

I attached a screen-capture (with audio) to show the problem. I can export the fields if you want to recreate this.

Thanks, it was very informative!

I could locate the TCS issue, the plugin had return false but false wasn't needed. Please try the attached js file.

As for the Lightwire bug, the floating ckeditor toolbar was always an issue, the current solution is a workaround I've added earlier. Now that PW's default ckeditor skin looks nicer since the last ckeditor upgrade, I'm thinking of removing the skin entirely, what do you think?

tablecellsselection.js

Share this post


Link to post
Share on other sites
21 hours ago, tpr said:

Thanks, it was very informative!

I could locate the TCS issue, the plugin had return false but false wasn't needed. Please try the attached js file.

As for the Lightwire bug, the floating ckeditor toolbar was always an issue, the current solution is a workaround I've added earlier. Now that PW's default ckeditor skin looks nicer since the last ckeditor upgrade, I'm thinking of removing the skin entirely, what do you think?

tablecellsselection.js

@tpr With the new tablecellselection.js it works :)

In my eyes, the Lightwire skin looks nicer than the default skin. Especially the design of the dropdowns and the icons. Can´t you update the default skin so it uses your styles? Maybe even publish it on the ckeditor.com site. The changes are subtle but noticable.

Share this post


Link to post
Share on other sites

Icon replacements could work, I'll try. Btw its not my own skin but nico's, I'm just borrowing it :)

Share this post


Link to post
Share on other sites

With the recent CKEditor update to 4.7 the Table Cells Selection plugin can be entirely removed, will do it in the next update.

  • Like 1

Share this post


Link to post
Share on other sites

Hi @tpr, I've been working on a module that adds an icon to file items in a File field and checking to make sure it plays nicely with the "noFilenameTruncate" option in AOS. So I've been looking closely at the layout and have a suggestion for fine-tuning the noFilenameTruncate styles.

Here is the default appearance of a File field, without AOS noFilenameTruncate activated:

2017-06-30_130147.png.2fd26c7763281b51b9f4706567a2ef45.png

And here is the appearance when noFilenameTruncate is activated:

2017-06-30_130106.png.86015298ef1a5b88412553a0a0379aec.png

And what I'd like to suggest is...

  • Reduce the padding of the header to compensate for the extra line-height you added.
  • The float:left you added to the file icon shifts it up a bit from the default, so compensate for that with a some extra top offset.
  • Put the delete icon back over on the right by positioning it absolutely. It's better over there if you have several files to delete because you don't have to go hunting for it.

The result...

2017-06-30_133954.png.1b992a35cbf16e9f01bc0e4c6a98e879.png

And the modified SCSS for that:

html.noFilenameTruncate {
  p.InputfieldFileInfo.InputfieldItemHeader {
    padding: 6px 34px 6px 25px; 
    position: relative;
  }
  i.fa-file-image-o,
  .InputfieldFileInfo i {
    left: -21px !important;
    top: 3px;
    float: left;
  }
  a.InputfieldFileName {
    line-height: 1.33;
    margin-left: -22px;
    word-wrap: break-word;
  }
  label.InputfieldFileDelete {
    position: absolute; 
    top: 8px; 
    right: 8px;
  }
}

What do you think? 

  • Like 1

Share this post


Link to post
Share on other sites

@tpr, there is an issue with the "edit field" helper link shown in Page Edit for fieldsets. Instead of linking to the the settings of the fieldset itself it links to the settings of the first child field of the fieldset.

2017-07-02_221228.png.a403a6c77071b9d83b5cbf902689549b.png

Share this post


Link to post
Share on other sites

Thanks, will investigate them later.

Share this post


Link to post
Share on other sites

Thanks for this wonderful module. When SVG is used in image field, the download button is not appearing. I hope it can be there.:rolleyes: 

Share this post


Link to post
Share on other sites

All 3 issues above should be fixed in v149, thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Two small additions in v150:

  • Misc: add new page: uncheck `Active?` for non-default language names (thanks to Tomka)
  • Misc: hide the `Add new` dropdown button from above the main pagelist

Unchecking the active state for the non-default language variant of a page can be handy if only a few pages need to be multi-language, so you don't have to go to the Settings tab to uncheck them all every time adding a new page. Also works with templates with parent-child relationships set (when the first step of the addnew process is invisible).

Hiding the Add new dropdown doesn't take the available bookmarks into account, just hides the button entirely (CSS only btw). I never really needed this feature and I agree that it's rather confusing. The main pagelist looks a bit empty without this button though :)

  • Like 3

Share this post


Link to post
Share on other sites

hi tpr,

seems that the move up/down icons overlap the delete icon making it impossible to click on it. do you need more information to reproduce this? aos 1.5.0 and pw 3.0.68

597b36b4c0633_2017-07-2815_02_11-EditPage_Runtastic360v2_dev.thumb.png.6650e64d2d603b9622619b36a7dcca47.png

  • Like 2

Share this post


Link to post
Share on other sites

Thanks, it's a bug, will be fixed soon.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Password Generator
      Adds a password generator to InputfieldPassword.

       
      Usage
      Install the Password Generator module.
      Now any InputfieldPassword has a password generation feature. The settings for the generator are taken automatically from the settings* of the password field.
      *Settings not supported by the generator:
      Complexify: but generated passwords should still satisfy complexify settings in the recommended range. Banned words: but the generated passwords are random strings so actual words are unlikely to occur.  
      https://modules.processwire.com/modules/password-generator/
      https://github.com/Toutouwai/PasswordGenerator
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By matjazp
      A module for managing files and folders. Supports creating, opening (e.g. viewing, playing, editing), renaming, moving, copying, deleting and searching for files. You can also view and change (not supported on Windows) file and directory permissions. 
      https://github.com/matjazpotocnik/ProcessFileManager

      The author of FileManager component is (c) 2006 - 2018 Gerd Tentler, http://www.gerd-tentler.de/tools/filemanager/. I modified it to work with ProcessWire as a module. Please see license files on usage in commercial projects!
    • By Robin S
      An inputfield for displaying markup editable via CKEditor.
      The module is intended for use with the Form Builder module. Allows blocks of static text to be included within a form, which can be edited in the form settings using CKEditor.
      Usage
      Install the Markup CKEditor module.
      In the Form Builder module settings, add "MarkupCKEditor" to "Inputfield types to use with FormBuilder".
      In your form settings, add a new field of type "Markup CKEditor". Enter the text you want to show in this field using "Markup Text" on the "Details" tab.
      Screenshots


       
      http://modules.processwire.com/modules/inputfield-markup-ckeditor/
      https://github.com/Toutouwai/InputfieldMarkupCKEditor
    • By marcus
      Hi y'all! Long time no see. Here's a little module aiming to help you build accessible websites
      ProcessWire Accessibility Tools
      Download: http://modules.processwire.com/modules/pwat/
      Github: https://github.com/marcus-herrmann/PWAT
      A small, but hopefully growing toolkit for creating accessible ProcessWire sites. Right now it consists of the following little helpers:
      tota11y visualization toolkit by Khan Academy A toggle button to see view site in grayscale. The w3c recommends checking your page without colours to see if your design still works (accompanied by a colours contrast check, which is part of tota11y) A link to test your webpage with WAVE, webaim's Web Accessibility eValuation Tool. By the nature of this tool, the website under test must be available online, local hosts won't work.
      Installation
      Once you have downloaded PWAT, go to your module Install page and click "Check for new modules". Find "ProcessWire Accessibility Tools" and click "Install". During installation, PWAT creates a new role 'pwat_user'. To use the Accessibility Tools, you have to grant user this role.
      Following, you can start configuring the module.

      Usage
      PWAT starts with only the tota11y script activated. On the configuration page you can decide
      whether PWAT is visible on admin pages if tota11y is active if the grayscale toggle is active if the link to WAVE will be visible
      Credits
      The amazing tota11y visualization tool by Khan Academy Inspiration: Paul J. Adam's bookmarklets Inspiration: WordPress wa11y Plugin
      Best,
      marcus