LockedVersion 3.8 - New WYSIWYG and Usability

Author
APGvNext (Sam)
vNext Dev
  • Total Posts : 12487
  • Reward points : 218330
  • Joined:
  • Status: offline
0

Version 3.8 - New WYSIWYG and Usability

Hi everyone,

We decided to slightly modify the road map in order to provide a better message posting experience and to support posting from iPad / iPhone / mobile devices. Current mobile devices or scaled down tablets do not have the ability to render WYSIWYG editor and thus users will run into issues when posting.

Therefore, we decided to implement a new WYSIWYG editor in order to
  1. Provide better support for posting from mobile devices;
  2. Provide better client side editor rendering performance;
  3. Provide an easier way for users to set up buttons for custom PGDCodes (Youtube button can be added from the AdminCP, e.g.), and
  4. Reduce the software package size and remove some dlls.

And because of the above objective, we decided to skip the release of 3.7 and focus on combining the new WYSIWYG editor with the original 3.7 feature set to produce the 3.8 release. It will be about a month late than the original 3.7 release date.

On top of the new WYSIWYG editor, you will also see the following Usability improvements on the upcoming release over version 3.6:

Better Upload Management

Currently we do not have the ability to modify attachments when we make a new post. Attachment can only be modified after the post has been made (when you edit a post). This issue will be addressed in 3.8. You will be able to change attachments without having to send the post first.

Gravatar Support and Avatar Management

We will support Gravatar along with its rating system in the upcoming release. Using Gravatar simplifies the avatar management for users across different applications.

Also, we will make deleting existing avatar easier. Currently the only ways to hide an existing avatar is to either disable it or replace it with another file.

Revamped Message Rating system and Helpful / Reward UI

We reworked the message UI quite a bit to improve usability. We removed a dropdown menu button on the message interface and place the function buttons along the bottom of each message.

This way, we save quite a bit of horizontal space and make the optional message functions easier to find. Along with the simplified UI, we also make it easier to find posts marked as "Helpful" or "Rewarded" (one click to list all solutions) and improve the presentation (more standout than current).

Last but not the least, the message rating system is also improved. We incorporate thumbs up / down along with the existing star ratings system. Admins can choose which system to use for each individual forums.

The Gallery and Admin CP buttons on the Top Navigation Bar

The gallery button at the top is no longer a simple button that sends you to the gallery listing page. In the upcoming release, when you mouse over it, a dropdown list will appear, listing all available galleries so that you can easily navigate to a specific gallery.

A similar change is also made to the AdminCP button which will list all sections an admin can see.

Consistent Popup page UI and pager style

There are a few pages that are presented in popup window (password / email change; message forwarding, etc.) in the system and they do not currently have a consistent interface. We simplified and unified the various popup pages in the upcoming release.

Also, the pager style at different places (albums, forums, etc.) will be unified too. This will make it easier for users to use CSS to style all links in a pager.

Custom Registration Fields examples

The custom registration fields found in the admin CP has a field called "example". This is where admins can give hints to users what the field is for and what format we expect users to input, and currently the example is shown only on textbox type fields (rendered as text box or textarea).

We made a change to the system and now all fields with "example" specified will show a DHTML tooltip that will make it easy for users to read and understand.


That's it for now.  Thanks for your time today
post edited by Samuel -
#1

13 Replies Related Threads

    chief
    Version 3 user
    • Total Posts : 510
    • Reward points : 41360
    • Joined:
    • Location: Fairhope, AL
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Thanks for the update Samuel. Sounds like 3.8 will be very interesting!

    chief
    #2
    FreddyD
    vNext Owner
    • Total Posts : 850
    • Reward points : 53210
    • Joined:
    • Location: Louis Lake
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    indeed. Our mobile users will surely appreciate the new editor!
    #3
    otosaigon
    vNext Owner
    • Total Posts : 274
    • Reward points : 11030
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Sound Great!
    #4
    APGvNext (Sam)
    vNext Dev
    • Total Posts : 12487
    • Reward points : 218330
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    The new editor is in place now on this support forum. You can now test it with your mobile device to post messages.
     
    The following is the new interface to add buttons through the Custom PGDCode interface in the AdminCP.
     

    Attached Image(s)

    #5
    hotel96
    vNext Owner
    • Total Posts : 110
    • Reward points : 15980
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Samuel, I can't seem to find a way to do this.  Where can I find detailed instructions?
    #6
    APGvNext (Sam)
    vNext Dev
    • Total Posts : 12487
    • Reward points : 218330
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    you need to add the youtube PGDCode first, and then you will see an icon shown beside the newly added PGDcode. You won't have the icon with built in PGDCodes.. it is only available to the ones you add (custom).
    #7
    hotel96
    vNext Owner
    • Total Posts : 110
    • Reward points : 15980
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Yes, but what code should I use?  I tried to mirror the one on the demo site and got a link instead of an embedded video.
    #8
    APGvNext (Sam)
    vNext Dev
    • Total Posts : 12487
    • Reward points : 218330
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Okey, you will need to get the [tube] code set up in the Custom PGDCode section. Bring up the help file and we have an example specifically for youtube.
    #9
    hotel96
    vNext Owner
    • Total Posts : 110
    • Reward points : 15980
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Thanks Sam, but how do you get the button to function like it is on this forum, where it prompts you to enter the link?
    #10
    APGvNext (Sam)
    vNext Dev
    • Total Posts : 12487
    • Reward points : 218330
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    ok, I am not sure what the real question is. Let me ask you a few questions:
    1. were you able to add the [tube] code to the Custom PGDCode section?
    2. were you able to bring up an additional window where you can enter the editor button definition (see my screenshot above)?
    3. is there a button on your editor? If so, are you saying that clicking on it has no effect?
    #11
    hotel96
    vNext Owner
    • Total Posts : 110
    • Reward points : 15980
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Hi Samuel, was able to get everything working, but the functionality is a little different.  When I click on my Youtube button it adds the tags and then I have to insert the URL.  BTW, sometimes it posts the URL as a link (instead of text), but I can table that issue.  When I click on your YouTube button it brings up a prompt for the link using a dialog box, which I think is a much cleaner solution.  How do I do that?
    #12
    APGvNext (Sam)
    vNext Dev
    • Total Posts : 12487
    • Reward points : 218330
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    I see. To bring up a prompt, you can use
    ed.bringUpPrompt('Youtube URL', '[tube]{0}[/tube]')

    in the "Javascript to Execute" field.
     
    Clicking on e.g. beside the textbox would show a list of possible javascript functions you can use.
    #13
    hotel96
    vNext Owner
    • Total Posts : 110
    • Reward points : 15980
    • Joined:
    • Status: offline
    Re:Version 3.8 - New WYSIWYG and Usability (permalink)
    0
    Cool, thanks!
    #14
    Jump to:
    © 2013 APG vNext Commercial Version 4.3