xTuple.com xTupleU Blog & News Customer Support

Displays for 6.0.2

Is this the desired look for the item screen?


There are 2-3 other screens that I have found in 6.0.2 that look like this.

Hi Caleb. In the 6.x series, we started to implement updates to the user interface for some of our screens. So far, we have come out with the Streamlined Sales Order and List of Sales Orders, and updates to the Login, Items, Bill of Materials, Vouchers, and Bank Reconciliation screens. We’ll be expanding this new streamlined user interface to other screens in future releases.

From your screenshot, it looks like you’re on a Windows machine. We found that the font that we had originally planned to use for our new UI are, unfortunately, not available on all Windows machines - therefore the user experience with the new interface is not what we were going for. The sizing of the buttons were also affected. If you were to look at the same screens on a Mac, you’d see how we intended the design and font changes to look.

Don’t worry, I’m not suggesting that everyone switch to using Macs instead of Windows - I think people would grab their pitchforks and torches over a statement like that, haha. Rest assured, we are aware that the current font is causing a less than ideal user experience and have plans to address it in an upcoming release.

Ciara, does this match the intent? Just doing some sanity checking. Will we have the ability to modify the CSS driving these screens?

Thanks
Scott


FYI…this is on MacOS Catalina (10.15.7)

Hi Scott. Yes, that’s much closer to our intent. The New Item button isn’t aligned properly, which isn’t just in your environment, but we hope to correct that too. Otherwise, that’s the look and feel we’re headed towards. There might be some minor tweaks to things like colors in an upcoming release, but not a drastic re-overhaul.

As far as modifying the screens, the short answer is yes, you still have the ability to make changes or add tabs or buttons for customizations. However, the way to go about it might be a little different. Let me work with the developer who implemented these changes to get some better instructions or guidance for that process.

In the mean time, do you have a specific example of a change that you’d like to make? I will try to specifically address that in our follow-up.

I didn’t have anything specific. Caleb’s question just got me thinking about personalization in general. Some of our customers have multiple companies. It would be great to allow a different color scheme by login. Just dreaming out loud.

Thanks for the hard work.
Scott

1 Like

Okay so I looked at item.cpp

to answer @szuke question . you will be able to use
mywindow.setStyleSheet("")
(EDIT: It actually looks like lots of widgets will have setStyleSheet(""). not sure how many are visible but I think its safe to assume most of them will be)

to modify the css.

here is an example of their css

"*{font: 12pt 'Open Sans';}"
"item{background-color: white;}"
"QWidget#item QHeaderView::section{background-color: #1f3f49; color: white; height:40px;}"
"QPushButton#_save:hover{background-color: #996ab187; border: 1px solid #996ab187;}"
  "QPushButton#_save:focus{background-color: #996ab187; border: 1px solid #996ab187;}"

I couldn’t get the formatting quite right.

But even with the new font. The best way can say this is. I hate some of the screens.

In particular I’m going to include the before and after screenshot of the item screen.
Notice how much more information is presented to you in a much smaller area. It seems like the new design just ends up being a lot more clunky.

I like the Idea behind the change. I like that you could move over to a CSS look and have a web page look the same as the desktop version. but I think it needs more refining. I looked into the UI file as well.


1 Like

I assumed that line of code was in there somewhere, just hadn’t taken the time to go looking. Thanks. Obviously, true personalization is much bigger and a wormhole that I’m sure xTuple is avoiding for the time being.

I’ll avoid calling the xTuple baby ugly. I know that this can be improved and refined. Form should follow function.

2alu8dnpjxvet6abacp5

1 Like

Hi Scott. At this time, the different color schemes idea isn’t possible. However, that’s an interesting feature request and I’ll share that idea with the team.

Here’s a nugget of insight from the developer: a sample of the stylesheet used in the new UI screens can be seen in the SalesOrder2.cpp file. In the constructor the setStylesheet() function is called. Most of the style info you might need is there.

We’ll work on some documentation to outline changes in how to implement the new UI on things such as tabs, buttons, tables/xtreewidgets, etc. Stay tuned for more info. Hope to have that available for you by the end of next week.

Scott,

The Qt visual components are the same, just stacked objects instead of tabs. With a little twist it works.

Regards

Hi Ciara:

In your response concerning fonts on windows machine “not available on all windows machines”. Does that mean there is a font available to install on Windows machine to more closely achieve the design goal?
If so can you provide information as the names of the font(s) used and how to acquire them for Windows?

If they are not available for Windows does that mean there was no testing the look on Windows before the release?

Hi Larry,

I can assure you that we conduct thorough quality assurance tests on all three operating systems before every release - no matter if it’s a beta or a final. These tests consist of a mixture of proof-of-concept tests (to make sure the build is viable), smoke tests (to make sure the major pillars of the software function as expected) and recursive tests (to make sure the updates haven’t broken anything). The majority of these tests are automated, though some do require limited manual intervention. The focus of these tests are on functionality over form. Therefore, in addition to the formal quality assurance process just described, a few of us reviewed the screens for visual checks. Some of us were testing on a Mac (and thus didn’t encounter the font issue) or already had the font available to them (and again, didn’t encounter the font issue). Since 6.0, my team and I have created a plan on how to continue to improve our formal quality assurance tests.

To answer your question about the specific font - the font that was used for the design is open sans. This is the font specifically used on the stylesheet. If open sans is not available on the user’s computer, it will go to the default font. That default font is different for Windows, Mac, or Linux. So, when the default font is used instead of open sans, it impacts the design and layout.

The developer who is working on the documentation mentioned above (about how to implement the new UI) is also looking in to how to have the font available within the application. I haven’t tested this myself, but I’m guessing if you download the font to the user’s computer and restart the application, it should pick up the correct font and the new UI screens should appear updated. Again, I haven’t tested it yet… it’s just a theory.

Thanks for sharing this. I haven’t had time to dig through the codebase to find things such as what font is being used. I went ahead and installed open sans on my mac, just to be aligned with the intent.

Google - Open Sans

1 Like

Okay I have had time to look at it and get actual feedback. Some of the changed screens do nothing more then give a nice modern look to the application. some of the screens end up slowing down functionality.

Ex. List Items. Is just a more modern look on the same functionality. I like the direction.
Ex Item. This one is more difficult to use. not just because of the look but because of the design of the screen. maybe the QStackedWidget needs to have the size of its buttons tuned down. the need to click the expand arrow to see the other options is a real nuisance.

I like the Idea of Set Style. using somthing close to css to make the screens look and feel the way you want them to is amazing.

I don’t like the excess whitespace and I think the paddings are too much for good function.

HOLY MOTHER OF 2020.

I wish like hell somebody had mentioned this font issue before. I have been running 6.0.1 on Mac for a few weeks now, and muttered/mumbled/cursed the new UI many times. Without that font installed, many of the new screens looked like horse-poop. With the new fonts (Open Sans – THANK YOU @szuke!!) it is much improved now.

I’m not venting at xtuple (well, maybe I am), because I have been a happily licensed customer for many many years. And I ain’t going anywhere. But for the love of customer service, I wish this had been documented somewhere. Or, I wish I’d read it more specifically.

6.0.1. finally took off it’s ugly pre-teen braces and dirty socks. It looks decent now.

Hi all,
This is gonna be a mini brain dump.

The UI changes introduced in 6.0.0 were aimed at giving a new and fresh look to certain windows in our application. These changes are achieved through (1) a combination of modifications to the stylesheet of the windows and (2) the introduction of 2 new custom widgets.

  1. The stylesheet modifications to these windows can be summarized as follows:

    • set font to OpenSans 12pt for the parent window (which cascades to all
      elements of the window)
    • set size and color to key buttons/actions for example:
      • Save button will be green
      • Cancel button will be red
    • set QHeaderView to 40px height, green bg color, white text
    • set QLineEdits to have dimensions 160x25 px and light grey border
    • Ensure specific shades and colors for the various states of all the widgets (i.e. active, disabled,
      hover, focus, etc.)

    For more detail take a look at the constructor of the salesOrder2 class in guiclient/salesOrder.cpp

    *As of the time of writing, OpenSans needs to be present on the user’s manchine in order to take effect

  1. Two new custom widgets were developed for these UI updates. The XHeaderButtonBox and XExpandableWidget

    • The XHeaderButtonBox was introduced primarily to replace the use of QTabWidgets throughout the application
      and give the application a more modern and familiar look by functioning as a navigation bar. Below are a
      few steps in order to transition from using an QTabWidget to a XHeaderButtonBox:

      • Convert the QTabWidget to a QStackedWidget
      • Insert an XHeaderButtonBox to the .ui file
      • Pass the QStackedWidget* that the XHeaderButtonBox will provide navigation to
      • in the cpp file: Add buttons to the XHeaderButtonBox(navigation bar) using the addButton() function,
        which takes as parameters:
        • a QString for the label to be displayed on the button
        • a QWidget* (the QStackedWidget page) that will be displayed when button is clicked
        • a QString for the name of the button to be created (objectName)
        • an int for the position of the button in the navingation bar (optional)
    • The XExpandableWidget was introduced to provide a Label/Header to information that is grouped together (most often using a QGroupBox), and to help differentiate that information from other fields on the window. It also introduces the ability to hide or show the “content” that is linked to it.
      In order to make use of the XExpandableWidget, the widget must be added to the .ui file and placed over the “content” (QGroupBox, QWidget, etc.) it will be used on.
      In the .cpp file, the developer will have to call the setContent() member function of the XExpandableWidget class and pass the QWidget* that it will be hiding/showing.

      In an upcoming release, we have add the ability for the widget to be “sticky”. This means that windows will remember if an XExpandableWidget was expanded or collapsed when the window was last open.

