1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-29 07:58:19 +01:00

Refine "Tactical Command" layout and styling

Summary:
  - Move the buttons in the jump nav to iOS-style "application" buttons in the
header. These are sort of ugly right now, but I think serviceable enough. Some
day we will hire a designer whose entire job is to pick up after me.
    - This gives us more room (allowing us to restore "Maniphest" and
"Differential").
    - This also disassociates the app buttons from the jump nav, which was a
point of confusion (user expectation that the text input is related to the
buttons).
  - Allow "Active Revisions" and "Assigned Tasks" to collapse completely. They
didn't completely collapse before because the top-level "Active Tasks" / "Active
Revisions" was sort of overloaded as quick nav to apps. Now we have app buttons.
  - Reduce overall size of jump nav.

Test Plan: Looked at homepage in various states of need-for-attention.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, epriestley

Differential Revision: https://secure.phabricator.com/D1694
This commit is contained in:
epriestley 2012-02-27 13:14:32 -08:00
parent c7094d2def
commit 800aa92fd9
7 changed files with 369 additions and 197 deletions

View file

@ -108,7 +108,7 @@ celerity_register_resource_map(array(
),
'aphront-panel-view-css' =>
array(
'uri' => '/res/12ca19c9/rsrc/css/aphront/panel-view.css',
'uri' => '/res/9f08d754/rsrc/css/aphront/panel-view.css',
'type' => 'css',
'requires' =>
array(
@ -231,7 +231,7 @@ celerity_register_resource_map(array(
),
'differential-revision-detail-css' =>
array(
'uri' => '/res/33592453/rsrc/css/application/differential/revision-detail.css',
'uri' => '/res/2433dbdc/rsrc/css/application/differential/revision-detail.css',
'type' => 'css',
'requires' =>
array(
@ -294,7 +294,7 @@ celerity_register_resource_map(array(
),
'herald-rule-editor' =>
array(
'uri' => '/res/ec9eea63/rsrc/js/application/herald/HeraldRuleEditor.js',
'uri' => '/res/745c9d43/rsrc/js/application/herald/HeraldRuleEditor.js',
'type' => 'js',
'requires' =>
array(
@ -1396,6 +1396,15 @@ celerity_register_resource_map(array(
),
'disk' => '/rsrc/js/application/herald/PathTypeahead.js',
),
'phabricator-app-buttons-css' =>
array(
'uri' => '/res/343f125f/rsrc/css/application/directory/phabricator-app-buttons.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/application/directory/phabricator-app-buttons.css',
),
'phabricator-chatlog-css' =>
array(
'uri' => '/res/f674f526/rsrc/css/application/chatlog/chatlog.css',
@ -1490,7 +1499,7 @@ celerity_register_resource_map(array(
),
'phabricator-jump-nav' =>
array(
'uri' => '/res/69238d2f/rsrc/css/application/directory/phabricator-jump-nav.css',
'uri' => '/res/8bdc0fc3/rsrc/css/application/directory/phabricator-jump-nav.css',
'type' => 'css',
'requires' =>
array(
@ -1880,6 +1889,30 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/080edee4/typeahead.pkg.js',
'type' => 'js',
),
'29e2c5f1' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
array(
0 => 'phabricator-core-css',
1 => 'phabricator-core-buttons-css',
2 => 'phabricator-standard-page-view',
3 => 'aphront-dialog-view-css',
4 => 'aphront-form-view-css',
5 => 'aphront-panel-view-css',
6 => 'aphront-side-nav-view-css',
7 => 'aphront-table-view-css',
8 => 'aphront-crumbs-view-css',
9 => 'aphront-tokenizer-control-css',
10 => 'aphront-typeahead-control-css',
11 => 'aphront-list-filter-view-css',
12 => 'phabricator-directory-css',
13 => 'phabricator-remarkup-css',
14 => 'syntax-highlighting-css',
),
'uri' => '/res/pkg/29e2c5f1/core.pkg.css',
'type' => 'css',
),
'46547a92' =>
array(
'name' => 'core.pkg.js',
@ -1927,51 +1960,6 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/61f9d480/diffusion.pkg.css',
'type' => 'css',
),
'784dc660' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
array(
0 => 'phabricator-core-css',
1 => 'phabricator-core-buttons-css',
2 => 'phabricator-standard-page-view',
3 => 'aphront-dialog-view-css',
4 => 'aphront-form-view-css',
5 => 'aphront-panel-view-css',
6 => 'aphront-side-nav-view-css',
7 => 'aphront-table-view-css',
8 => 'aphront-crumbs-view-css',
9 => 'aphront-tokenizer-control-css',
10 => 'aphront-typeahead-control-css',
11 => 'aphront-list-filter-view-css',
12 => 'phabricator-directory-css',
13 => 'phabricator-remarkup-css',
14 => 'syntax-highlighting-css',
),
'uri' => '/res/pkg/784dc660/core.pkg.css',
'type' => 'css',
),
'8152415f' =>
array(
'name' => 'differential.pkg.css',
'symbols' =>
array(
0 => 'differential-core-view-css',
1 => 'differential-changeset-view-css',
2 => 'differential-revision-detail-css',
3 => 'differential-revision-history-css',
4 => 'differential-table-of-contents-css',
5 => 'differential-revision-comment-css',
6 => 'differential-revision-add-comment-css',
7 => 'differential-revision-comment-list-css',
8 => 'phabricator-object-selector-css',
9 => 'aphront-headsup-action-list-view-css',
10 => 'phabricator-content-source-view-css',
11 => 'differential-local-commits-view-css',
),
'uri' => '/res/pkg/8152415f/differential.pkg.css',
'type' => 'css',
),
'c8aaade8' =>
array(
'name' => 'differential.pkg.js',
@ -1996,29 +1984,50 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/c8aaade8/differential.pkg.js',
'type' => 'js',
),
'e1ccef96' =>
array(
'name' => 'differential.pkg.css',
'symbols' =>
array(
0 => 'differential-core-view-css',
1 => 'differential-changeset-view-css',
2 => 'differential-revision-detail-css',
3 => 'differential-revision-history-css',
4 => 'differential-table-of-contents-css',
5 => 'differential-revision-comment-css',
6 => 'differential-revision-add-comment-css',
7 => 'differential-revision-comment-list-css',
8 => 'phabricator-object-selector-css',
9 => 'aphront-headsup-action-list-view-css',
10 => 'phabricator-content-source-view-css',
11 => 'differential-local-commits-view-css',
),
'uri' => '/res/pkg/e1ccef96/differential.pkg.css',
'type' => 'css',
),
),
'reverse' =>
array(
'aphront-crumbs-view-css' => '784dc660',
'aphront-dialog-view-css' => '784dc660',
'aphront-form-view-css' => '784dc660',
'aphront-headsup-action-list-view-css' => '8152415f',
'aphront-list-filter-view-css' => '784dc660',
'aphront-panel-view-css' => '784dc660',
'aphront-side-nav-view-css' => '784dc660',
'aphront-table-view-css' => '784dc660',
'aphront-tokenizer-control-css' => '784dc660',
'aphront-typeahead-control-css' => '784dc660',
'differential-changeset-view-css' => '8152415f',
'differential-core-view-css' => '8152415f',
'aphront-crumbs-view-css' => '29e2c5f1',
'aphront-dialog-view-css' => '29e2c5f1',
'aphront-form-view-css' => '29e2c5f1',
'aphront-headsup-action-list-view-css' => 'e1ccef96',
'aphront-list-filter-view-css' => '29e2c5f1',
'aphront-panel-view-css' => '29e2c5f1',
'aphront-side-nav-view-css' => '29e2c5f1',
'aphront-table-view-css' => '29e2c5f1',
'aphront-tokenizer-control-css' => '29e2c5f1',
'aphront-typeahead-control-css' => '29e2c5f1',
'differential-changeset-view-css' => 'e1ccef96',
'differential-core-view-css' => 'e1ccef96',
'differential-inline-comment-editor' => 'c8aaade8',
'differential-local-commits-view-css' => '8152415f',
'differential-revision-add-comment-css' => '8152415f',
'differential-revision-comment-css' => '8152415f',
'differential-revision-comment-list-css' => '8152415f',
'differential-revision-detail-css' => '8152415f',
'differential-revision-history-css' => '8152415f',
'differential-table-of-contents-css' => '8152415f',
'differential-local-commits-view-css' => 'e1ccef96',
'differential-revision-add-comment-css' => 'e1ccef96',
'differential-revision-comment-css' => 'e1ccef96',
'differential-revision-comment-list-css' => 'e1ccef96',
'differential-revision-detail-css' => 'e1ccef96',
'differential-revision-history-css' => 'e1ccef96',
'differential-table-of-contents-css' => 'e1ccef96',
'diffusion-commit-view-css' => '61f9d480',
'javelin-behavior' => '4fbae2af',
'javelin-behavior-aphront-basic-tokenizer' => '080edee4',
@ -2056,17 +2065,17 @@ celerity_register_resource_map(array(
'javelin-util' => '4fbae2af',
'javelin-vector' => '4fbae2af',
'javelin-workflow' => '46547a92',
'phabricator-content-source-view-css' => '8152415f',
'phabricator-core-buttons-css' => '784dc660',
'phabricator-core-css' => '784dc660',
'phabricator-directory-css' => '784dc660',
'phabricator-content-source-view-css' => 'e1ccef96',
'phabricator-core-buttons-css' => '29e2c5f1',
'phabricator-core-css' => '29e2c5f1',
'phabricator-directory-css' => '29e2c5f1',
'phabricator-drag-and-drop-file-upload' => 'c8aaade8',
'phabricator-keyboard-shortcut' => '46547a92',
'phabricator-keyboard-shortcut-manager' => '46547a92',
'phabricator-object-selector-css' => '8152415f',
'phabricator-remarkup-css' => '784dc660',
'phabricator-object-selector-css' => 'e1ccef96',
'phabricator-remarkup-css' => '29e2c5f1',
'phabricator-shaped-request' => 'c8aaade8',
'phabricator-standard-page-view' => '784dc660',
'syntax-highlighting-css' => '784dc660',
'phabricator-standard-page-view' => '29e2c5f1',
'syntax-highlighting-css' => '29e2c5f1',
),
));

View file

@ -76,12 +76,14 @@ class PhabricatorDirectoryMainController
$jump_panel = $this->buildJumpPanel();
$revision_panel = $this->buildRevisionPanel();
$app_panel = $this->buildAppPanel();
$audit_panel = $this->buildAuditPanel();
$content = array(
$app_panel,
$jump_panel,
$unbreak_panel,
$triage_panel,
$jump_panel,
$revision_panel,
$tasks_panel,
$audit_panel,
@ -227,32 +229,29 @@ class PhabricatorDirectoryMainController
$task_query->withStatus(ManiphestTaskQuery::STATUS_OPEN);
$task_query->withPriority(ManiphestTaskPriority::PRIORITY_UNBREAK_NOW);
$task_query->setLimit(10);
$task_query->setCalculateRows(true);
$tasks = $task_query->execute();
if ($tasks) {
$panel = new AphrontPanelView();
$panel->setHeader('Unbreak Now!');
$panel->setCaption('Open tasks with "Unbreak Now!" priority.');
$panel->addButton(
phutil_render_tag(
'a',
array(
'href' => '/maniphest/view/all/',
'class' => 'grey button',
),
'View All Unbreak Now ('.$task_query->getRowCount().") \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
} else {
$panel = new AphrontMiniPanelView();
$panel->appendChild(
'<p><strong>No "Unbreak Now!" Tasks:</strong> '.
'Nothing appears to be critically broken right now.</p>');
$panel = '<br />'.$panel->render();
if (!$tasks) {
return $this->renderMiniPanel(
'No "Unbreak Now!" Tasks',
'Nothing appears to be critically broken right now.');
}
$panel = new AphrontPanelView();
$panel->setHeader('Unbreak Now!');
$panel->setCaption('Open tasks with "Unbreak Now!" priority.');
$panel->addButton(
phutil_render_tag(
'a',
array(
'href' => '/maniphest/view/all/',
'class' => 'grey button',
),
"View All Unbreak Now \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
return $panel;
}
@ -266,39 +265,37 @@ class PhabricatorDirectoryMainController
$task_query->withPriority(ManiphestTaskPriority::PRIORITY_TRIAGE);
$task_query->withProjects(mpull($projects, 'getPHID'));
$task_query->withAnyProject(true);
$task_query->setCalculateRows(true);
$task_query->setLimit(10);
$tasks = $task_query->execute();
} else {
$tasks = array();
}
if ($tasks) {
$panel = new AphrontPanelView();
$panel->setHeader('Needs Triage');
$panel->setCaption(
'Open tasks with "Needs Triage" priority in '.
'<a href="/project/">projects you are a member of</a>.');
$panel->addButton(
phutil_render_tag(
'a',
array(
// TODO: This should filter to just your projects' need-triage
// tasks?
'href' => '/maniphest/view/alltriage/',
'class' => 'grey button',
),
'View All Triage ('.$task_query->getRowCount().") \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
} else {
$panel = new AphrontMiniPanelView();
$panel->appendChild(
'<p><strong>No "Needs Triage" Tasks:</strong> '.
if (!$tasks) {
return $this->renderMiniPanel(
'No "Needs Triage" Tasks',
'No tasks in <a href="/project/">projects you are a member of</a> '.
'need triage.</p>');
}
$panel = new AphrontPanelView();
$panel->setHeader('Needs Triage');
$panel->setCaption(
'Open tasks with "Needs Triage" priority in '.
'<a href="/project/">projects you are a member of</a>.');
$panel->addButton(
phutil_render_tag(
'a',
array(
// TODO: This should filter to just your projects' need-triage
// tasks?
'href' => '/maniphest/view/alltriage/',
'class' => 'grey button',
),
"View All Triage \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
return $panel;
}
@ -320,6 +317,12 @@ class PhabricatorDirectoryMainController
$revisions,
$user_phid);
if (!$active) {
return $this->renderMiniPanel(
'No Waiting Revisions',
'No revisions are waiting on you.');
}
$panel = new AphrontPanelView();
$panel->setHeader('Revisions Waiting on You');
$panel->setCaption('Revisions waiting for you for review or commit.');
@ -333,24 +336,20 @@ class PhabricatorDirectoryMainController
),
"View Active Revisions \xC2\xBB"));
if ($active) {
$fields =
$fields =
$revision_view = id(new DifferentialRevisionListView())
->setRevisions($active)
->setFields(DifferentialRevisionListView::getDefaultFields())
->setUser($user);
$phids = array_merge(
array($user_phid),
$revision_view->getRequiredHandlePHIDs());
$handles = id(new PhabricatorObjectHandleData($phids))->loadHandles();
$revision_view = id(new DifferentialRevisionListView())
->setRevisions($active)
->setFields(DifferentialRevisionListView::getDefaultFields())
->setUser($user);
$phids = array_merge(
array($user_phid),
$revision_view->getRequiredHandlePHIDs());
$handles = id(new PhabricatorObjectHandleData($phids))->loadHandles();
$revision_view->setHandles($handles);
$revision_view->setHandles($handles);
$panel->appendChild($revision_view);
} else {
$panel->appendChild('<p>No revisions are waiting on you.</p>');
}
$panel->appendChild($revision_view);
return $panel;
}
@ -367,32 +366,26 @@ class PhabricatorDirectoryMainController
$tasks = $task_query->execute();
if (!$tasks) {
return $this->renderMiniPanel(
'No Assigned Tasks',
'You have no assigned tasks.');
}
$panel = new AphrontPanelView();
$panel->setHeader('Assigned Tasks');
$panel->setCaption('Tasks assigned to you.');
if ($tasks) {
$panel->addButton(
phutil_render_tag(
'a',
array(
'href' => '/maniphest/',
'class' => 'button grey',
),
"View Active Tasks \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
} else {
$panel->addButton(
phutil_render_tag(
'a',
array(
'href' => '/maniphest/?users='.
ManiphestTaskOwner::OWNER_UP_FOR_GRABS,
'class' => 'button grey',
),
"View Unassigned Tasks \xC2\xBB"));
$panel->appendChild('<p>You have no assigned tasks.</p>');
}
$panel->addButton(
phutil_render_tag(
'a',
array(
'href' => '/maniphest/',
'class' => 'button grey',
),
"View Active Tasks \xC2\xBB"));
$panel->appendChild($this->buildTaskListView($tasks));
return $panel;
}
@ -516,50 +509,118 @@ class PhabricatorDirectoryMainController
'class' => 'phabricator-jump-nav',
'name' => 'jump',
'id' => $uniq_id,
)).
phutil_render_tag(
'p',
array(
'class' => 'phabricator-jump-nav-caption',
),
'Enter the name of an object like <tt>D123</tt> to quickly jump to '.
'it. See '.$doc_link.' or type <tt>help</tt>.');
));
$jump_caption = phutil_render_tag(
'p',
array(
'class' => 'phabricator-jump-nav-caption',
),
'Enter the name of an object like <tt>D123</tt> to quickly jump to '.
'it. See '.$doc_link.' or type <tt>help</tt>.');
$panel = new AphrontPanelView();
$panel->addClass('aphront-unpadded-panel-view');
$panel->appendChild(
phabricator_render_form(
$user,
array(
'action' => '/jump/',
'method' => 'POST',
'class' => 'phabricator-jump-nav-form',
),
$jump_input));
$jump_input.
$jump_caption));
return $panel;
}
private function buildAppPanel() {
require_celerity_resource('phabricator-app-buttons-css');
$nav_buttons = array();
$nav_buttons[] = array(
'Differential',
'/differential/',
'differential');
if (PhabricatorEnv::getEnvConfig('maniphest.enabled')) {
$nav_buttons['/maniphest/task/create/'] = 'Create a Task';
$nav_buttons[] = array(
'Maniphest',
'/maniphest/',
'maniphest');
$nav_buttons[] = array(
'Create Task',
'/maniphest/task/create/',
'create-task');
}
$nav_buttons['/file/'] = 'Upload a File';
$nav_buttons['/paste/'] = 'Create Paste';
$nav_buttons[] = array(
'Upload File',
'/file/',
'upload-file');
$nav_buttons[] = array(
'Create Paste',
'/paste/',
'create-paste');
if (PhabricatorEnv::getEnvConfig('phriction.enabled')) {
$nav_buttons['/w/'] = 'Browse Wiki';
$nav_buttons[] = array(
'Browse Wiki',
'/w/',
'phriction');
}
$nav_buttons['/diffusion/'] = 'Browse Code';
$panel->appendChild('<div class="phabricator-jump-nav-buttons">');
foreach ($nav_buttons as $uri => $name) {
$panel->appendChild(
$nav_buttons[] = array(
'Browse Code',
'/diffusion/',
'diffusion');
$view = new AphrontNullView();
$view->appendChild('<div class="phabricator-app-buttons">');
foreach ($nav_buttons as $info) {
list($name, $uri, $icon) = $info;
$button = phutil_render_tag(
'a',
array(
'href' => $uri,
'class' => 'app-button icon-'.$icon,
),
phutil_render_tag(
'a',
'div',
array(
'href' => $uri,
'class' => 'button grey',
'class' => 'app-icon icon-'.$icon,
),
phutil_escape_html($name)));
}
$panel->appendChild('</div>');
''));
$caption = phutil_render_tag(
'a',
array(
'href' => $uri,
'class' => 'phabricator-button-caption',
),
phutil_escape_html($name));
$view->appendChild(
'<div class="phabricator-app-button">'.
$button.
$caption.
'</div>');
}
$view->appendChild('<div style="clear: both;"></div></div>');
return $view;
}
private function renderMiniPanel($title, $body) {
$panel = new AphrontMiniPanelView();
$panel->appendChild(
phutil_render_tag(
'p',
array(
),
'<strong>'.$title.':</strong> '.$body));
return $panel;
}

View file

@ -15,7 +15,6 @@ phutil_require_module('phabricator', 'applications/differential/view/revisionlis
phutil_require_module('phabricator', 'applications/directory/controller/base');
phutil_require_module('phabricator', 'applications/feed/builder/feed');
phutil_require_module('phabricator', 'applications/feed/query');
phutil_require_module('phabricator', 'applications/maniphest/constants/owner');
phutil_require_module('phabricator', 'applications/maniphest/constants/priority');
phutil_require_module('phabricator', 'applications/maniphest/query');
phutil_require_module('phabricator', 'applications/maniphest/view/tasklist');
@ -30,6 +29,7 @@ phutil_require_module('phabricator', 'infrastructure/javelin/markup');
phutil_require_module('phabricator', 'view/layout/minipanel');
phutil_require_module('phabricator', 'view/layout/panel');
phutil_require_module('phabricator', 'view/layout/sidenavfilter');
phutil_require_module('phabricator', 'view/null');
phutil_require_module('phutil', 'markup');
phutil_require_module('phutil', 'parser/uri');

View file

@ -11,6 +11,10 @@
margin: 1em 2em;
}
.aphront-unpadded-panel-view {
padding: 0px;
}
.aphront-panel-view .aphront-panel-header {
margin: 0 0 1em 0;
}
@ -103,3 +107,4 @@
font-size: 11px;
color: #666666;
}

View file

@ -0,0 +1,99 @@
/**
* @provides phabricator-app-buttons-css
*/
.phabricator-app-buttons {
padding: 2em 3em 0em;
}
.phabricator-app-button {
display: block;
float: left;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
}
.phabricator-app-button .app-button {
display: block;
margin: 0px 10px 4px;
background: #5e77aa url('/rsrc/image/sprite.png') 0 0 repeat-x;
border-bottom-color: #1a356e;
cursor: pointer;
background-color: #e4e5e5;
background-position: 0 -250px;
border: 1px solid #999;
border-bottom-color: #888;
box-shadow: 0px 1px 0px rgba(0,0,0,.07);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.07);
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.07);
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.phabricator-app-button .app-button:active {
background-color: #dddddd;
background-image: none;
border-bottom-color: #999;
}
a.phabricator-button-caption,
a.phabricator-button-caption:link,
a.phabricator-button-caption:active,
a.phabricator-button-caption:hover,
a.phabricator-button-caption:visited {
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size: 11px;
padding: 3px 0;
color: #444444;
/*
font-weight: bold;
color: #ffffff;
text-shadow: black 1px 1px 2px;
*/
}
.app-icon {
position: relative;
width: 50px;
height: 50px;
margin: 5px;
background: url('/rsrc/image/apps.png') 0 0 no-repeat;
}
.icon-differential {
background-position: 0 0;
}
.icon-maniphest {
background-position: 0 -50px;
}
.icon-create-task {
background-position: 0 -100px;
}
.icon-upload-file {
background-position: 0 -150px;
}
.icon-create-paste {
background-position: 0 -200px;
}
.icon-phriction {
background-position: 0 -250px;
}
.icon-diffusion {
background-position: 0 -300px;
}

View file

@ -2,25 +2,23 @@
* @provides phabricator-jump-nav
*/
.phabricator-jump-nav-form {
text-align: center;
padding: 0px;
margin: 0 2em;
}
.phabricator-jump-nav {
font-size: 18px;
width: 98%;
padding: .25em 1%;
margin-top: -8px;
font-size: 16px;
width: 100%;
padding: 2px 0;
}
.phabricator-jump-nav-caption {
margin-top: 4px;
padding-bottom: 4px;
font-size: 11px;
color: #666666;
margin-top: 4px;
}
.phabricator-jump-nav-buttons {
margin-top: 1em;
text-align: center;
}
.phabricator-jump-nav-buttons a.button {
margin-right: .75em;
width: 125px;
text-align: center;
text-align: left;
}

BIN
webroot/rsrc/image/apps.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB