Skip to main content

Search

Image/Thumbnail Columns - Tablet Camera Behavior Modification [CSS/JS]

Comments

5 comments

  • skybow Support

    Hi Taylor Ram,

    let us investigate and discuss this in the team and then we will get back to you asap.

    Can you tell us if the two clicks needed on the pencil icon is just on an iPad via Teams in the browser or also on an iPad via the Teams Client or as well in Safari directly on SharePoint without Teams?

    Kind regards

    skybow Support

    0
  • Taylor Ram

    I ended up testing the user experience on additional devices, through different software… (Hopefully this information is useful. I was quite surprised just how different the experience can be, especially with Android.) I am waiting for a coworker to let me use an iPhone to test a few UXs. I will follow up when I have info. If there are any other scenarios to test, let me know!

    [Note: A laptop is the only device I am able to get Teams to open in a Browser, so I couldn’t test the first UX requested. On both an iPad (Safari & Chrome) & Android Phone (Chrome), I get: “Hmm. Your browser version isn’t supported. Quickest solution? Download the mobile app.”]

     

    UX 1 – iPad – Teams App – SharePoint-type Tab

    Behavior: Original experience (see original post)

     

    UX 2 – iPad – Safari Browser

    Behavior: Exactly the same as UX 1.

     

    UX 3 – iPad – Chrome Browser

    Behavior: Exactly the same as UX 1.

     

    UX 4 – iPad – SharePoint App

    (*The UX in the SharePoint App, on all devices, is rather ‘dysfunctional’. I am not sure if the screenshots are even worth posting. If they might help, let me know and I’ll post them.)

    Behavior:

    • New/Edit: (Read Only) is displayed next to the field label. Cannot interact with the field.
    • New/Edit: Attachments field can be interacted with. Clicking it once gives 2 options: ‘Choose from Photos’ & ‘Take Photo’
    • Display: Shows field labels but doesn’t render Images [Tested on a Display Form that contains Images]

     

    UX 5 – Android Phone – Teams App – SharePoint-type Tab

    (This is basically UX 1 on an Android Phone.)

    Behavior: 1 click on the Pencil Icon --> Opens ‘Recent Files’

     

    UX 6 – Android Phone – Chrome Browser

    Behavior: 1 click on the Pencil Icon --> ‘All Images’ (on device) + Open Camera Fcn + Browse Fcn

    (I am not exactly sure what it opens. It gives options to open Camera, Browse Files and displays ALL photos on the phone in the main view.)

     

    Android Phone – SharePoint App

    (Completely dysfunctional. Screenshots available if desired.)

    Behavior:

    • New/Edit: Image Fields (~30 columns) do not even render field labels
    • New/Edit: Add Attachment button doesn’t function
    • Display: Image Field labels are rendered, but no pictures

     

     

    Much appreciated,

    Taylor

    0
  • Taylor Ram

    CSS - Trial & Error tests

    I am simply sharing because I find it interesting (& potentially useful) and would love to better understand how to control specific elements.

    Below are screenshots of the 1 random trial/error attempt to alter the Icon elements of an Image field, that somewhat produced the desired effect. 

    This is the CSS payload used:

    .ms-Button--commandBar {
    font-size: 60px;
    }
    .ms-OverflowSet-item {
    font-size: 60px;
    }
    .ms-Button-icon {
    font-size: 60px;
    }

    This has changed the rendering so that:

    1. Pencil & Delete Icons are larger, while Picture Icon remains the same size.

    2. It effects the 'Icon Size' of both Pencil/Delete & Skybow hover elements

     

    Original Goal: Increase the Pencil Icon only. Or: Increase Pencil Icon size, and place in a better position. Or: Increase Pencil Icon size, and relocate Delete Icon to avoid accidentally deleting images by end users.

     

    Purely Guessing: I have a feeling (SharePoint CSS is 100% new to me) that I need to make use of one of the below elements, to only alter the Pencil Icon (these are from lines 71-81 of the last screenshot below):

    • class="ms-Button-icon icon-586"
    • class="ms-Button-flexContainer flexContainer-505"
    • class="ms-Button ms-Button--commandBar iconbutton_4d77e248 root-771" 
    • class="uploadInput_4d77e248"
    • class="ms-TooltipHost root-757"
    • "ms-OverflowSet-item item-686"

     

    Okay... to share some pictures and other information.

     

    Skybow - editing New Form - Styling - Progress Image 1

    Note: Notice the increased size of Pencil & Delete Icons, as well as the Skybow hover action elements.

     

    New Form 

    [This is the experience when in the actual New Form, launched from the SP list]

     

    Chrome - Inspect Element - Progress Image 1

     

    Progress Image 1 - Div Structure breakdown

     

    0
  • skybow Support

    Hi Taylor Ram,

    I you just want to change the icon size of the pencil you could use the following style on each image field:

    .sb-field-input i[data-icon-name="Edit"]{
      font-size: 60px;
      height: 35px;
    }

    Kind regards

    skybow Support

    1
  • Taylor Ram

    Ahhhhhh ha! Thank you so much. This make total sense now!

    To share how I have utilized this little CSS nugget to eventually increase the user experience, specifically on an iPad...

    .sb-field-input i[data-icon-name="Delete"]{
      visibility: hidden;
    }

    .sb-field-input i[data-icon-name="Edit"]{
      font-size: 51px;
      height: 51px;
      color: green;
      padding: 18px 33px 2px 21px;
    }

    .sb-field-input [data-icon-name="Photo2"] {
      font-size: 90px;
      padding: 30px 10px 10px 10px;
    }

     

    The result:

     

     

     

    0

Please sign in to leave a comment.