Fix YANG Model details panel to have scrolling Source Div.
Change-Id: I23dd77ee13e95f73dcaae5d72f553fdfd837d732
diff --git a/apps/yang-gui/src/main/java/org/onosproject/yang/gui/YangModelMessageHandler.java b/apps/yang-gui/src/main/java/org/onosproject/yang/gui/YangModelMessageHandler.java
index 31ff7b0..09b04a7 100644
--- a/apps/yang-gui/src/main/java/org/onosproject/yang/gui/YangModelMessageHandler.java
+++ b/apps/yang-gui/src/main/java/org/onosproject/yang/gui/YangModelMessageHandler.java
@@ -55,7 +55,6 @@
private static final String ID = "id";
private static final String REVISION = "revision";
private static final String MODEL_ID = "modelId";
- // TODO: fill out table columns as needed
private static final String SOURCE = "source";
@@ -63,12 +62,9 @@
ID, REVISION, MODEL_ID
};
- private static final String UTF8 = "UTF-8";
-
private final Logger log = LoggerFactory.getLogger(getClass());
private YangModelRegistry modelRegistry;
- // TODO: fill out other fields as necessary
// ===============-=-=-=-=-=-==================-=-=-=-=-=-=-===========
@@ -119,7 +115,8 @@
}
}
- private void populateRow(TableModel.Row row, String modelId, YangModuleId moduleId) {
+ private void populateRow(TableModel.Row row, String modelId,
+ YangModuleId moduleId) {
row.cell(ID, moduleId.moduleName())
.cell(REVISION, moduleId.revision())
.cell(MODEL_ID, modelId);
@@ -166,7 +163,6 @@
} catch (IOException e) {
log.warn("Unable to read YANG source", e);
- return;
}
}
}
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel-theme.css b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel-theme.css
index afeb601..4d58ebd 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel-theme.css
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel-theme.css
@@ -14,3 +14,9 @@
* limitations under the License.
*/
+.light #yang-model-details-panel .src-frame {
+ background-color: #f4f4f4;
+}
+.dark #yang-model-details-panel .src-frame {
+ background-color: #1b1b1b;
+}
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
index 798cf51..3203c36 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
@@ -19,10 +19,6 @@
display: inline-block;
}
-#ov-yang-model div.ctrl-btns {
-}
-
-
#yang-model-details-panel.floatpanel {
z-index: 0;
@@ -49,14 +45,9 @@
#yang-model-details-panel h2 {
display: inline-block;
margin: 8px 0;
+ padding-left: 6px;
}
-#yang-model-details-panel .top-content table {
- font-size: 12pt;
-}
-
-#yang-model-details-panel .model-source {
- display: block;
- overflow: scroll;
- font-family: "Courier New", serif;
+#yang-model-details-panel .src-frame {
+ overflow: auto;
}
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
index 26e2828..3be7e0c 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
@@ -25,32 +25,27 @@
var $log, $scope, fs, mast, ps, wss, is;
// constants
- var topPdg = 28,
- ctnrPdg = 24,
- pWidth = 800,
- scrollSize = 17,
- tblPdg = 50;
+ var topPdg = 20,
+ hFudge = 12,
+ srcFudge = 130,
+ pWidth = 800;
// internal state
var detailsPanel,
- ymodel,
pStartY,
pHeight,
wSize,
top,
- topTable,
bottom,
- iconDiv;
+ iconDiv,
+ srcFrame,
+ srcDiv;
// constants
var pName = 'yang-model-details-panel',
detailsReq = 'yangModelDetailsRequest',
- detailsResp = 'yangModelDetailsResponse',
+ detailsResp = 'yangModelDetailsResponse';
- propOrder = [
- ],
- friendlyProps = [
- ];
function createDetailsPanel() {
detailsPanel = ps.createPanel(pName, {
@@ -58,60 +53,56 @@
margin: 0,
hideMargin: 0
});
+ detailsPanel.el().style({ top: pStartY + 'px'});
$scope.hidePanel = function () { detailsPanel.hide(); };
detailsPanel.hide();
}
+ function fixHeight(d, h) {
+ d.style({ height: h + 'px'});
+ }
+
function populateDetails(details) {
setUpPanel();
populateTop(details);
populateBottom(details.source);
+
+ detailsPanel.height(pHeight);
+ // also have to fix the height of the source frame to make scroll work
+ fixHeight(srcFrame, pHeight - srcFudge);
}
function setUpPanel() {
- var container, closeBtn, dataDiv;
+ var container, closeBtn;
detailsPanel.empty();
container = detailsPanel.append('div').classed('container', true);
top = container.append('div').classed('top', true);
+
closeBtn = top.append('div').classed('close-btn', true);
addCloseBtn(closeBtn);
+
iconDiv = top.append('div').classed('dev-icon', true);
top.append('h2');
- topTable = top.append('div').classed('top-content', true)
- .append('table');
top.append('hr');
bottom = container.append('div').classed('bottom', true);
- bottom.append('h2').classed('modules-title', true).html('YANG Source');
- bottom.append('div').classed('module-source');
- bottom.select('div').append('pre');
- }
+ bottom.append('h2').html('YANG Source');
- function addProp(tbody, index, value) {
- var tr = tbody.append('tr');
-
- function addCell(cls, txt) {
- tr.append('td').attr('class', cls).html(txt);
- }
- addCell('label', friendlyProps[index] + ' :');
- addCell('value', value);
+ srcFrame = bottom.append('div').classed('src-frame', true);
+ srcDiv = srcFrame.append('div').classed('module-source', true);
+ srcDiv.append('pre');
}
function populateTop(details) {
is.loadEmbeddedIcon(iconDiv, 'nav_yang', 40);
- top.select('h2').html('Module ' + details.module + " (" + details.revision + ")");
-
- var tbody = topTable.append('tbody');
-
- propOrder.forEach(function (prop, i) {
- addProp(tbody, i, details[prop]);
- });
+ top.select('h2')
+ .html('Module ' + details.id + ' (' + details.revision + ')');
}
function populateBottom(source) {
- var src = bottom.select('pre');
+ var src = srcDiv.select('pre');
src.html(source.join('\n'));
}
@@ -129,13 +120,10 @@
div.on('click', closePanel);
}
-
// callback invoked when data from a details request returns from server
function respDetailsCb(data) {
$scope.panelData = data.details;
- ymodel = data.yangModel;
$scope.$apply();
- // TODO: complete the detail panel directive.
$log.debug('YANG_MODEL>', detailsResp, data);
}
@@ -203,7 +191,7 @@
pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+ mast.mastHeight() + topPdg;
wSize = fs.windowSize(pStartY);
- pHeight = wSize.height;
+ pHeight = wSize.height - hFudge;
}
function initPanel() {