Firewall Zones UI Design

Over the past couple of months I have been working with Thomas Woerner on some enhancements to and new UI for Fedora’s firewall controls. These additions are part of Thomas’s work in adding the concept of firewall ‘zones’ to Fedora to simplify firewall configuration and help make it easier for folks to keep their computers safe. Today, we provide users with a lot of control over their firewall in the system-config-firewall, but the problem with our current model is that with a laptop, you may connect to multiple different networks during the course of the day, and firewall rules that make sense for one network might not make much sense or may even be dangerous on another network. An example of this is if you’re sitting at home or at the office, you can pretty much trust the other systems on your network (well, at least if you’re at my office where we don’t have Windows systems 😉 ), so you might want to have your httpd service running if you’re a web developer and want to show others working links to web application code running on your laptop. However, when you’re at a coffeeshop with other systems on the …

Rough mountpoint mapping & cool x220 setup

Some scribbles from a discussion in #anaconda with dlehman where we pondered over the overall flow / navigation of the advanced partitioning screen mockups in Fedora’s installer after showing them to Spot and lmacken and uncovering some issues. Will this go anywhere? No idea. We’re working it. What might be more interesting to you at this point is how it was drawn. I have a Lenovo x220 tablet in the ultrabase 3 docking station there with an external Dell monitor, keyboard, and mouse hooked up. I spun the tablet screen into full-on tablet mode while it was in the dock. Then I used the following magical incantations to adjust the screen and tablet rotation (otherwise I’d be scribblin’ on the tablet upside-down): xsetwacom set “Wacom ISDv4 E6 Pen stylus” MapToOutput LVDS1 xsetwacom set “Wacom ISDv4 E6 Finger touch” MapToOutput LVDS1 xsetwacom set “Wacom ISDv4 E6 Pen eraser” MapToOutput LVDS1 The above maps the Wacom tablet to the laptop screen, so the tablet doesn’t try to span both the external monitor AND the tablet screen. xrandr –output LVDS1 –rotate inverted The command above spin the screen 180 degrees so it’s facing the right way. xsetwacom set “Wacom ISDv4 E6 Pen stylus” …

Rough mountpoint mapping & cool x220 setup

Some scribbles from a discussion in #anaconda with dlehman where we pondered over the overall flow / navigation of the advanced partitioning screen mockups in Fedora’s installer after showing them to Spot and lmacken and uncovering some issues. Will this go anywhere? No idea. We’re working it. What might be more interesting to you at this point is how it was drawn. I have a Lenovo x220 tablet in the ultrabase 3 docking station there with an external Dell monitor, keyboard, and mouse hooked up. I spun the tablet screen into full-on tablet mode while it was in the dock. Then I used the following magical incantations to adjust the screen and tablet rotation (otherwise I’d be scribblin’ on the tablet upside-down): xsetwacom set “Wacom ISDv4 E6 Pen stylus” MapToOutput LVDS1 xsetwacom set “Wacom ISDv4 E6 Finger touch” MapToOutput LVDS1 xsetwacom set “Wacom ISDv4 E6 Pen eraser” MapToOutput LVDS1 The above maps the Wacom tablet to the laptop screen, so the tablet doesn’t try to span both the external monitor AND the tablet screen. xrandr –output LVDS1 –rotate inverted The command above spin the screen 180 degrees so it’s facing the right way. xsetwacom set “Wacom ISDv4 E6 Pen stylus” …

More source (specifically patch) view in Fedora Packages