Hi mmicros:

First let me say thank you for the detailed information most of which means very little to me. I agree completely with the idea of a new and fresh look, but when that new and fresh look renders some screens very difficult and time consuming to navigate, in my opinion that “fresh look” needs some re examination.
I have installed that OpenSans font on my Windows 10 machine and there is very little difference. Some but very little. Perhaps we should ask for some input from some real world users for their ideas about a “new and fresh look”

After reading your post completely I am a bit confused about exactly what our plan is regarding these new screens. I got the idea from Ciara’s post that the entire design was under review but the only mention of change I see from you is the “sticky” comment.

I would appreciate some more specific information about our plans before I dig into the code and try myself to make the screens usable, particularly the Item Master screen. I really doubt I have the ability to make changes, myself, but I will try because I have some users who just simply hate the new screens. And yes they are all Windows users. Perhaps now would be a good time to mention that the last estimate I saw was that 90 % of all business computers are running Windows. Just a guess but perhaps our MAC culture inside xTuple has caused us to forget that.

This is my primary issue too. Critical elements like “List Price” seem oddly placed, and ‘light grey’ coloring in many screens/fields (specifically on Sales Orders) is difficult to read.

Of course I’m just a passenger on the train and willing to see where the conductor takes us.

The CEO runs Windows.

To clarify, I mentioned that we will be addressing known issues in an upcoming release. I did not mean that we are reviewing the entire design for another major overhaul of changes. Small tweaks and improvements are on the table, but not a redesign.

While feedback is always welcome, our UI updates are based on designs from a professional UI designer who researched and implemented industry standards and user accessibility to support the decisions in their designs. One area of difficulty has been the implementation of the exact designs using Qt; this is due to Qt limitations of what we can/can’t do.

I believe the Item Master screen’s partial UI updates (partial because the ‘light grey’ background is still there) are due to the stylesheet cascading to the window but not all elements appear updated. I’ll be reviewing this screen with Michael to make sure it is properly and fully updated in a future release.

I recognize that getting used to new layouts can cause some initial delay in navigation - users have to retrain their eyes to look in a new spot for information. I imagine that can be frustrating when trying to perform a task quickly. That’s one of the reasons why we wanted to tackle a few screens at first and then expand the design to be implemented to additional screens - it gives users an idea of where we’re headed.

Our customer base is a great mix of Windows, Mac, and Linux users. The last time I checked (maybe a year ago?), our user base is closer to 60% Windows, 30% Mac, and 10% Linux. So, you’re right - the majority of our users are Windows based. xTuple itself is also a mixture of OSs. In addition to Ned, more than half of our developers and the UI designer I mentioned earlier are also Windows based. I apologize if my comments about the open sans font made it seem like we have a Mac culture. Other than one apple-head at the company (I’ll give you one guess, and it’s not me), we try to keep things pretty balanced.

Just to clarify. I’m not complaining that my users have to retrain there eyes. A temporary speed slowdown for a modern UI is actually one of the best things that can happen to any software. The problem that I see is that the dropdown arrow on the XHeaderButtonBox conceals information making it hard to find anything inside of it. Compare my initial picture with this one

The screen that I made up would be more functional and preserver the UI look and feel. Kind of a “Best of both worlds.”

On another note. While xTuple makes the UI more modern, I think it would be cool to think of the logo as the base colors. I’m sure this is probably the end plan already but
Something like

Or

Or

All of this is to say that I am on board with the changes and I’m excited, I just want to throw my 2 cents in and say that I would love to see some tweaking to make this screen and others more functional.

But in the end. I can work around it no matter which direction xTuple goes. Like stated above I’m a passenger on the train. But I prefer one bridge over another.

2 Likes