user centered design – Visual Indicators for editable content and non editable content

Brief Product Description:
So I have been working on a digital project where the product is an online presentation software where the user(Teacher) has presentation slides to select and conducts presentations to the students.

Problem: The user buys slides from the marketplace which will be added to the library of the software. The user must be able to distinguish between Guides(collection of slides)bought from the marketplace and his custom-made slides because the slides in the guides can be dragged and dropped when making a custom guide but the content in them cannot be edited and the user must know this. So I was thinking a kind of indicator which helps user to see that. But dont know if this is the best way. Please help. Thank youenter image description hereenter image description here

How to keep the recipient address editable in Thunderbird 78.4.2?

The recipients are now visualized like blocks and prevents the user to move the cursor in the string. It looks very similar to the way MS Outlook shows the recipients.

TO: superuser@example.com

How to keep the recipient address editable in Thunderbird 78.4.2?

theme development – Programatically Created Menu not Editable in Dashboard

When my custom theme gets activated, it programatically creates some default pages with custom templates, a nav menu, and several menu items. This saves me a lot of time not having to do those same steps over and over on every site. However, if I want to customize the menu on a site by adding additional menu items specific to that site, the menu is not there when I go to to Appearance -> Menus. Is there a way to make it appear, along with the menu items that were created programatically, and be editable?

Here’s the code I use to create the menu and menu items:

function wts_create_and_register_menus() {

  $primary_menu = 'Primary Navigation';
  $footer_menu = 'Footer Navigation';

  register_nav_menus(
    array(
      'primary-menu'   => $primary_menu,
      'footer-menu' => $footer_menu
    )
  );

  if( wp_get_nav_menu_object( $primary_menu ) ) {
    $menu_id = wp_create_nav_menu( $primary_menu );

    // Primary menu items to create
    $menu_titles = array( 'Services', 'Gallery', 'FAQs', 'Blog', 'Contact' );
    $menu_urls= array( '/services/', '/gallery/', '/faqs/', '/blog/', '/contact/' );

    for($i = 0; $i < count($menu_titles); $i++) {
      wp_update_nav_menu_item($menu_id, 0, array(
        'menu-item-title' =>  __( $menu_titles($i) ),
        'menu-item-url' => home_url( $menu_urls($i) ),
        'menu-item-status' => 'publish')
      );
    }

    $locations = get_theme_mod('nav_menu_locations');
    $locations('primary-menu') = $menu_id;
    set_theme_mod('nav_menu_locations', $locations);
  }

}

add_action("after_switch_theme", "wts_create_and_register_menus"); 
add_theme_support( 'menus' );

Just an FYI, I had to add the very last line of this code ( add_theme_support( ‘ menus’ ); ) after adding the code above it to my functions.php. When I was doing everything manually, it wasn’t necessary to have that line. But now that I’m creating the menu programatically, I’ll get the error: “Your theme does not support navigation menus or widgets” without that line.

Thanks in advance for your help.

usability – What is the best way to represent editable options that change the viewport?

I am trying to figure out how what the best approach UI/UX wise is for the behavior I desire. I have a dashboard with a sidebar on the left, and all of the behavior I am describing happens on one page, so the sidebar is essentially static for my problem.

I’ve made a very rough draft of what the app will look like, essentially the dashboard will have a way to move between different galleries. The current selected gallery is represented by the grid at the bottom with the big “+”. The way to move between views will be in the area represented by “???”. Behavior-wise, what I want is very similar to tabs in that I would like the user to be able to select an option and the option that is selected will change the gallery that is being displayed. However, I would like the various options to be editable in that I would like them to be able to be renamed and deleted, with potential support for reordering.

What would be the best approach for this?

enter image description here

code reuse – How to compose a potentially in-place editable page with React?

I have a public website with profile pages of people for the general public to see and a separate admin website with user login where people can edit their own profile page.

The profile page is editable on the admin website but should not be editable on the public website and want the admin website to have pretty much the same layout for the profile page but in editing mode.

Editing should happen in place in a WYSIWYG style, and the profile page has a fixed layout of its contents, including a profile picture, a person’s name, some contact info, a teaser text and a longer text section.

Text sections use Markdown with WYSIWYG editing.

The public website should not need to serve code for editing functionality, and I want to keep both websites consistent in terms of layout with minimal effort required to change the layout.

How can I ensure consistency of layouts with minimal effort while avoiding having to serve unnecessary code for editing functions on the public website?

My current approach would be to provide a skeleton component that accepts specific children satisfying particular interfaces and rendering them in the right places.

So I would fill that skeleton with editable components on the admin website and read-only components on the public website, but this still means a lot of duplication regarding the components used to fill into the skeleton.