So I posted some quick & dirty mockups of a patch view web interface for Fedora packages, and you gave me some great ideas, and here are most of them integrated into the mockups. Full screen, Sources > Patches tab in a package profile Here you can see one of the three patches that apply to this package expanded into view. Some changes to this screen: There is now a ‘show summary of patch changes’ link that will provide diffstat information for all patches against the upstream tarball. There’s now a ‘show changelog’ link that will drop down the changelog entries relevant to the selected patch. Collapsed / default patch view Before you click on a patch to view it, the list of patches looks like this. Release selection dropdown You can view the patch history for the package across active releases or just for a specific release. Raw patch link Click to get a clean link to the full raw patch. Changelog view Click on the “show changelog” link at the top of an open patch and you’ll get this display, hopefully with clickable links to bug references (seems we have a little inconsistency though; I noted the formats …

Source view in Fedora Packages

Note: There’s a newer blog post here with more mockups and features based on your feedback in this post! Okay, quick recap. We’re working on a v2 of Fedora Community called “Fedora Packages.” The usual long-winded Mo blog post about it is available if you’d like to catch up. Now that you’ve been caught up, here’s a little something I mocked up today: And its friend, a version of it showing what happens if you click on the release / version number: (Oh dear, I hope I’m not getting overly fond of accordian-style widgets; we’ve been using them in the Fedora installer redesign as well.) Anyway, the story here is that you’ve searched for a package and want to poke into its sources. These screens show what you’ll see under the Sources > Patches tab… you’ll see a list of patch names and if you click on one, it’ll expand accordian style to show you the patch in its full glory. Along the bottom of the patch is a toolbar you can use to paste the patch to fpaste, email it, or grab a link to it to send to someone else. Are these useful things you might want to …

Slicing and dicing disks (first draft)

So, last time we chatted about Fedora’s installer redesign, we walked through how users would select which disks they’d like to be part of the install. Once our intrepid installer users have selected disks to install to, they should be set and the install will just work. (Okay, there’s the case where they have to squeeze space out of existing filesystems owned by another OS, and that’s in the plan, but not for this blog post.) In either case, these folks will not have to encounter screens like these at all. Some users, though, prefer to review and/or manually modify the disk partitioning, so this set of screens is what those users opt-in to see. So, most users simply trying to install Fedora on their laptop won’t ever have to bother with these screens unless they really want to. The way it’s mocked up now, they are tabs across a single screen. Serving up partitioning buffet-style like this is not ideal in my opinion, because then we’ll be enabling users to do things like btrfs raid on top of md raid which can, if I understand correctly, eliminate some of the advantages of having RAID in the first place. Buffet-style …

Where would you like your install today?

We are making some great progress on Anaconda’s UI revamp mockups after last week’s Anaconda team meetings. Here’s the storage flow diagram, now annotated with the screen #’s from the mockups: So let’s dive into the screens as they look so far. These are hot-of-the-press and may suck, so of course we’re posting them here for your perusal, critique, and feedback so we can make them better! I’ve tried to highlight areas where we’d like the most feedback just like this. 9-1-1 / Install Destination Simple So the deal with this screen is that it’s the main / default interface for selecting disks connected to your system for installation. As mocked up here, you could say we’ve got a laptop with a blank SSD and some other smaller peripheral storage devices plugged in. Local / Standard Drives The top half shows your run-of-the-mill laptop hard drives, external USB drives, etc.: There’s a small piechart in the upper right that roughly & quickly shows how much space is taken up (filled in) and how much is free (unpartitioned + free on fs). If you hover over any of these standard drives, you’ll get a tooltip breaking down how much free space …

Interactive SVG Mockups with Inkscape & Javascript

Update: I have a much more efficient, awesome version of this almost ready to write up, thanks to the awesome help you gave me in the comments. Thanks so much! I’ll post it soon. Yes, it is clickable. Please click it! Can’t see the loveliness? Click here. The backstory So I’ve been working on non-Fedora projects for the past few weeks, and I just started digging back into the Anaconda mockups this morning. Coming back to UI design from a slight break seemed to magnify issues that I feel in 2011 there must exist a solution–like defining clickable areas within mockups and linking them together to make lightweight interactive prototypes. (Right? ….right?!) The Dark Side offers cookies After some failed attempts to embed JQuery into SVG (if you’ve achieved this or know it to be a nutty proposition, please school me!) I got really frustrated and signed up for a free-as-in-beer and proprietary site to see what was possible. I found a site that lets you upload flat PNG mockups and then drag out clickable areas. Per clickable area, you can define what mockup to load next via a dropdown of all uploaded mockups. It also lets you add people …

Interactive SVG Mockups with Inkscape & Javascript

Update: I have a much more efficient, awesome version of this almost ready to write up, thanks to the awesome help you gave me in the comments. Thanks so much! I’ll post it soon. Yes, it is clickable. Please click it! Can’t see the loveliness? Click here. The backstory So I’ve been working on non-Fedora projects for the past few weeks, and I just started digging back into the Anaconda mockups this morning. Coming back to UI design from a slight break seemed to magnify issues that I feel in 2011 there must exist a solution–like defining clickable areas within mockups and linking them together to make lightweight interactive prototypes. (Right? ….right?!) The Dark Side offers cookies After some failed attempts to embed JQuery into SVG (if you’ve achieved this or know it to be a nutty proposition, please school me!) I got really frustrated and signed up for a free-as-in-beer and proprietary site to see what was possible. I found a site that lets you upload flat PNG mockups and then drag out clickable areas. Per clickable area, you can define what mockup to load next via a dropdown of all uploaded mockups. It also lets you add people …