bootstrap – Best way to display an editable list of list

I’m working on a web project and I have a list of list which can be edited. It’s displayed within a modal, I can resize it as I want so it’s not that big of a deal.
My main problem is I don’t really know how I could display it with almost every information easily accessible (0 clicks ideally).

To give a little background, let’s say you have a JSON that looks like the following :

{
    "value": "value",
    "conditions": (
        ("condition1", "condition2"),
        ("condition1"),
        ("condition1", "condition2", "condition3")
    )
}

So, you have a value that have some conditions, there’s usually between 1 and 3 conditions in each conditions array (it can be more but most of the time it’s not).

Each conditions array represent elements tied together (like condition1 AND conditions2 …).

There is no length limit for the conditions array and the sub arrays.

I though about a list of input representing the conditions separated with a comma (so you can display it and edit it at the same place) but I realized that what’s in the input is already defined in the system and should not be random things. So input is a no go as it could compromise the data. A selection from a drop-down or checkbox somewhere is what I’ll use for the editable part. No issue here but I wanted to make clear that a list of input is not possible.

I’m using bootstrap 4, I though about of something like a grid of boostrap list-group but I’m concerned about the result readability and the fact that the AND is not explicit.

Also, we should be able to add or delete elements in each list.

List-group grid is the best I could think of by now.

Do you have any better solution ?

Thanks !

sharepoint online – Default member group permissions editable

We all know that default sharepoint groups (Owners, Members, Visitors) are created automatically and their permissions can’t be changed. It is recommended to copy/create new groups and assign the user <sharepoint name> Members to it if we need to adjust permissions for members.

Today, in the permissions page, I selected the Members group and the permissions were suddenly editable. Why and how this happened? Is it something that needs to be fixed/could cause problems later? Owners and Visitors are still un-editable.

This is a new model sharepoint online site.

Thanks,

views – Editable table column data

In drupal 8, I am writing a custom module and in one of the function in controller -I am fetching data from an external API, then displaying it in table format using –

 foreach($rec as $data) {
    ksm($data);
    $rows() = (// mydata
)};

return (
    '#type' => 'table',
    '#header' => $header,
    '#rows' => $rows,

  );

This is working correctly.

But I want table cells to be editable and when user edits the data, a listener gets invoked (or provide an update button for the user).
Now this listener would do some stuff with updated data(make external API call).
My doubt is how can we do this with tables? Is there any way to make some columns of table editable and register a listener in Drupal.

Would I need to create a node for each row of this table data?
If a node is required, then how to do ?

I am new to Drupal 8, just started a month ago, kindly help.
Thanks in advance.

templates – How to let the user reuse a content section across multiple layouts pages while having it centrally editable

We are creating a form editor with many different layouts. Many layouts will have the same content repeated on them. We want to make it easy to define a section or group of fields on one layout, and have it placed across many layouts. Editing one will update all the instances of them saving the user from repeating edits many times.
However I’m worried this kind of mental model is hard to convey.

I’m not sure what kind of UI pattern this is called but the best analogy I can think of is repeated calendar entries in osx calendar. They appear multiple times. When you edit any instance of that event it will change that instance and when saving it will ask

You’re changing a repeating event.
Do you want to change only this occurrence of the event, or this and all future occurrences?
[Cancel] [All Future Events] [Only this Event]

I’m considering a UI very similar.

  • A insert that lets you insert from a list of existing sections
  • Some visual cue to show an section instance is repeated X times in other places
  • any change to something in a section results in the popup to ask if you want to change this only this section or all other instances of this section. If “all instances” then it won’t ask again until you edit something else. If “only this” then its no longer linked and any changes there are no questions.

Thoughts? Examples of other ways to solve this?

sharepoint online – How to make selected columns in Data Table editable using custom fields in jQuery?

I am trying below code but it is not working. Please suggest any other workaround

Below are the JavaScript libraries loaded:

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js
../../extensions/Editor/js/dataTables.editor.min.js

Code:

<script>
    var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor({
            ajax: "../php/staff.php",
            table: "#example",
            fields: ({
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Salary:",
                name: "salary"
            })
        });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td.editable', function(e) {
            editor.inline(this);
        });

        $('#example').DataTable({
            dom: 'Bfrtip',
            ajax: '../php/staff.php',
            columns: ({
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: 'first_name', className: 'editable' },
                { data: 'last_name', className: 'editable' },
                { data: 'position' },
                { data: 'office' },
                { data: 'start_date' },
                { data: 'salary', render: $.fn.dataTable.render.number(',', '.', 0, '$'), className: 'editable' }
            ),
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: (
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            )
        });
    });
</script>